@greatapps/common 1.1.308 → 1.1.309

package/dist/components/layouts/NavBar.mjs

@@ -82,7 +82,7 @@ function NavBar({
                 "button",
                 {
                   onClick: onExpandClick,
-                  className: "absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10",
+                  className: "md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10",
                   children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16, className: "text-gray-500" })
                 }
               ) }),

package/dist/components/layouts/NavBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  onLogoClick: () => void;\n  onAppIconClick?: () => void;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  onLogoClick,\n  onAppIconClick,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = !whitelabel || whitelabel.id === 1;\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || 'Great';\n\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger\n              className=\"cursor-pointer\"\n              asChild\n              onClick={onLogoClick}\n            >\n              {isDefaultWl ? (\n                <Image\n                  src=\"/icons/great-icon.svg\"\n                  alt=\"Great Icon\"\n                  width={28}\n                  height={28}\n                />\n              ) : (\n                <div\n                  className={cn(\"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\", activeApp !== \"gapps\" && \"opacity-20\")}\n                  style={{ backgroundColor: primaryColor }}\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                  </svg>\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={onAppIconClick}>\n              <div\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === \"gpages\" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== \"gpages\" ? 0.2 : undefined } : undefined}\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  onLogoClick: () => void;\n  onAppIconClick?: () => void;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  onLogoClick,\n  onAppIconClick,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = !whitelabel || whitelabel.id === 1;\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || 'Great';\n\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger\n              className=\"cursor-pointer\"\n              asChild\n              onClick={onLogoClick}\n            >\n              {isDefaultWl ? (\n                <Image\n                  src=\"/icons/great-icon.svg\"\n                  alt=\"Great Icon\"\n                  width={28}\n                  height={28}\n                />\n              ) : (\n                <div\n                  className={cn(\"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\", activeApp !== \"gapps\" && \"opacity-20\")}\n                  style={{ backgroundColor: primaryColor }}\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                  </svg>\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={onAppIconClick}>\n              <div\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === \"gpages\" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== \"gpages\" ? 0.2 : undefined } : undefined}\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}

package/dist/components/layouts/SideBarNavigation.mjs

@@ -1,18 +1,51 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore";
+import { useMdSidebarStore } from "../../store/useMdSidebarStore";
 import { cn } from "../../infra/utils/clsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 function SideBarNavigation({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const { isExpanded, collapse } = useDesktopSidebarStore();
+  const collapseMd = useMdSidebarStore((s) => s.collapse);
+  React.useEffect(() => {
+    const mql = window.matchMedia("(min-width: 1351px)");
+    const handler = (e) => {
+      if (e.matches) collapseMd();
+    };
+    if (mql.matches) collapseMd();
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [collapseMd]);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "sidebar-navigation",
-      className: cn("hidden lg:flex flex-col h-screen p-4 border-r w-[273px] border-gray-200", className),
+      className: cn(
+        "relative hidden flex-col h-screen p-4 border-r border-gray-200 transition-all duration-300 ease-in-out overflow-hidden",
+        isExpanded ? "lg:flex w-[273px]" : "lg:hidden w-0 p-0 border-r-0",
+        className
+      ),
       ...props,
-      children
+      children: [
+        isExpanded && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: collapse,
+              className: "absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40",
+              children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 16, className: "text-gray-500" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Recolher menu" })
+        ] }),
+        children
+      ]
     }
   );
 }

