{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidebar-10", "title": "Sidebar 10", "description": "A sidebar in a popover.", "registryDependencies": [ "sidebar", "breadcrumb", "separator", "popover", "collapsible", "dropdown-menu" ], "files": [ { "path": "registry/base-sera/blocks/sidebar-10/page.tsx", "content": "import { AppSidebar } from \"@/registry/base-sera/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-actions\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport default function Page() {\n return (\n \n \n \n

\n \n \n \n \n \n \n Project Management & Task Tracking\n \n \n \n \n

\n \n

\n \n \n )\n}\n", "type": "registry:page", "target": "app/dashboard/page.tsx" }, { "path": "registry/base-sera/blocks/sidebar-10/components/app-sidebar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavFavorites } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/base-sera/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/base-sera/blocks/sidebar-10/components/team-switcher\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarHeader,\n SidebarRail,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n teams: [\n {\n name: \"Acme Inc\",\n logo: (\n \n ),\n plan: \"Enterprise\",\n },\n {\n name: \"Acme Corp.\",\n logo: (\n \n ),\n plan: \"Startup\",\n },\n {\n name: \"Evil Corp.\",\n logo: (\n \n ),\n plan: \"Free\",\n },\n ],\n navMain: [\n {\n title: \"Search\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Ask AI\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Home\",\n url: \"#\",\n icon: (\n \n ),\n isActive: true,\n },\n {\n title: \"Inbox\",\n url: \"#\",\n icon: (\n \n ),\n badge: \"10\",\n },\n ],\n navSecondary: [\n {\n title: \"Calendar\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Templates\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Trash\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Help\",\n url: \"#\",\n icon: (\n \n ),\n },\n ],\n favorites: [\n {\n name: \"Project Management & Task Tracking\",\n url: \"#\",\n emoji: \"📊\",\n },\n {\n name: \"Family Recipe Collection & Meal Planning\",\n url: \"#\",\n emoji: \"🍳\",\n },\n {\n name: \"Fitness Tracker & Workout Routines\",\n url: \"#\",\n emoji: \"💪\",\n },\n {\n name: \"Book Notes & Reading List\",\n url: \"#\",\n emoji: \"📚\",\n },\n {\n name: \"Sustainable Gardening Tips & Plant Care\",\n url: \"#\",\n emoji: \"🌱\",\n },\n {\n name: \"Language Learning Progress & Resources\",\n url: \"#\",\n emoji: \"🗣️\",\n },\n {\n name: \"Home Renovation Ideas & Budget Tracker\",\n url: \"#\",\n emoji: \"🏠\",\n },\n {\n name: \"Personal Finance & Investment Portfolio\",\n url: \"#\",\n emoji: \"💰\",\n },\n {\n name: \"Movie & TV Show Watchlist with Reviews\",\n url: \"#\",\n emoji: \"🎬\",\n },\n {\n name: \"Daily Habit Tracker & Goal Setting\",\n url: \"#\",\n emoji: \"✅\",\n },\n ],\n workspaces: [\n {\n name: \"Personal Life Management\",\n emoji: \"🏠\",\n pages: [\n {\n name: \"Daily Journal & Reflection\",\n url: \"#\",\n emoji: \"📔\",\n },\n {\n name: \"Health & Wellness Tracker\",\n url: \"#\",\n emoji: \"🍏\",\n },\n {\n name: \"Personal Growth & Learning Goals\",\n url: \"#\",\n emoji: \"🌟\",\n },\n ],\n },\n {\n name: \"Professional Development\",\n emoji: \"💼\",\n pages: [\n {\n name: \"Career Objectives & Milestones\",\n url: \"#\",\n emoji: \"🎯\",\n },\n {\n name: \"Skill Acquisition & Training Log\",\n url: \"#\",\n emoji: \"🧠\",\n },\n {\n name: \"Networking Contacts & Events\",\n url: \"#\",\n emoji: \"🤝\",\n },\n ],\n },\n {\n name: \"Creative Projects\",\n emoji: \"🎨\",\n pages: [\n {\n name: \"Writing Ideas & Story Outlines\",\n url: \"#\",\n emoji: \"✍️\",\n },\n {\n name: \"Art & Design Portfolio\",\n url: \"#\",\n emoji: \"🖼️\",\n },\n {\n name: \"Music Composition & Practice Log\",\n url: \"#\",\n emoji: \"🎵\",\n },\n ],\n },\n {\n name: \"Home Management\",\n emoji: \"🏡\",\n pages: [\n {\n name: \"Household Budget & Expense Tracking\",\n url: \"#\",\n emoji: \"💰\",\n },\n {\n name: \"Home Maintenance Schedule & Tasks\",\n url: \"#\",\n emoji: \"🔧\",\n },\n {\n name: \"Family Calendar & Event Planning\",\n url: \"#\",\n emoji: \"📅\",\n },\n ],\n },\n {\n name: \"Travel & Adventure\",\n emoji: \"🧳\",\n pages: [\n {\n name: \"Trip Planning & Itineraries\",\n url: \"#\",\n emoji: \"🗺️\",\n },\n {\n name: \"Travel Bucket List & Inspiration\",\n url: \"#\",\n emoji: \"🌎\",\n },\n {\n name: \"Travel Journal & Photo Gallery\",\n url: \"#\",\n emoji: \"📸\",\n },\n ],\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { "path": "registry/base-sera/blocks/sidebar-10/components/nav-actions.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-sera/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n

\n Edit Oct 08\n

\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n

\n )\n}\n", "type": "registry:component" }, { "path": "registry/base-sera/blocks/sidebar-10/components/nav-favorites.tsx", "content": "\"use client\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavFavorites({\n favorites,\n}: {\n favorites: {\n name: string\n url: string\n emoji: string\n }[]\n}) {\n const { isMobile } = useSidebar()\n return (\n \n Favorites\n \n {favorites.map((item) => (\n \n }>\n {item.emoji}\n {item.name}\n \n \n \n }\n >\n \n More\n \n \n \n \n \n Remove from Favorites\n \n \n \n \n \n \n Copy Link\n \n \n \n Open in New Tab\n \n \n \n \n Delete\n \n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", "type": "registry:component" }, { "path": "registry/base-sera/blocks/sidebar-10/components/nav-main.tsx", "content": "\"use client\"\n\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon: React.ReactNode\n isActive?: boolean\n }[]\n}) {\n return (\n \n {items.map((item) => (\n \n }\n >\n {item.icon}\n {item.title}\n \n \n ))}\n \n )\n}\n", "type": "registry:component" }, { "path": "registry/base-sera/blocks/sidebar-10/components/nav-secondary.tsx", "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: React.ReactNode\n badge?: React.ReactNode\n }[]\n} & React.ComponentPropsWithoutRef) {\n return (\n \n \n \n {items.map((item) => (\n \n }>\n {item.icon}\n {item.title}\n \n {item.badge && {item.badge}}\n \n ))}\n \n \n \n )\n}\n", "type": "registry:component" }, { "path": "registry/base-sera/blocks/sidebar-10/components/nav-workspaces.tsx", "content": "\"use client\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-sera/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n workspaces,\n}: {\n workspaces: {\n name: string\n emoji: React.ReactNode\n pages: {\n name: string\n emoji: React.ReactNode\n }[]\n }[]\n}) {\n return (\n \n Workspaces\n \n \n {workspaces.map((workspace) => (\n \n \n }>\n {workspace.emoji}\n {workspace.name}\n \n }\n className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n showOnHover\n >\n \n \n \n \n \n \n \n {workspace.pages.map((page) => (\n \n }>\n {page.emoji}\n {page.name}\n \n \n ))}\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { "path": "registry/base-sera/blocks/sidebar-10/components/team-switcher.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n teams,\n}: {\n teams: {\n name: string\n logo: React.ReactNode\n plan: string\n }[]\n}) {\n const [activeTeam, setActiveTeam] = React.useState(teams[0])\n if (!activeTeam) {\n return null\n }\n return (\n \n \n \n }\n >\n

\n {activeTeam.logo}\n

\n {activeTeam.name}\n \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n className=\"gap-2 p-2\"\n >\n

\n {team.logo}\n

\n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n \n \n

\n \n

\n Add team\n

\n \n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], "categories": [ "sidebar", "dashboard" ], "type": "registry:block" }