@greatapps/common 1.1.303 → 1.1.304

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/layouts/NavBar.mjs +40 -21
  2. package/dist/components/layouts/NavBar.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/layouts/NavBar.tsx +47 -22
package/dist/components/layouts/NavBar.mjs CHANGED
@@ -5,6 +5,7 @@ import { IconChevronRight } from "@tabler/icons-react";
5
5
  import { Separator } from "../ui/data-display/Separator";
6
6
  import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
7
7
  import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore";
8
+ import { useWhitelabel } from "../../providers/whitelabel.provider";
8
9
  import { cn } from "../../infra/utils/clsx";
9
10
  function NavBar({
10
11
  onLogoClick,
@@ -16,6 +17,9 @@ function NavBar({
16
17
  className
17
18
  }) {
18
19
  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } = useDesktopSidebarStore();
20
+ const { whitelabel } = useWhitelabel();
21
+ const isDefaultWl = !whitelabel || whitelabel.id === 1;
22
+ const primaryColor = whitelabel?.general?.primary_color;
19
23
  return /* @__PURE__ */ jsxs(
20
24
  "div",
21
25
  {
@@ -33,7 +37,7 @@ function NavBar({
33
37
  className: "cursor-pointer",
34
38
  asChild: true,
35
39
  onClick: onLogoClick,
36
- children: /* @__PURE__ */ jsx(
40
+ children: isDefaultWl ? /* @__PURE__ */ jsx(
37
41
  Image,
38
42
  {
39
43
  src: "/icons/great-icon.svg",
@@ -41,7 +45,12 @@ function NavBar({
41
45
  width: 28,
42
46
  height: 28
43
47
  }
44
- )
48
+ ) : /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor || "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
49
+ /* @__PURE__ */ jsx("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" }),
50
+ /* @__PURE__ */ jsx("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" }),
51
+ /* @__PURE__ */ jsx("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" }),
52
+ /* @__PURE__ */ jsx("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" })
53
+ ] })
45
54
  }
46
55
  ),
47
56
  /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Great" })
@@ -50,9 +59,11 @@ function NavBar({
50
59
  "div",
51
60
  {
52
61
  className: cn(
53
- "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
62
+ "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
63
+ isDefaultWl ? "bg-gray-950" : "",
54
64
  activeApp === "gapps" ? "opacity-100" : "opacity-0"
55
- )
65
+ ),
66
+ style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
56
67
  }
57
68
  )
58
69
  ] }),
@@ -83,32 +94,40 @@ function NavBar({
83
94
  ] }),
84
95
  /* @__PURE__ */ jsxs("div", { className: "relative", children: [
85
96
  /* @__PURE__ */ jsxs(Tooltip, { children: [
86
- /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: onAppIconClick, children: activeApp === "gpages" ? /* @__PURE__ */ jsx("div", { className: "size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300", children: /* @__PURE__ */ jsx(
87
- Image,
97
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: onAppIconClick, children: /* @__PURE__ */ jsx(
98
+ "div",
88
99
  {
89
- src: "/icons/icon-navbar.svg",
90
- alt: "GreatPages",
91
- width: 24,
92
- height: 24
93
- }
94
- ) }) : /* @__PURE__ */ jsx("div", { className: "size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300 border-2 border-transparent ring-2 ring-transparent", children: /* @__PURE__ */ jsx(
95
- Image,
96
- {
97
- src: "/icons/icon-navbar.svg",
98
- alt: "GreatPages",
99
- width: 24,
100
- height: 24
100
+ className: cn(
101
+ "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
102
+ activeApp === "gpages" ? isDefaultWl ? "bg-cyan-100 border-white ring-cyan-300" : "border-white" : "hover:bg-gray-100 border-transparent ring-transparent"
103
+ ),
104
+ style: activeApp === "gpages" && !isDefaultWl ? { backgroundColor: `${primaryColor}20`, boxShadow: `0 0 0 2px ${primaryColor}` } : void 0,
105
+ children: isDefaultWl ? /* @__PURE__ */ jsx(
106
+ Image,
107
+ {
108
+ src: "/icons/icon-navbar.svg",
109
+ alt: "GreatPages",
110
+ width: 24,
111
+ height: 24
112
+ }
113
+ ) : /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor || "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
114
+ /* @__PURE__ */ jsx("path", { d: "M4 8h16" }),
115
+ /* @__PURE__ */ jsx("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" }),
116
+ /* @__PURE__ */ jsx("path", { d: "M8 4v4" })
117
+ ] })
101
118
  }
102
- ) }) }),
119
+ ) }),
103
120
  /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatPages" })
