[V0_FILE]typescriptreact:file="hooks/use-submenu-state.ts" isMerged="true" import { useState, useCallback } from "react" export function useSubmenuState(initialState: Record = {}) { const [openStates, setOpenStates] = useState(initialState) const toggleSubmenu = useCallback((id: string) => { setOpenStates((prev) => ({ ...prev, [id]: !prev[id] })) }, []) return { openStates, toggleSubmenu } } [V0_FILE]typescriptreact:file="components/card-sidenav.tsx" isEdit="true" isMerged="true" "use client" import { ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, } from "@/components/ui/sidebar" import { useSubmenuState } from "@/hooks/use-submenu-state" interface MenuItem { id: string title: string items?: MenuItem[] } interface CardSidenavProps { items: MenuItem[] } export function CardSidenav({ items }: CardSidenavProps) { const { openStates, toggleSubmenu } = useSubmenuState() const renderMenuItem = (item: MenuItem, isTopLevel = false) => { const hasSubItems = item.items && item.items.length > 0 const isOpen = openStates[item.id] return ( hasSubItems && toggleSubmenu(item.id)} className={cn("w-full justify-between", hasSubItems && "font-semibold", isTopLevel && "text-lg")} > {item.title} {hasSubItems && ( {isOpen ? : } )} {hasSubItems && ( {isOpen && item.items!.map((subItem) => ( {subItem.title} ))} )} {isTopLevel &&

} ) } return (

{items.map((item) => renderMenuItem(item, true))} ) } [V0_FILE]typescriptreact:file="components/file-explorer-nav.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronRight, File, Folder, FolderOpen } from "lucide-react" import { cn } from "@/lib/utils" interface FileItem { id: string name: string type: "file" | "folder" path?: string items?: FileItem[] } interface FileExplorerNavProps { items: FileItem[] } export function FileExplorerNav({ items }: FileExplorerNavProps) { const [openFolders, setOpenFolders] = React.useState>({}) const toggleFolder = (id: string) => { setOpenFolders((prev) => ({ ...prev, [id]: !prev[id] })) } const renderItem = (item: FileItem, level = 0) => { const isOpen = openFolders[item.id] const hasItems = item.items && item.items.length > 0 return (

{hasItems && isOpen && (

{item.items!.map((subItem) => renderItem(subItem, level + 1))}

)}

) } return (

{items.map((item) => renderItem(item))}

) } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, }, }, } satisfies Config export default config [V0_FILE]typescriptreact:file="components/tree-sidenav.tsx" isEdit="true" "use client" import * as React from "react" import { ChevronRight, ChevronDown, type LucideIcon } from "lucide-react" import * as LucideIcons from "lucide-react" import { cn } from "@/lib/utils" interface NavItem { id: string name: string icon?: string path?: string items?: NavItem[] } interface TreeSidenavProps { items: NavItem[] currentPath: string } export function TreeSidenav({ items, currentPath }: TreeSidenavProps) { const [openFolders, setOpenFolders] = React.useState>({}) React.useEffect(() => { const newOpenFolders: Record = {} const openActiveItemParents = (items: NavItem[]) => { for (const item of items) { if (item.path === currentPath || (item.items && openActiveItemParents(item.items))) { if (item.items) { newOpenFolders[item.id] = true } return true } } return false } openActiveItemParents(items) setOpenFolders(newOpenFolders) }, [items, currentPath]) const toggleFolder = (id: string) => { setOpenFolders((prev) => ({ ...prev, [id]: !prev[id] })) } const renderItem = (item: NavItem, level = 0, isLast = false) => { const isOpen = openFolders[item.id] const hasItems = item.items && item.items.length > 0 const Icon = item.icon ? (LucideIcons[item.icon as keyof typeof LucideIcons] as LucideIcon) : null const isActive = item.path === currentPath return (

{hasItems && isOpen && (

{item.items!.map((subItem, index) => renderItem(subItem, level + 1, index === item.items!.length - 1))}

)}

) } return (

{items.map((item, index) => renderItem(item, 0, index === items.length - 1))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { TreeSidenav } from "@/components/tree-sidenav" import { useState } from "react" const navStructure = [ { id: "dashboard", name: "Dashboard", icon: "LayoutDashboard", path: "/dashboard", }, { id: "projects", name: "Projects", icon: "Briefcase", path: "/projects", items: [ { id: "all-projects", name: "All Projects", path: "/projects/all", }, { id: "active-projects", name: "Active Projects", path: "/projects/active", }, { id: "archived-projects", name: "Archived Projects", path: "/projects/archived", }, ], }, { id: "tasks", name: "Tasks", icon: "CheckSquare", path: "/tasks", items: [ { id: "my-tasks", name: "My Tasks", path: "/tasks/my", }, { id: "assigned-tasks", name: "Assigned Tasks", path: "/tasks/assigned", }, { id: "completed-tasks", name: "Completed Tasks", path: "/tasks/completed", }, ], }, { id: "team", name: "Team", icon: "Users", path: "/team", items: [ { id: "team-members", name: "Team Members", path: "/team/members", }, { id: "roles", name: "Roles", path: "/team/roles", }, { id: "permissions", name: "Permissions", path: "/team/permissions", }, ], }, { id: "reports", name: "Reports", icon: "BarChart", path: "/reports", }, { id: "settings", name: "Settings", icon: "Settings", path: "/settings", items: [ { id: "account-settings", name: "Account Settings", path: "/settings/account", }, { id: "notifications", name: "Notifications", path: "/settings/notifications", }, { id: "integrations", name: "Integrations", path: "/settings/integrations", }, ], }, ] export default function Home() { const [currentPath, setCurrentPath] = useState("/dashboard") return (

) }

About

Tags

Share

About

Tags

Share

More from dhirajraje

More Templates Like This