); }; export default Page; 54:T1a9e,"use client"; import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { NavItem, NavMain, } from "@/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/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: "Dashboards", isSection: true }, { title: "Analytics", icon: PieChart, href: "#" }, { title: "CRM Dashboard", icon: ClipboardList, href: "#" }, // Pages Section { label: "Pages", isSection: true }, { title: "Tables", icon: Table, href: "#" }, { title: "Forms", icon: ClipboardList, href: "#" }, { title: "User Profile", icon: CircleUserRound, href: "#" }, // Apps Section { label: "Apps", isSection: true }, { title: "Notes", icon: Notebook, href: "#" }, { title: "Tickets", icon: Ticket, href: "#" }, { title: "Blogs", icon: Languages, children: [ { title: "Blog Post", href: "#" }, { title: "Blog Detail", href: "#" }, { title: "Blog Edit", href: "#" }, { title: "Blog Create", href: "#" }, { title: "Manage Blogs", href: "#" }, ], }, // Form Elements Section { label: "Form Elements", isSection: true }, { title: "Shadcn Forms", icon: NotepadText, children: [ { title: "Button", href: "#" }, { title: "Input", href: "#" }, { title: "Select", href: "#" }, { title: "Checkbox", href: "#" }, { title: "Radio", href: "#" }, ], }, { title: "Form layouts", icon: AlignStartVertical, children: [ { title: "Forms Horizontal", href: "#" }, { title: "Forms Vertical", href: "#" }, { title: "Forms Validation", href: "#" }, { title: "Forms Examples", href: "#" }, { title: "Forms Wizard", href: "#" }, ], }, ]; const navItems = [ { title: "Help Center", url: "/theme-pages/faq", icon: LifeBuoy, }, { title: "Documentation", url: "#", icon: BookOpen, }, ] export function AppSidebar() { return (

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

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

{/* card */}

{/* Plan info */}

{/* Header row */}

Basic Plan

70%

{/* Progress bar */}

{/* Usage text */}

68/100 monthly limit used

{/* Upgrade button */}

{navItems.map((item) => (

{item.title}

))}

); } 55:T1e93,"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", 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; } 56:Td87,"use client"; import { useState } from "react"; import SimpleBar from "simplebar-react"; import "simplebar-react/dist/simplebar.min.css"; import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { SearchIcon } from "lucide-react"; interface SearchType { href: string; title: string; } const SearchLinks: SearchType[] = [ { title: 'Modern', href: '/', }, { title: 'eCommerce', href: '/dashboards/eCommerce', }, { title: 'General', href: '/dashboards/general', }, { title: 'Music', href: '/dashboards/music', }, { title: 'General', href: '/dashboards/general', }, ]; const Search = () => { const [openModal, setOpenModal] = useState(false); return ( ); }; export default Search; 57:Td9c,"use client"; import type { ReactElement } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Bookmark, LogOut, LucideIcon, ReceiptText, Settings, User, } from "lucide-react"; type Props = { trigger: ReactElement; defaultOpen?: boolean; align?: "start" | "center" | "end"; }; type MenuItem = { label: string; icon: LucideIcon; destructive?: boolean; }; const PROFILE_ITEMS: MenuItem[] = [ { label: "My Profile", icon: User }, { label: "My Subscription", icon: Bookmark }, { label: "My Invoice", icon: ReceiptText }, ]; const SETTINGS_ITEMS: MenuItem[] = [ { label: "Account Settings", icon: Settings }, ]; const LOGOUT_ITEM: MenuItem = { label: "Signout", icon: LogOut, destructive: true, }; const itemClass = "px-4 py-2.5 text-base cursor-pointer gap-3"; const ProfileDropdown = ({ trigger, defaultOpen, align = "end" }: Props) => { return ( {trigger} {/* User Info */}

David McMichael david.mcmichael@example.com

{/* Main Links */} {PROFILE_ITEMS.map(({ label, icon: Icon }) => ( {label} ))} {/* Settings */} {SETTINGS_ITEMS.map(({ label, icon: Icon }) => ( {label} ))} {/* Logout */} {LOGOUT_ITEM.label} ); }; export default ProfileDropdown; 58:T93f,'use client' import { useState, type ReactElement } from 'react' import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' type Props = { trigger: ReactElement defaultOpen?: boolean align?: 'start' | 'center' | 'end' } type Language = { value: string label: string icon: string } const LANGUAGES: Language[] = [ { value: 'english', label: 'English (UK)', icon: 'https://images.shadcnspace.com/assets/flags/flag-us.svg', }, { value: 'chinese', label: '中国人 (Chinese)', icon: 'https://images.shadcnspace.com/assets/flags/flag-china.svg', }, { value: 'french', label: 'français (French)', icon: 'https://images.shadcnspace.com/assets/flags/flag-france.svg', }, { value: 'arabic', label: 'عربي (Arabic)', icon: 'https://images.shadcnspace.com/assets/flags/flag-australia.svg', }, ] const itemClass = 'cursor-pointer gap-2 pl-2 text-sm data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground [&>span]:hidden' const LanguageDropdown = ({ trigger, defaultOpen, align = 'end' }: Props) => { const [language, setLanguage] = useState(LANGUAGES[0].value) return ( {trigger} {LANGUAGES.map(({ value, label, icon }) => (

{label} ))} ) } export default LanguageDropdown 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"}]]}]}],["$","li","simplebar-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/simplebar-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":"simplebar-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["sidebar","scroll-area","collapsible","card","button","dialog","input","avatar","dropdown-menu"]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcndashboard.dev/r/dashboard-layout-01.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-dashboard/dashboard-layout-01","itemId":"@shadcn-dashboard/dashboard-layout-01"}],["$","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-01/page.tsx","content":"$53","type":"registry:page","target":"app/dashboard-layout-01/page.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/app-sidebar.tsx","content":"$54","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/app-sidebar.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/nav-main.tsx","content":"$55","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/nav-main.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/search.tsx","content":"$56","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/search.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/dropdown-profile.tsx","content":"$57","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/dropdown-profile.tsx"},{"path":"src/components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/dropdown-language.tsx","content":"$58","type":"registry:component","target":"components/shadcn-dashboard/blocks/dashboard-layout/dashboard-layout-01/dropdown-language.tsx"}]}]]}],"$L59"]}]

Quick Page Links

{link.title}

Dashboard Layout 01 Admin Dashboard Layout

Installation

Files

app

components

Styles