104
121
  ] }),
105
122
  /* @__PURE__ */ jsx(
106
123
  "div",
107
124
  {
108
125
  className: cn(
109
- "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-cyan-300 rounded-r-xl transition-opacity duration-300",
126
+ "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
127
+ isDefaultWl ? "bg-cyan-300" : "",
110
128
  activeApp === "gpages" ? "opacity-100" : "opacity-0"
111
- )
129
+ ),
130
+ style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
112
131
  }
113
132
  )
114
133
  ] })
package/dist/components/layouts/NavBar.mjs.map CHANGED
@@ -1 +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 { 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 } = useDesktopSidebarStore();\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 <Image\n src=\"/icons/great-icon.svg\"\n alt=\"Great Icon\"\n width={28}\n height={28}\n />\n </TooltipTrigger>\n <TooltipContent side=\"right\">Great</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 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 {/* 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 {activeApp === \"gpages\" ? (\n <div className=\"size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300\">\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\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 border-2 border-transparent ring-2 ring-transparent\">\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=\"right\">GreatPages</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 bg-cyan-300 rounded-r-xl transition-opacity duration-300\",\n activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n )}\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":";AAyCU,SAMI,KANJ;AAtCV,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,8BAA8B;AACvC,SAAS,UAAU;AAYnB,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,EAAE,YAAY,mBAAmB,QAAQ,cAAc,IAAI,uBAAuB;AAExF,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,mBAAK;AAAA,eACpC;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,YAEV,oBACC,qBAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,8BAAC,oBAAiB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACxD,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,eAC5C;AAAA,YAGD,CAAC,qBACA,qBAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,8BAAC,oBAAiB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACxD,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,eAC5C;AAAA,aAEJ;AAAA,UAGA,qBAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MAAC,SAAS,gBAC9B,wBAAc,WACb,oBAAC,SAAI,WAAU,6HACb;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV,GACF,IAEA,oBAAC,SAAI,WAAU,2KACb;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;AAAA,YACF;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,oCAAoC,UAAS;AAAA;AAAA;AAAA,EAC9D;AAEJ;","names":[]}
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\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 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={primaryColor || 'currentColor'} 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 )}\n </TooltipTrigger>\n <TooltipContent side=\"right\">Great</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\"\n : \"hover:bg-gray-100 border-transparent ring-transparent\",\n )}\n style={activeApp === \"gpages\" && !isDefaultWl ? { backgroundColor: `${primaryColor}20`, boxShadow: `0 0 0 2px ${primaryColor}` } : 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={primaryColor || 'currentColor'} 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\">GreatPages</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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greatapps/common",
3
- "version": "1.1.303",
3
+ "version": "1.1.304",
4
4
  "description": "Shared library for GreatApps frontend applications",
5
5
  "main": "./dist/index.mjs",
6
6
  "types": "./src/index.ts",
package/src/components/layouts/NavBar.tsx CHANGED
@@ -6,6 +6,7 @@ import { IconChevronRight } from "@tabler/icons-react";
6
6
  import { Separator } from "../ui/data-display/Separator";
7
7
  import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
8
8
  import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore";
