Skip to content

Commit

Permalink
handle mini state
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rot4tion
Rot4tion committed Oct 11, 2024
1 parent a51baea commit 6918b0a
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion public/registry/shadcn-sidebar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
},
{
"type": "registry:component",
"content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport { ChevronDown, Dot, LucideIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DropdownMenuArrow } from \"@radix-ui/react-dropdown-menu\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger\n} from \"@/components/ui/collapsible\";\nimport {\n Tooltip,\n TooltipTrigger,\n TooltipContent,\n TooltipProvider\n} from \"@/components/ui/tooltip\";\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuSeparator\n} from \"@/components/ui/dropdown-menu\";\nimport { usePathname } from \"next/navigation\";\n\ntype Submenu = {\n href: string;\n label: string;\n active?: boolean;\n};\n\ninterface CollapseMenuButtonProps {\n icon: LucideIcon;\n label: string;\n active: boolean;\n submenus: Submenu[];\n isOpen: boolean | undefined;\n}\n\nexport function CollapseMenuButton({\n icon: Icon,\n label,\n active,\n submenus,\n isOpen\n}: CollapseMenuButtonProps) {\n const pathname = usePathname();\n const isSubmenuActive = submenus.some((submenu) =>\n submenu.active === undefined ? submenu.href === pathname : submenu.active\n );\n const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);\n\n return isOpen ? (\n <Collapsible\n open={isCollapsed}\n onOpenChange={setIsCollapsed}\n className=\"w-full\"\n >\n <CollapsibleTrigger\n className=\"[&[data-state=open]>div>div>svg]:rotate-180 mb-1\"\n asChild\n >\n <Button\n variant={isSubmenuActive ? \"secondary\" : \"ghost\"}\n className=\"w-full justify-start h-10\"\n >\n <div className=\"w-full items-center flex justify-between\">\n <div className=\"flex items-center\">\n <span className=\"mr-4\">\n <Icon size={18} />\n </span>\n <p\n className={cn(\n \"max-w-[150px] truncate\",\n isOpen\n ? \"translate-x-0 opacity-100\"\n : \"-translate-x-96 opacity-0\"\n )}\n >\n {label}\n </p>\n </div>\n <div\n className={cn(\n \"whitespace-nowrap\",\n isOpen\n ? \"translate-x-0 opacity-100\"\n : \"-translate-x-96 opacity-0\"\n )}\n >\n <ChevronDown\n size={18}\n className=\"transition-transform duration-200\"\n />\n </div>\n </div>\n </Button>\n </CollapsibleTrigger>\n <CollapsibleContent className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n {submenus.map(({ href, label, active }, index) => (\n <Button\n key={index}\n variant={\n (active === undefined && pathname === href) || active\n ? \"secondary\"\n : \"ghost\"\n }\n className=\"w-full justify-start h-10 mb-1\"\n asChild\n >\n <Link href={href}>\n <span className=\"mr-4 ml-2\">\n <Dot size={18} />\n </span>\n <p\n className={cn(\n \"max-w-[170px] truncate\",\n isOpen\n ? \"translate-x-0 opacity-100\"\n : \"-translate-x-96 opacity-0\"\n )}\n >\n {label}\n </p>\n </Link>\n </Button>\n ))}\n </CollapsibleContent>\n </Collapsible>\n ) : (\n <DropdownMenu>\n <TooltipProvider disableHoverableContent>\n <Tooltip delayDuration={100}>\n <TooltipTrigger asChild>\n <DropdownMenuTrigger asChild>\n <Button\n variant={active ? \"secondary\" : \"ghost\"}\n className=\"w-full justify-start h-10 mb-1\"\n >\n <div className=\"w-full items-center flex justify-between\">\n <div className=\"flex items-center\">\n <span className={cn(isOpen === false ? \"\" : \"mr-4\")}>\n <Icon size={18} />\n </span>\n <p\n className={cn(\n \"max-w-[200px] truncate\",\n isOpen === false ? \"opacity-0\" : \"opacity-100\"\n )}\n >\n {label}\n </p>\n </div>\n </div>\n </Button>\n </DropdownMenuTrigger>\n </TooltipTrigger>\n <TooltipContent side=\"right\" align=\"start\" alignOffset={2}>\n {label}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n <DropdownMenuContent side=\"right\" sideOffset={25} align=\"start\">\n <DropdownMenuLabel className=\"max-w-[190px] truncate\">\n {label}\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n {submenus.map(({ href, label, active }, index) => (\n <DropdownMenuItem key={index} asChild>\n <Link\n className={`cursor-pointer ${\n ((active === undefined && pathname === href) || active) &&\n \"bg-secondary\"\n }`}\n href={href}\n >\n <p className=\"max-w-[180px] truncate\">{label}</p>\n </Link>\n </DropdownMenuItem>\n ))}\n <DropdownMenuArrow className=\"fill-border\" />\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
"content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport { ChevronDown, Dot, LucideIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DropdownMenuArrow } from \"@radix-ui/react-dropdown-menu\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger\n} from \"@/components/ui/collapsible\";\nimport {\n Tooltip,\n TooltipTrigger,\n TooltipContent,\n TooltipProvider\n} from \"@/components/ui/tooltip\";\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuSeparator\n} from \"@/components/ui/dropdown-menu\";\nimport { usePathname } from \"next/navigation\";\n\ntype Submenu = {\n href: string;\n label: string;\n active?: boolean;\n};\n\ninterface CollapseMenuButtonProps {\n icon: LucideIcon;\n label: string;\n active: boolean;\n submenus: Submenu[];\n isOpen: boolean | undefined;\n}\n\nexport function CollapseMenuButton({\n icon: Icon,\n label,\n active,\n submenus,\n isOpen\n}: CollapseMenuButtonProps) {\n const pathname = usePathname();\n const isSubmenuActive = submenus.some((submenu) =>\n submenu.active === undefined ? submenu.href === pathname : submenu.active\n );\n const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);\n\n return isOpen ? (\n <Collapsible\n open={isCollapsed}\n onOpenChange={setIsCollapsed}\n className=\"w-full\"\n >\n <CollapsibleTrigger\n className=\"[&[data-state=open]>div>div>svg]:rotate-180 mb-1\"\n asChild\n >\n <Button\n variant={isSubmenuActive ? \"secondary\" : \"ghost\"}\n className=\"w-full justify-start h-10\"\n >\n <div className=\"w-full items-center flex justify-between\">\n <div className=\"flex items-center\">\n <span className=\"mr-4\">\n <Icon size={18} />\n </span>\n <p\n className={cn(\n \"max-w-[150px] truncate\",\n isOpen\n ? \"translate-x-0 opacity-100\"\n : \"-translate-x-96 opacity-0\"\n )}\n >\n {label}\n </p>\n </div>\n <div\n className={cn(\n \"whitespace-nowrap\",\n isOpen\n ? \"translate-x-0 opacity-100\"\n : \"-translate-x-96 opacity-0\"\n )}\n >\n <ChevronDown\n size={18}\n className=\"transition-transform duration-200\"\n />\n </div>\n </div>\n </Button>\n </CollapsibleTrigger>\n <CollapsibleContent className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n {submenus.map(({ href, label, active }, index) => (\n <Button\n key={index}\n variant={\n (active === undefined && pathname === href) || active\n ? \"secondary\"\n : \"ghost\"\n }\n className=\"w-full justify-start h-10 mb-1\"\n asChild\n >\n <Link href={href}>\n <span className=\"mr-4 ml-2\">\n <Dot size={18} />\n </span>\n <p\n className={cn(\n \"max-w-[170px] truncate\",\n isOpen\n ? \"translate-x-0 opacity-100\"\n : \"-translate-x-96 opacity-0\"\n )}\n >\n {label}\n </p>\n </Link>\n </Button>\n ))}\n </CollapsibleContent>\n </Collapsible>\n ) : (\n <DropdownMenu>\n <TooltipProvider disableHoverableContent>\n <Tooltip delayDuration={100}>\n <TooltipTrigger asChild>\n <DropdownMenuTrigger asChild>\n <Button\n variant={isSubmenuActive ? \"secondary\" : \"ghost\"}\n className=\"w-full justify-start h-10 mb-1\"\n >\n <div className=\"w-full items-center flex justify-between\">\n <div className=\"flex items-center\">\n <span className={cn(isOpen === false ? \"\" : \"mr-4\")}>\n <Icon size={18} />\n </span>\n <p\n className={cn(\n \"max-w-[200px] truncate\",\n isOpen === false ? \"opacity-0\" : \"opacity-100\"\n )}\n >\n {label}\n </p>\n </div>\n </div>\n </Button>\n </DropdownMenuTrigger>\n </TooltipTrigger>\n <TooltipContent side=\"right\" align=\"start\" alignOffset={2}>\n {label}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n <DropdownMenuContent side=\"right\" sideOffset={25} align=\"start\">\n <DropdownMenuLabel className=\"max-w-[190px] truncate\">\n {label}\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n {submenus.map(({ href, label, active }, index) => (\n <DropdownMenuItem key={index} asChild>\n <Link\n className={`cursor-pointer ${\n ((active === undefined && pathname === href) || active) &&\n \"bg-secondary\"\n }`}\n href={href}\n >\n <p className=\"max-w-[180px] truncate\">{label}</p>\n </Link>\n </DropdownMenuItem>\n ))}\n <DropdownMenuArrow className=\"fill-border\" />\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
"path": "components/admin-panel/collapse-menu-button.tsx",
"target": "components/admin-panel/collapse-menu-button.tsx"
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/admin-panel/collapse-menu-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export function CollapseMenuButton({
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
variant={active ? "secondary" : "ghost"}
variant={isSubmenuActive ? "secondary" : "ghost"}
className="w-full justify-start h-10 mb-1"
>
<div className="w-full items-center flex justify-between">
Expand Down

0 comments on commit 6918b0a

Please sign in to comment.