From 6918b0ae28bdbc84c671ef7eb82fbeba9df74460 Mon Sep 17 00:00:00 2001
From: Rot4tion <nhonhoem0123@gmail.com>
Date: Fri, 11 Oct 2024 13:15:23 +0700
Subject: [PATCH] handle mini state

---
 public/registry/shadcn-sidebar.json                 | 2 +-
 src/components/admin-panel/collapse-menu-button.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/registry/shadcn-sidebar.json b/public/registry/shadcn-sidebar.json
index 14ea155..e36dc46 100644
--- a/public/registry/shadcn-sidebar.json
+++ b/public/registry/shadcn-sidebar.json
@@ -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"
     },
diff --git a/src/components/admin-panel/collapse-menu-button.tsx b/src/components/admin-panel/collapse-menu-button.tsx
index 30fd3c6..dd99548 100644
--- a/src/components/admin-panel/collapse-menu-button.tsx
+++ b/src/components/admin-panel/collapse-menu-button.tsx
@@ -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">