9
+ import { useWhitelabel } from "../../providers/whitelabel.provider";
9
10
  import { cn } from "../../infra/utils/clsx";
10
11
 
11
12
  type NavBarProps = {
@@ -27,7 +28,11 @@ function NavBar({
27
28
  children,
28
29
  className,
29
30
  }: NavBarProps) {
30
- const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } = useDesktopSidebarStore();
31
+ const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
32
+ useDesktopSidebarStore();
33
+ const { whitelabel } = useWhitelabel();
34
+ const isDefaultWl = !whitelabel || whitelabel.id === 1;
35
+ const primaryColor = whitelabel?.general?.primary_color;
31
36
 
32
37
  return (
33
38
  <div
@@ -45,20 +50,31 @@ function NavBar({
45
50
  asChild
46
51
  onClick={onLogoClick}
47
52
  >
48
- <Image
49
- src="/icons/great-icon.svg"
50
- alt="Great Icon"
51
- width={28}
52
- height={28}
53
- />
53
+ {isDefaultWl ? (
54
+ <Image
55
+ src="/icons/great-icon.svg"
56
+ alt="Great Icon"
57
+ width={28}
58
+ height={28}
59
+ />
60
+ ) : (
61
+ <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={primaryColor || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
62
+ <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" />
63
+ <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" />
64
+ <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" />
65
+ <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" />
66
+ </svg>
67
+ )}
54
68
  </TooltipTrigger>
55
69
  <TooltipContent side="right">Great</TooltipContent>
56
70
  </Tooltip>
57
71
  <div
58
72
  className={cn(
59
- "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
73
+ "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
74
+ isDefaultWl ? "bg-gray-950" : "",
60
75
  activeApp === "gapps" ? "opacity-100" : "opacity-0",
61
76
  )}
77
+ style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
62
78
  />
63
79
  </div>
64
80
 
@@ -98,33 +114,42 @@ function NavBar({
98
114
  <div className="relative">
99
115
  <Tooltip>
100
116
  <TooltipTrigger asChild onClick={onAppIconClick}>
101
- {activeApp === "gpages" ? (
102
- <div className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300">
103
- <Image
104
- src="/icons/icon-navbar.svg"
105
- alt="GreatPages"
106
- width={24}
107
- height={24}
108
- />
109
- </div>
110
- ) : (
111
- <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300 border-2 border-transparent ring-2 ring-transparent">
117
+ <div
118
+ className={cn(
119
+ "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
120
+ activeApp === "gpages"
121
+ ? isDefaultWl
122
+ ? "bg-cyan-100 border-white ring-cyan-300"
123
+ : "border-white"
124
+ : "hover:bg-gray-100 border-transparent ring-transparent",
125
+ )}
126
+ style={activeApp === "gpages" && !isDefaultWl ? { backgroundColor: `${primaryColor}20`, boxShadow: `0 0 0 2px ${primaryColor}` } : undefined}
127
+ >
128
+ {isDefaultWl ? (
112
129
  <Image
113
130
  src="/icons/icon-navbar.svg"
114
131
  alt="GreatPages"
115
132
  width={24}
116
133
  height={24}
117
134
  />
118
- </div>
119
- )}
135
+ ) : (
136
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={primaryColor || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
137
+ <path d="M4 8h16" />
138
+ <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" />
139
+ <path d="M8 4v4" />
140
+ </svg>
141
+ )}
142
+ </div>
120
143
  </TooltipTrigger>
121
144
  <TooltipContent side="right">GreatPages</TooltipContent>
122
145
  </Tooltip>
123
146
  <div
124
147
  className={cn(
125
- "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 bg-cyan-300 rounded-r-xl transition-opacity duration-300",
148
+ "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
149
+ isDefaultWl ? "bg-cyan-300" : "",
126
150
  activeApp === "gpages" ? "opacity-100" : "opacity-0",
127
151
  )}
152
+ style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
128
153
  />
129
154
  </div>
130
155
  </div>