@greatapps/common 1.1.114 → 1.1.116

package/dist/components/layouts/AppMobileNavBar.mjs

@@ -25,7 +25,15 @@ function AppMobileNavBar({
             className: `relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
             onClick: onLogoClick,
             children: [
-              /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
+              /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/icons/great-icon.svg",
+                  alt: "GreatApps",
+                  width: 28,
+                  height: 28
+                }
+              ),
               isGappsActive && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
             ]
           }
@@ -51,21 +59,37 @@ function AppMobileNavBar({
                   style: {
                     background: "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)"
                   },
-                  children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
+                  children: /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: "/icons/icon-navbar.svg",
+                      alt: "GreatPages",
+                      width: 24,
+                      height: 24
+                    }
+                  )
                 }
               )
             }
           ) : /* @__PURE__ */ jsx(
             "div",
             {
-              className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-pages-50 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`,
+              className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`,
               onClick: onAppIconClick,
-              children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
+              children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/icons/icon-navbar.svg",
+                  alt: "GreatPages",
+                  width: 24,
+                  height: 24
+                }
+              )
             }
           ) }),
           /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "GreatPages" })
         ] }),
-        isGpagesActive && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-500 rounded-t-xl" })
+        isGpagesActive && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl", style: { backgroundColor: "#6ADCFF" } })
       ] }),
       extraLeftSlot
     ] }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\n\nexport interface AppMobileNavBarProps {\n  /** Which app is currently active — controls which icon gets the indicator */\n  activeApp?: 'gapps' | 'gpages';\n  /** Called when the GreatApps logo is clicked */\n  onLogoClick?: () => void;\n  /** Called when the app icon (e.g. GreatPages) is clicked */\n  onAppIconClick?: () => void;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  activeApp,\n  onLogoClick,\n  onAppIconClick,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  const isGpagesActive = activeApp === 'gpages';\n  const isGappsActive = activeApp === 'gapps';\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <div\n              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}\n              onClick={onLogoClick}\n            >\n              <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n              {isGappsActive && (\n                <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n              )}\n            </div>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">GreatApps</TooltipContent>\n        </Tooltip>\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              {isGpagesActive ? (\n                <div\n                  className=\"size-10 rounded-xl cursor-pointer p-[2px]\"\n                  style={{\n                    border: '1.5px solid rgba(153,234,255,0.75)',\n                    background: 'white',\n                    boxShadow: '0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)',\n                  }}\n                  onClick={onAppIconClick}\n                >\n                  <div\n                    className=\"w-full h-full rounded-lg flex items-center justify-center\"\n                    style={{\n                      background: 'radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)',\n                    }}\n                  >\n                    <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n                  </div>\n                </div>\n              ) : (\n                <div\n                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-pages-50 ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}\n                  onClick={onAppIconClick}\n                >\n                  <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">GreatPages</TooltipContent>\n          </Tooltip>\n          {isGpagesActive && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-500 rounded-t-xl\" />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA2CY,SAIE,KAJF;AAxCZ,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,SAAS,gBAAgB,sBAAsB;AAiBjD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,iBAAiB,cAAc;AACrC,QAAM,gBAAgB,cAAc;AAEpC,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,WACC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,YAClJ,SAAS;AAAA,YAET;AAAA,kCAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,cACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,QAE5G,GACF;AAAA,QACA,oBAAC,kBAAe,MAAK,UAAS,uBAAS;AAAA,SACzC;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACpB,2BACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,WAAW;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cAET;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,kBACd;AAAA,kBAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC9E;AAAA;AAAA,UACF,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,kGAAkG,iBAAiB,oCAAoC,EAAE;AAAA,cACpK,SAAS;AAAA,cAET,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC9E,GAEJ;AAAA,UACA,oBAAC,kBAAe,MAAK,UAAS,wBAAU;AAAA,WAC1C;AAAA,QACC,kBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { useAccountModals } from \"../../store/useAccountModals\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\n\nexport interface AppMobileNavBarProps {\n  /** Which app is currently active — controls which icon gets the indicator */\n  activeApp?: \"gapps\" | \"gpages\";\n  /** Called when the GreatApps logo is clicked */\n  onLogoClick?: () => void;\n  /** Called when the app icon (e.g. GreatPages) is clicked */\n  onAppIconClick?: () => void;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  activeApp,\n  onLogoClick,\n  onAppIconClick,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  const isGpagesActive = activeApp === \"gpages\";\n  const isGappsActive = activeApp === \"gapps\";\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <div\n              className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? \"cursor-pointer hover:bg-gray-100\" : \"\"}`}\n              onClick={onLogoClick}\n            >\n              <Image\n                src=\"/icons/great-icon.svg\"\n                alt=\"GreatApps\"\n                width={28}\n                height={28}\n              />\n              {isGappsActive && (\n                <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n              )}\n            </div>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">GreatApps</TooltipContent>\n        </Tooltip>\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              {isGpagesActive ? (\n                <div\n                  className=\"size-10 rounded-xl cursor-pointer p-[2px]\"\n                  style={{\n                    border: \"1.5px solid rgba(153,234,255,0.75)\",\n                    background: \"white\",\n                    boxShadow:\n                      \"0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)\",\n                  }}\n                  onClick={onAppIconClick}\n                >\n                  <div\n                    className=\"w-full h-full rounded-lg flex items-center justify-center\"\n                    style={{\n                      background:\n                        \"radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)\",\n                    }}\n                  >\n                    <Image\n                      src=\"/icons/icon-navbar.svg\"\n                      alt=\"GreatPages\"\n                      width={24}\n                      height={24}\n                    />\n                  </div>\n                </div>\n              ) : (\n                <div\n                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? \"cursor-pointer hover:opacity-80\" : \"\"}`}\n                  onClick={onAppIconClick}\n                >\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">GreatPages</TooltipContent>\n          </Tooltip>\n          {isGpagesActive && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl\" style={{ backgroundColor: \"#6ADCFF\" }} />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA2CY,SAIE,KAJF;AAxCZ,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAEjC,SAAS,SAAS,gBAAgB,sBAAsB;AAiBjD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,iBAAiB,cAAc;AACrC,QAAM,gBAAgB,cAAc;AAEpC,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,WACC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,YAClJ,SAAS;AAAA,YAET;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV;AAAA,cACC,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,QAE5G,GACF;AAAA,QACA,oBAAC,kBAAe,MAAK,UAAS,uBAAS;AAAA,SACzC;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACpB,2BACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,WACE;AAAA,cACJ;AAAA,cACA,SAAS;AAAA,cAET;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YACE;AAAA,kBACJ;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAI;AAAA,sBACJ,KAAI;AAAA,sBACJ,OAAO;AAAA,sBACP,QAAQ;AAAA;AAAA,kBACV;AAAA;AAAA,cACF;AAAA;AAAA,UACF,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,kGAAkG,iBAAiB,oCAAoC,EAAE;AAAA,cACpK,SAAS;AAAA,cAET;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV;AAAA;AAAA,UACF,GAEJ;AAAA,UACA,oBAAC,kBAAe,MAAK,UAAS,wBAAU;AAAA,WAC1C;AAAA,QACC,kBACC,oBAAC,SAAI,WAAU,8EAA6E,OAAO,EAAE,iBAAiB,UAAU,GAAG;AAAA,SAEvI;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/layouts/AppNavBar.mjs

@@ -1,11 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { NavBar } from "./NavBar";
 import { ProfilePopover } from "./ProfilePopover";
 import { NotificationsPopover } from "./NotificationsPopover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { useAccountModals } from "../../store/useAccountModals";
 function AppNavBar({
   onLogoClick,
@@ -21,46 +19,14 @@ function AppNavBar({
   const { openConfigurations } = useAccountModals();
   const handleLogoClick = onLogoClick ?? (() => router.push("/"));
   const handleAppIconClick = () => router.push(appIconHref);
-  const isGpagesActive = activeApp === "gpages";
   return /* @__PURE__ */ jsxs(
     NavBar,
     {
       onLogoClick: handleLogoClick,
-      logoIndicatorClassName: isGpagesActive ? "opacity-0" : void 0,
+      onAppIconClick: handleAppIconClick,
+      activeApp,
       showExpandButton,
       onExpandClick,
-      appIconSlot: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: handleAppIconClick, children: isGpagesActive ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "size-10 rounded-xl cursor-pointer p-[2px]",
-              style: {
-                border: "1.5px solid rgba(153,234,255,0.75)",
-                background: "white",
-                boxShadow: "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)"
-              },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-full h-full rounded-lg flex items-center justify-center",
-                  style: {
-                    background: "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)"
-                  },
-                  children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-pages-50 transition-colors duration-300", children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatPages" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-500 rounded-r-xl transition-opacity duration-300 ${isGpagesActive ? "opacity-100" : "opacity-0"}`
-          }
-        )
-      ] }),
       children: [
         /* @__PURE__ */ jsx(NotificationsPopover, { onViewAll: onNotificationsViewAll }),
         /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["'use client';\n\nimport Image from 'next/image';\nimport { useRouter } from 'next/navigation';\nimport { NavBar } from './NavBar';\nimport { ProfilePopover } from './ProfilePopover';\nimport { NotificationsPopover } from './NotificationsPopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppNavBarProps {\n  onLogoClick?: () => void;\n  /** Which app is currently active — controls which icon gets the indicator */\n  activeApp?: 'gapps' | 'gpages';\n  appIconHref?: string;\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n  onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  activeApp,\n  appIconHref = '/',\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onCreditsClick,\n  onNotificationsViewAll,\n}: AppNavBarProps) {\n  const router = useRouter();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogoClick = onLogoClick ?? (() => router.push('/'));\n  const handleAppIconClick = () => router.push(appIconHref);\n\n  const isGpagesActive = activeApp === 'gpages';\n\n  return (\n    <NavBar\n      onLogoClick={handleLogoClick}\n      logoIndicatorClassName={isGpagesActive ? 'opacity-0' : undefined}\n      showExpandButton={showExpandButton}\n      onExpandClick={onExpandClick}\n      appIconSlot={\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={handleAppIconClick}>\n              {isGpagesActive ? (\n                <div\n                  className=\"size-10 rounded-xl cursor-pointer p-[2px]\"\n                  style={{\n                    border: '1.5px solid rgba(153,234,255,0.75)',\n                    background: 'white',\n                    boxShadow: '0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)',\n                  }}\n                >\n                  <div\n                    className=\"w-full h-full rounded-lg flex items-center justify-center\"\n                    style={{\n                      background: 'radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)',\n                    }}\n                  >\n                    <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n                  </div>\n                </div>\n              ) : (\n                <div className=\"size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-pages-50 transition-colors duration-300\">\n                  <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">GreatPages</TooltipContent>\n          </Tooltip>\n          <div\n            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-500 rounded-r-xl transition-opacity duration-300 ${\n              isGpagesActive ? 'opacity-100' : 'opacity-0'\n            }`}\n          />\n        </div>\n      }\n    >\n      <NotificationsPopover onViewAll={onNotificationsViewAll} />\n      <ProfilePopover\n        onEditProfile={() => openConfigurations()}\n        onCreditsClick={onCreditsClick}\n        menuItems={menuItems}\n      />\n    </NavBar>\n  );\n}\n"],"mappings":";AAiDU,SAiBU,KAjBV;AA/CV,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,wBAAwB;AAe1B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,QAAM,iBAAiB,cAAc;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,wBAAwB,iBAAiB,cAAc;AAAA,MACvD;AAAA,MACA;AAAA,MACA,aACE,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MAAC,SAAS,oBAC9B,2BACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,WAAW;AAAA,cACb;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,kBACd;AAAA,kBAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cAC9E;AAAA;AAAA,UACF,IAEA,oBAAC,SAAI,WAAU,uHACb,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI,GAC9E,GAEJ;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,WACzC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,mHACT,iBAAiB,gBAAgB,WACnC;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAGF;AAAA,4BAAC,wBAAqB,WAAW,wBAAwB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACC,eAAe,MAAM,mBAAmB;AAAA,YACxC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport { NavBar } from \"./NavBar\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { NotificationsPopover } from \"./NotificationsPopover\";\nimport { useAccountModals } from \"../../store/useAccountModals\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppNavBarProps {\n  onLogoClick?: () => void;\n  /** Which app is currently active — controls which icon gets the indicator */\n  activeApp?: \"gapps\" | \"gpages\";\n  appIconHref?: string;\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n  onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  activeApp,\n  appIconHref = \"/\",\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onCreditsClick,\n  onNotificationsViewAll,\n}: AppNavBarProps) {\n  const router = useRouter();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogoClick = onLogoClick ?? (() => router.push(\"/\"));\n  const handleAppIconClick = () => router.push(appIconHref);\n\n  return (\n    <NavBar\n      onLogoClick={handleLogoClick}\n      onAppIconClick={handleAppIconClick}\n      activeApp={activeApp}\n      showExpandButton={showExpandButton}\n      onExpandClick={onExpandClick}\n    >\n      <NotificationsPopover onViewAll={onNotificationsViewAll} />\n      <ProfilePopover\n        onEditProfile={() => openConfigurations()}\n        onCreditsClick={onCreditsClick}\n        menuItems={menuItems}\n      />\n    </NavBar>\n  );\n}\n"],"mappings":";AAsCI,SAOE,KAPF;AApCJ,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAe1B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,wBAAqB,WAAW,wBAAwB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACC,eAAe,MAAM,mBAAmB;AAAA,YACxC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/layouts/NavBar.mjs

@@ -7,56 +7,124 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { cn } from "../../infra/utils/clsx";
 function NavBar({
   onLogoClick,
-  logoIndicatorClassName,
+  onAppIconClick,
+  activeApp,
   showExpandButton = false,
   onExpandClick,
-  appIconSlot,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center mt-[6.5px]", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { className: "cursor-pointer", asChild: true, onClick: onLogoClick, children: /* @__PURE__ */ jsx(
-            Image,
-            {
-              src: "/icons/great-icon.svg",
-              alt: "Great Icon",
-              width: 28,
-              height: 28
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatApps" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
-              logoIndicatorClassName
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center mt-[6.5px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  className: "cursor-pointer",
+                  asChild: true,
+                  onClick: onLogoClick,
+                  children: /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: "/icons/great-icon.svg",
+                      alt: "Great Icon",
+                      width: 28,
+                      height: 28
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatApps" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+                  activeApp === "gapps" ? "opacity-100" : "opacity-0"
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full mt-[7.5px]", children: [
+            /* @__PURE__ */ jsx(Separator, {}),
+            showExpandButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onExpandClick,
+                  className: "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(ChevronRight, { size: 16, className: "text-gray-500" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: onAppIconClick, children: activeApp === "gpages" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "size-10 rounded-xl cursor-pointer p-[2px]",
+                  style: {
+                    border: "1.5px solid rgba(153,234,255,0.75)",
+                    background: "white",
+                    boxShadow: "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-full h-full rounded-lg flex items-center justify-center",
+                      style: {
+                        background: "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          src: "/icons/icon-navbar.svg",
+                          alt: "GreatPages",
+                          width: 24,
+                          height: 24
+                        }
+                      )
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/icons/icon-navbar.svg",
+                  alt: "GreatPages",
+                  width: 28,
+                  height: 28
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatPages" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                  activeApp === "gpages" ? "opacity-100" : "opacity-0"
+                ),
+                style: { backgroundColor: "#6ADCFF" }
+              }
             )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative w-full mt-[7.5px]", children: [
-        /* @__PURE__ */ jsx(Separator, {}),
-        showExpandButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onExpandClick,
-              className: "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(ChevronRight, { size: 16, className: "text-gray-500" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: appIconSlot })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2", children })
-  ] });
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2", children })
+      ]
+    }
+  );
 }
 export {
   NavBar

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport Image from \"next/image\"\r\nimport { ChevronRight } from \"lucide-react\"\r\nimport { Separator } from \"../ui/data-display/Separator\"\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\n\r\ntype NavBarProps = {\r\n    onLogoClick: () => void;\r\n    logoIndicatorClassName?: string;\r\n    showExpandButton?: boolean;\r\n    onExpandClick?: () => void;\r\n    appIconSlot: React.ReactNode;\r\n    children?: React.ReactNode;\r\n    className?: string;\r\n}\r\n\r\nfunction NavBar({\r\n    onLogoClick,\r\n    logoIndicatorClassName,\r\n    showExpandButton = false,\r\n    onExpandClick,\r\n    appIconSlot,\r\n    children,\r\n    className,\r\n}: NavBarProps) {\r\n    return (\r\n        <div className={cn(\"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\", className)}>\r\n            <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\r\n                <div className=\"relative\">\r\n                    <Tooltip>\r\n                        <TooltipTrigger className=\"cursor-pointer\" asChild onClick={onLogoClick}>\r\n                            <Image\r\n                                src=\"/icons/great-icon.svg\"\r\n                                alt=\"Great Icon\"\r\n                                width={28}\r\n                                height={28}\r\n                            />\r\n                        </TooltipTrigger>\r\n                        <TooltipContent side=\"right\">GreatApps</TooltipContent>\r\n                    </Tooltip>\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300\",\r\n                            logoIndicatorClassName\r\n                        )}\r\n                    />\r\n                </div>\r\n                <div className=\"relative w-full mt-[7.5px]\">\r\n                    <Separator />\r\n                    {showExpandButton && (\r\n                        <Tooltip>\r\n                            <TooltipTrigger asChild>\r\n                                <button\r\n                                    onClick={onExpandClick}\r\n                                    className=\"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\"\r\n                                >\r\n                                    <ChevronRight size={16} className=\"text-gray-500\" />\r\n                                </button>\r\n                            </TooltipTrigger>\r\n                            <TooltipContent side=\"right\">Expandir menu</TooltipContent>\r\n                        </Tooltip>\r\n                    )}\r\n                </div>\r\n                <div className=\"flex flex-col gap-2\">\r\n                    {appIconSlot}\r\n                </div>\r\n            </div>\r\n            <div className=\"flex flex-col items-center gap-2\">\r\n                {children}\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport { NavBar };\r\nexport type { NavBarProps };\r\n"],"mappings":";AAgCoB,SAEQ,KAFR;AA7BpB,OAAO,WAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAYnB,SAAS,OAAO;AAAA,EACZ;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAAgB;AACZ,SACI,qBAAC,SAAI,WAAW,GAAG,gHAAgH,SAAS,GACxI;AAAA,yBAAC,SAAI,WAAU,+CACX;AAAA,2BAAC,SAAI,WAAU,YACX;AAAA,6BAAC,WACG;AAAA,8BAAC,kBAAe,WAAU,kBAAiB,SAAO,MAAC,SAAS,aACxD;AAAA,YAAC;AAAA;AAAA,cACG,KAAI;AAAA,cACJ,KAAI;AAAA,cACJ,OAAO;AAAA,cACP,QAAQ;AAAA;AAAA,UACZ,GACJ;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,uBAAS;AAAA,WAC1C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA;AAAA,YACJ;AAAA;AAAA,QACJ;AAAA,SACJ;AAAA,MACA,qBAAC,SAAI,WAAU,8BACX;AAAA,4BAAC,aAAU;AAAA,QACV,oBACG,qBAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,8BAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACtD,GACJ;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC9C;AAAA,SAER;AAAA,MACA,oBAAC,SAAI,WAAU,uBACV,uBACL;AAAA,OACJ;AAAA,IACA,oBAAC,SAAI,WAAU,oCACV,UACL;AAAA,KACJ;AAER;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\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  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              <Image\n                src=\"/icons/great-icon.svg\"\n                alt=\"Great Icon\"\n                width={28}\n                height={28}\n              />\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">GreatApps</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"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                  <ChevronRight 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=\"flex flex-col gap-2\">\n          <div className=\"relative\">\n            <Tooltip>\n              <TooltipTrigger asChild onClick={onAppIconClick}>\n                {activeApp === \"gpages\" ? (\n                  <div\n                    className=\"size-10 rounded-xl cursor-pointer p-[2px]\"\n                    style={{\n                      border: \"1.5px solid rgba(153,234,255,0.75)\",\n                      background: \"white\",\n                      boxShadow:\n                        \"0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)\",\n                    }}\n                  >\n                    <div\n                      className=\"w-full h-full rounded-lg flex items-center justify-center\"\n                      style={{\n                        background:\n                          \"radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)\",\n                      }}\n                    >\n                      <Image\n                        src=\"/icons/icon-navbar.svg\"\n                        alt=\"GreatPages\"\n                        width={24}\n                        height={24}\n                      />\n                    </div>\n                  </div>\n                ) : (\n                  <div className=\"size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300\">\n                    <Image\n                      src=\"/icons/icon-navbar.svg\"\n                      alt=\"GreatPages\"\n                      width={28}\n                      height={28}\n                    />\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">GreatPages</TooltipContent>\n            </Tooltip>\n            <div\n              className={cn(\n                \"absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n                activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n              )}\n              style={{ backgroundColor: \"#6ADCFF\" }}\n            />\n          </div>\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":";AAsCU,SAMI,KANJ;AAnCV,OAAO,WAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAYnB,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,+CAEb;AAAA,+BAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAO;AAAA,kBACP,SAAS;AAAA,kBAET;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAI;AAAA,sBACJ,KAAI;AAAA,sBACJ,OAAO;AAAA,sBACP,QAAQ;AAAA;AAAA,kBACV;AAAA;AAAA,cACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,uBAAS;AAAA,eACxC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,UAAU,gBAAgB;AAAA,gBAC1C;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,gCAAC,aAAU;AAAA,YACV,oBACC,qBAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,8BAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACpD,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,eAC5C;AAAA,aAEJ;AAAA,UAGA,oBAAC,SAAI,WAAU,uBACb,+BAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MAAC,SAAS,gBAC9B,wBAAc,WACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,WACE;AAAA,kBACJ;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,YACE;AAAA,sBACJ;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,KAAI;AAAA,0BACJ,KAAI;AAAA,0BACJ,OAAO;AAAA,0BACP,QAAQ;AAAA;AAAA,sBACV;AAAA;AAAA,kBACF;AAAA;AAAA,cACF,IAEA,oBAAC,SAAI,WAAU,uHACb;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV,GACF,GAEJ;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,eACzC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,WAAW,gBAAgB;AAAA,gBAC3C;AAAA,gBACA,OAAO,EAAE,iBAAiB,UAAU;AAAA;AAAA,YACtC;AAAA,aACF,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,oCAAoC,UAAS;AAAA;AAAA;AAAA,EAC9D;AAEJ;","names":[]}

package/package.json

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

package/src/components/layouts/AppMobileNavBar.tsx

@@ -89,7 +89,7 @@ export function AppMobileNavBar({
                 </div>
               ) : (
                 <div
-                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-pages-50 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`}
+                  className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`}
                   onClick={onAppIconClick}
                 >
                   <Image
@@ -104,7 +104,7 @@ export function AppMobileNavBar({
             <TooltipContent side="bottom">GreatPages</TooltipContent>
           </Tooltip>
           {isGpagesActive && (
-            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-500 rounded-t-xl" />
+            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl" style={{ backgroundColor: "#6ADCFF" }} />
           )}
         </div>
         {extraLeftSlot}

package/src/components/layouts/AppNavBar.tsx

@@ -1,18 +1,16 @@
-'use client';
+"use client";
 
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { NavBar } from './NavBar';
-import { ProfilePopover } from './ProfilePopover';
-import { NotificationsPopover } from './NotificationsPopover';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
-import { useAccountModals } from '../../store/useAccountModals';
-import type { ProfileMenuItem } from './ProfilePopover';
+import { useRouter } from "next/navigation";
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import { useAccountModals } from "../../store/useAccountModals";
+import type { ProfileMenuItem } from "./ProfilePopover";
 
 export interface AppNavBarProps {
   onLogoClick?: () => void;
   /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: 'gapps' | 'gpages';
+  activeApp?: "gapps" | "gpages";
   appIconHref?: string;
   showExpandButton?: boolean;
   onExpandClick?: () => void;
@@ -24,7 +22,7 @@ export interface AppNavBarProps {
 export function AppNavBar({
   onLogoClick,
   activeApp,
-  appIconHref = '/',
+  appIconHref = "/",
   showExpandButton = false,
   onExpandClick,
   menuItems = [],
@@ -34,54 +32,16 @@ export function AppNavBar({
   const router = useRouter();
   const { openConfigurations } = useAccountModals();
 
-  const handleLogoClick = onLogoClick ?? (() => router.push('/'));
+  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
   const handleAppIconClick = () => router.push(appIconHref);
 
-  const isGpagesActive = activeApp === 'gpages';
-
   return (
     <NavBar
       onLogoClick={handleLogoClick}
-      logoIndicatorClassName={isGpagesActive ? 'opacity-0' : undefined}
+      onAppIconClick={handleAppIconClick}
+      activeApp={activeApp}
       showExpandButton={showExpandButton}
       onExpandClick={onExpandClick}
-      appIconSlot={
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild onClick={handleAppIconClick}>
-              {isGpagesActive ? (
-                <div
-                  className="size-10 rounded-xl cursor-pointer p-[2px]"
-                  style={{
-                    border: '1.5px solid rgba(153,234,255,0.75)',
-                    background: 'white',
-                    boxShadow: '0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)',
-                  }}
-                >
-                  <div
-                    className="w-full h-full rounded-lg flex items-center justify-center"
-                    style={{
-                      background: 'radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)',
-                    }}
-                  >
-                    <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
-                  </div>
-                </div>
-              ) : (
-                <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-pages-50 transition-colors duration-300">
-                  <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
-                </div>
-              )}
-            </TooltipTrigger>
-            <TooltipContent side="right">GreatPages</TooltipContent>
-          </Tooltip>
-          <div
-            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-500 rounded-r-xl transition-opacity duration-300 ${
-              isGpagesActive ? 'opacity-100' : 'opacity-0'
-            }`}
-          />
-        </div>
-      }
     >
       <NotificationsPopover onViewAll={onNotificationsViewAll} />
       <ProfilePopover

package/src/components/layouts/NavBar.tsx

@@ -1,79 +1,139 @@
-"use client"
-
-import * as React from "react"
-import Image from "next/image"
-import { ChevronRight } from "lucide-react"
-import { Separator } from "../ui/data-display/Separator"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
-import { cn } from "../../infra/utils/clsx"
-
-type NavBarProps = {
-    onLogoClick: () => void;
-    logoIndicatorClassName?: string;
-    showExpandButton?: boolean;
-    onExpandClick?: () => void;
-    appIconSlot: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string;
-}
-
-function NavBar({
-    onLogoClick,
-    logoIndicatorClassName,
-    showExpandButton = false,
-    onExpandClick,
-    appIconSlot,
-    children,
-    className,
-}: NavBarProps) {
-    return (
-        <div className={cn("hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white", className)}>
-            <div className="flex flex-col gap-4 items-center mt-[6.5px]">
-                <div className="relative">
-                    <Tooltip>
-                        <TooltipTrigger className="cursor-pointer" asChild onClick={onLogoClick}>
-                            <Image
-                                src="/icons/great-icon.svg"
-                                alt="Great Icon"
-                                width={28}
-                                height={28}
-                            />
-                        </TooltipTrigger>
-                        <TooltipContent side="right">GreatApps</TooltipContent>
-                    </Tooltip>
-                    <div
-                        className={cn(
-                            "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
-                            logoIndicatorClassName
-                        )}
-                    />
-                </div>
-                <div className="relative w-full mt-[7.5px]">
-                    <Separator />
-                    {showExpandButton && (
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <button
-                                    onClick={onExpandClick}
-                                    className="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"
-                                >
-                                    <ChevronRight size={16} className="text-gray-500" />
-                                </button>
-                            </TooltipTrigger>
-                            <TooltipContent side="right">Expandir menu</TooltipContent>
-                        </Tooltip>
-                    )}
-                </div>
-                <div className="flex flex-col gap-2">
-                    {appIconSlot}
-                </div>
-            </div>
-            <div className="flex flex-col items-center gap-2">
-                {children}
-            </div>
-        </div>
-    )
-}
-
-export { NavBar };
-export type { NavBarProps };
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { ChevronRight } from "lucide-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+
+type NavBarProps = {
+  onLogoClick: () => void;
+  onAppIconClick?: () => void;
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function NavBar({
+  onLogoClick,
+  onAppIconClick,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className,
+}: NavBarProps) {
+  return (
+    <div
+      className={cn(
+        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
+        {/* GreatApps logo */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger
+              className="cursor-pointer"
+              asChild
+              onClick={onLogoClick}
+            >
+              <Image
+                src="/icons/great-icon.svg"
+                alt="Great Icon"
+                width={28}
+                height={28}
+              />
+            </TooltipTrigger>
+            <TooltipContent side="right">GreatApps</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+              activeApp === "gapps" ? "opacity-100" : "opacity-0",
+            )}
+          />
+        </div>
+
+        <div className="relative w-full mt-[7.5px]">
+          <Separator />
+          {showExpandButton && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onExpandClick}
+                  className="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"
+                >
+                  <ChevronRight size={16} className="text-gray-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">Expandir menu</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        {/* GreatPages icon */}
+        <div className="flex flex-col gap-2">
+          <div className="relative">
+            <Tooltip>
+              <TooltipTrigger asChild onClick={onAppIconClick}>
+                {activeApp === "gpages" ? (
+                  <div
+                    className="size-10 rounded-xl cursor-pointer p-[2px]"
+                    style={{
+                      border: "1.5px solid rgba(153,234,255,0.75)",
+                      background: "white",
+                      boxShadow:
+                        "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)",
+                    }}
+                  >
+                    <div
+                      className="w-full h-full rounded-lg flex items-center justify-center"
+                      style={{
+                        background:
+                          "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)",
+                      }}
+                    >
+                      <Image
+                        src="/icons/icon-navbar.svg"
+                        alt="GreatPages"
+                        width={24}
+                        height={24}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300">
+                    <Image
+                      src="/icons/icon-navbar.svg"
+                      alt="GreatPages"
+                      width={28}
+                      height={28}
+                    />
+                  </div>
+                )}
+              </TooltipTrigger>
+              <TooltipContent side="right">GreatPages</TooltipContent>
+            </Tooltip>
+            <div
+              className={cn(
+                "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                activeApp === "gpages" ? "opacity-100" : "opacity-0",
+              )}
+              style={{ backgroundColor: "#6ADCFF" }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+export { NavBar };
+export type { NavBarProps };