package/dist/components/layouts/SideBarNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-navigation\"\n            className={cn(\"hidden lg:flex flex-col h-screen p-4 border-r w-[273px] border-gray-200\", className)}\n            {...props}\n        >\n            {children}\n        </div>\n    )\n}\n\nexport { SideBarNavigation };\n"],"mappings":";AAcQ;AATR,SAAS,UAAU;AAGnB,SAAS,kBAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW,GAAG,2EAA2E,SAAS;AAAA,MACjG,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\">) {\n    const { isExpanded, collapse } = useDesktopSidebarStore()\n    const collapseMd = useMdSidebarStore((s) => s.collapse)\n\n    React.useEffect(() => {\n        const mql = window.matchMedia('(min-width: 1351px)')\n        const handler = (e: MediaQueryListEvent) => {\n            if (e.matches) collapseMd()\n        }\n        if (mql.matches) collapseMd()\n        mql.addEventListener('change', handler)\n        return () => mql.removeEventListener('change', handler)\n    }, [collapseMd])\n\n    return (\n        <div\n            data-slot=\"sidebar-navigation\"\n            className={cn(\n                \"relative hidden flex-col h-screen p-4 border-r border-gray-200 transition-all duration-300 ease-in-out overflow-hidden\",\n                isExpanded ? \"lg:flex w-[273px]\" : \"lg:hidden w-0 p-0 border-r-0\",\n                className,\n            )}\n            {...props}\n        >\n            {isExpanded && (\n                <Tooltip>\n                    <TooltipTrigger asChild>\n                        <button\n                            onClick={collapse}\n                            className=\"absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40\"\n                        >\n                            <IconChevronLeft size={16} className=\"text-gray-500\" />\n                        </button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"right\">Recolher menu</TooltipContent>\n                </Tooltip>\n            )}\n            {children}\n        </div>\n    )\n}\n\nexport { SideBarNavigation };\n"],"mappings":";AAsCgB,SAMY,KANZ;AApChB,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,kBAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,uBAAuB;AACxD,QAAM,aAAa,kBAAkB,CAAC,MAAM,EAAE,QAAQ;AAEtD,QAAM,UAAU,MAAM;AAClB,UAAM,MAAM,OAAO,WAAW,qBAAqB;AACnD,UAAM,UAAU,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAS,YAAW;AAAA,IAC9B;AACA,QAAI,IAAI,QAAS,YAAW;AAC5B,QAAI,iBAAiB,UAAU,OAAO;AACtC,WAAO,MAAM,IAAI,oBAAoB,UAAU,OAAO;AAAA,EAC1D,GAAG,CAAC,UAAU,CAAC;AAEf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA,aAAa,sBAAsB;AAAA,QACnC;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,sBACG,qBAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACzD,GACJ;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC9C;AAAA,QAEH;AAAA;AAAA;AAAA,EACL;AAER;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.308",
+  "version": "1.1.309",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/layouts/NavBar.tsx

@@ -92,7 +92,7 @@ function NavBar({
               <TooltipTrigger asChild>
                 <button
                   onClick={onExpandClick}
-                  className="absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
+                  className="md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
                 >
                   <IconChevronRight size={16} className="text-gray-500" />
                 </button>

package/src/components/layouts/SideBarNavigation.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import { IconChevronLeft } from '@tabler/icons-react'
 import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore"
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
 import { cn } from "../../infra/utils/clsx"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
 
@@ -11,12 +12,42 @@ function SideBarNavigation({
     children,
     ...props
 }: React.ComponentProps<"div">) {
+    const { isExpanded, collapse } = useDesktopSidebarStore()
+    const collapseMd = useMdSidebarStore((s) => s.collapse)
+
+    React.useEffect(() => {
+        const mql = window.matchMedia('(min-width: 1351px)')
+        const handler = (e: MediaQueryListEvent) => {
+            if (e.matches) collapseMd()
+        }
+        if (mql.matches) collapseMd()
+        mql.addEventListener('change', handler)
+        return () => mql.removeEventListener('change', handler)
+    }, [collapseMd])
+
     return (
         <div
             data-slot="sidebar-navigation"
-            className={cn("hidden lg:flex flex-col h-screen p-4 border-r w-[273px] border-gray-200", className)}
+            className={cn(
+                "relative hidden flex-col h-screen p-4 border-r border-gray-200 transition-all duration-300 ease-in-out overflow-hidden",
+                isExpanded ? "lg:flex w-[273px]" : "lg:hidden w-0 p-0 border-r-0",
+                className,
+            )}
             {...props}
         >
+            {isExpanded && (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <button
+                            onClick={collapse}
+                            className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
+                        >
+                            <IconChevronLeft size={16} className="text-gray-500" />
+                        </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">Recolher menu</TooltipContent>
+                </Tooltip>
+            )}
             {children}
         </div>
     )