50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1c2e,"use client"; import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Button } from "@/components/ui/button"; import { NavItem, NavMain, } from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/nav-main"; import { AlignStartVertical, PieChart, CircleUserRound, ClipboardList, Notebook, NotepadText, Table, Languages, Ticket, Rocket, LifeBuoy, BookOpen, } from "lucide-react"; export const navData: NavItem[] = [ // Dashboards Section { label: "لوحات التحكم", isSection: true }, { title: "التحليلات", icon: PieChart, href: "#" }, { title: "لوحة تحكم CRM", icon: ClipboardList, href: "#" }, // Pages Section { label: "الصفحات", isSection: true }, { title: "الجداول", icon: Table, href: "#" }, { title: "النماذج", icon: ClipboardList, href: "#" }, { title: "الملف الشخصي", icon: CircleUserRound, href: "#" }, // Apps Section { label: "التطبيقات", isSection: true }, { title: "الملاحظات", icon: Notebook, href: "#" }, { title: "التذاكر", icon: Ticket, href: "#" }, { title: "المدونات", icon: Languages, children: [ { title: "منشور المدونة", href: "#" }, { title: "تفاصيل المدونة", href: "#" }, { title: "تعديل المدونة", href: "#" }, { title: "إنشاء مدونة", href: "#" }, { title: "إدارة المدونات", href: "#" }, ], }, // Form Elements Section { label: "عناصر النماذج", isSection: true }, { title: "نماذج Shadcn", icon: NotepadText, children: [ { title: "زر", href: "#" }, { title: "حقل الإدخال", href: "#" }, { title: "القائمة المنسدلة", href: "#" }, { title: "خانة الاختيار", href: "#" }, { title: "زر الاختيار", href: "#" }, ], }, { title: "تخطيطات النماذج", icon: AlignStartVertical, children: [ { title: "نماذج أفقية", href: "#" }, { title: "نماذج عمودية", href: "#" }, { title: "التحقق من النماذج", href: "#" }, { title: "أمثلة النماذج", href: "#" }, { title: "معالج النماذج", href: "#" }, ], }, ]; const navItems = [ { title: "مركز المساعدة", url: "/theme-pages/faq", icon: LifeBuoy, }, { title: "التوثيق", url: "#", icon: BookOpen, }, ] export function AppSidebar() { return (

{/* ---------------- Header ---------------- */}

{/* ---------------- Content ---------------- */}

{/* card */}

{/* Plan info */}

{/* Header row */}

الخطة الأساسية

70%

{/* Progress bar */}

{/* Usage text */}

68/100 من الحد الشهري المستخدم

{/* Upgrade button */}

{navItems.map((item) => (

{item.title}

))}

); } 54:T1f85,"use client"; import * as React from "react"; import { ChevronRight, LucideIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "@/components/ui/collapsible"; import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, } from "@/components/ui/sidebar"; export type NavItem = { label?: string; isSection?: boolean; title?: string; icon?: LucideIcon; href?: string; children?: NavItem[]; }; export function NavMain({ items }: { items: NavItem[] }) { const [activeParent, setActiveParent] = React.useState( items.find((i) => !i.isSection)?.title || null ); const [activeChild, setActiveChild] = React.useState(null); return ( <> {items.map((item, index) => ( ))} ); } function NavMainItem({ item, activeParent, setActiveParent, activeChild, setActiveChild, }: { item: NavItem; activeParent: string | null; activeChild: string | null; setActiveParent: (val: string) => void; setActiveChild: (val: string | null) => void; }) { const hasChildren = !!item.children?.length; const isParentActive = activeParent === item.title; const [isOpen, setIsOpen] = React.useState(isParentActive); // Sync open state when activeParent changes React.useEffect(() => { if (isParentActive) { setIsOpen(true); } }, [isParentActive]); // Section label if (item.isSection && item.label) { return ( {item.label} ); } // Item with children → collapsible if (hasChildren && item.title) { return ( setActiveParent(item.title!)} className={cn( "text-sm font-medium px-3 py-2 h-9 transition-colors cursor-pointer justify-between", isParentActive ? "bg-primary! text-primary-foreground!" : "" )} > {item.icon && } {item.title} } /> {item.children!.map((child, index) => ( ))} ); } // Item without children if (item.title) { return ( { setActiveParent(item.title!); setActiveChild(null); }} className={cn( "text-sm font-medium px-3 py-2 h-9 transition-colors cursor-pointer", isParentActive ? "bg-primary! text-primary-foreground!" : "" )} render={} > {item.icon && } {item.title} ); } return null; } function NavMainSubItem({ item, activeParent, setActiveParent, activeChild, setActiveChild, parentTitle, }: { item: NavItem; activeParent: string | null; activeChild: string | null; setActiveParent: (val: string) => void; setActiveChild: (val: string | null) => void; parentTitle?: string; }) { const hasChildren = !!item.children?.length; const [isOpen, setIsOpen] = React.useState(false); if (hasChildren && item.title) { return ( {item.icon && } {item.title} } /> {item.children!.map((child, index) => ( ))} ); } if (item.title) { return ( { setActiveParent(parentTitle || ""); setActiveChild(item.title!); }} render={{item.title}} /> ); } return null; } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["sidebar","scroll-area","collapsible","card","button"]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcndashboard.dev/r/dashboard-layout-02.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-dashboard/dashboard-layout-02","itemId":"@shadcn-dashboard/dashboard-layout-02"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/page.tsx","content":"import { SidebarProvider, SidebarTrigger } from \"@/components/ui/sidebar\";\r\nimport { AppSidebar } from \"@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/app-sidebar\";\r\n\r\nconst Page = () => {\r\n return (\r\n \r\n \r\n {/* ---------------- Main ---------------- */}\r\n

\r\n

\r\n \r\n

\r\n

\r\n \r\n );\r\n};\r\n\r\nexport default Page;\r\n\r\n","type":"registry:page","target":"app/dashboard-layout-02/page.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/app-sidebar.tsx","content":"$53","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/app-sidebar.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/nav-main.tsx","content":"$54","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-02/nav-main.tsx"}]}]]}],"$L55"]}]

Dashboard Layout 02 RTL Layout

Installation

Files

app

components

Styles