@greatapps/common 1.1.303 → 1.1.305

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 +46 -20
  2. package/dist/components/layouts/NavBar.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/layouts/NavBar.tsx +54 -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,6 +45,18 @@ function NavBar({
41
45
  width: 28,
42
46
  height: 28
43
47
  }
48
+ ) : /* @__PURE__ */ jsx(
49
+ "div",
50
+ {
51
+ className: "size-7 rounded-md flex items-center justify-center",
52
+ style: { backgroundColor: primaryColor },
53
+ children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
54
+ /* @__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" }),
55
+ /* @__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" }),
56
+ /* @__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" }),
57
+ /* @__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" })
58
+ ] })
59
+ }
44
60
  )
45
61
  }
46
62
  ),
@@ -50,9 +66,11 @@ function NavBar({
50
66
  "div",
51
67
  {
52
68
  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",
69
+ "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
70
+ isDefaultWl ? "bg-gray-950" : "",
54
71
  activeApp === "gapps" ? "opacity-100" : "opacity-0"
55
- )
72
+ ),
73
+ style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
56
74
  }
57
75
  )
58
76
  ] }),
@@ -83,32 +101,40 @@ function NavBar({
83
101
  ] }),
84
102
  /* @__PURE__ */ jsxs("div", { className: "relative", children: [
85
103
  /* @__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,
88
- {
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,
104
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: onAppIconClick, children: /* @__PURE__ */ jsx(
105
+ "div",
96
106
  {
97
- src: "/icons/icon-navbar.svg",
98
- alt: "GreatPages",
99
- width: 24,
100
- height: 24
107
+ className: cn(
108
+ "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
109
+ activeApp === "gpages" ? isDefaultWl ? "bg-cyan-100 border-white ring-cyan-300" : "border-white ring-transparent" : isDefaultWl ? "hover:bg-gray-100 border-transparent ring-transparent" : "border-transparent ring-transparent"
110
+ ),
111
+ style: !isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : void 0 } : void 0,
112
+ children: isDefaultWl ? /* @__PURE__ */ jsx(
113
+ Image,
114
+ {
115
+ src: "/icons/icon-navbar.svg",
116
+ alt: "GreatPages",
117
+ width: 24,
118
+ height: 24
119
+ }
120
+ ) : /* @__PURE__ */ jsxs("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", children: [
121
+ /* @__PURE__ */ jsx("path", { d: "M4 8h16" }),
122
+ /* @__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" }),
123
+ /* @__PURE__ */ jsx("path", { d: "M8 4v4" })
124
+ ] })
101
125
  }
102
- ) }) }),
126
+ ) }),
103
127
  /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatPages" })
104
128
  ] }),
105
129
  /* @__PURE__ */ jsx(
106
130
  "div",
107
131
  {
108
132
  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",
133
+ "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
134
+ isDefaultWl ? "bg-cyan-300" : "",
110
135
  activeApp === "gpages" ? "opacity-100" : "opacity-0"
111
- )
136
+ ),
137
+ style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
112
138
  }
113
139
  )
114
140
  ] })
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 <div\n className=\"size-7 rounded-md flex items-center justify-center\"\n style={{ backgroundColor: primaryColor }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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\">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 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 } : 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\">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":";AAqDgB,cAWE,YAXF;AAlDhB,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,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,IAC3D,uBAAuB;AACzB,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,cAAc,CAAC,cAAc,WAAW,OAAO;AACrD,QAAM,eAAe,YAAY,SAAS;AAE1C,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,kBAER,wBACC;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAI;AAAA,sBACJ,KAAI;AAAA,sBACJ,OAAO;AAAA,sBACP,QAAQ;AAAA;AAAA,kBACV,IAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,iBAAiB,aAAa;AAAA,sBAEvC,+BAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,SAAQ,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACjK;AAAA,4CAAC,UAAK,GAAE,gFAA+E;AAAA,wBACvF,oBAAC,UAAK,GAAE,iFAAgF;AAAA,wBACxF,oBAAC,UAAK,GAAE,iFAAgF;AAAA,wBACxF,oBAAC,UAAK,GAAE,kFAAiF;AAAA,yBAC3F;AAAA;AAAA,kBACF;AAAA;AAAA,cAEJ;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,mBAAK;AAAA,eACpC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,gBAAgB;AAAA,kBAC9B,cAAc,UAAU,gBAAgB;AAAA,gBAC1C;AAAA,gBACA,OAAO,CAAC,cAAc,EAAE,iBAAiB,aAAa,IAAI;AAAA;AAAA,YAC5D;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,gBAC/B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,cAAc,WACV,cACE,2CACA,kCACF,cACE,0DACA;AAAA,kBACR;AAAA,kBACA,OAAO,CAAC,cAAc,EAAE,iBAAiB,cAAc,WAAW,cAAc,WAAW,aAAa,YAAY,OAAO,OAAU,IAAI;AAAA,kBAExI,wBACC;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAI;AAAA,sBACJ,KAAI;AAAA,sBACJ,OAAO;AAAA,sBACP,QAAQ;AAAA;AAAA,kBACV,IAEA,qBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,SAAQ,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACjK;AAAA,wCAAC,UAAK,GAAE,WAAU;AAAA,oBAClB,oBAAC,UAAK,GAAE,oFAAmF;AAAA,oBAC3F,oBAAC,UAAK,GAAE,UAAS;AAAA,qBACnB;AAAA;AAAA,cAEJ,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,eACzC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,gBAAgB;AAAA,kBAC9B,cAAc,WAAW,gBAAgB;AAAA,gBAC3C;AAAA,gBACA,OAAO,CAAC,cAAc,EAAE,iBAAiB,aAAa,IAAI;AAAA;AAAA,YAC5D;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,oCAAoC,UAAS;AAAA;AAAA;AAAA,EAC9D;AAEJ;","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.305",
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,36 @@ 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
+ <div
62
+ className="size-7 rounded-md flex items-center justify-center"
63
+ style={{ backgroundColor: primaryColor }}
64
+ >
65
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
66
+ <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" />
67
+ <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" />
68
+ <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" />
69
+ <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" />
70
+ </svg>
71
+ </div>
72
+ )}
54
73
  </TooltipTrigger>
55
74
  <TooltipContent side="right">Great</TooltipContent>
56
75
  </Tooltip>
57
76
  <div
58
77
  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",
78
+ "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
79
+ isDefaultWl ? "bg-gray-950" : "",
60
80
  activeApp === "gapps" ? "opacity-100" : "opacity-0",
61
81
  )}
82
+ style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
62
83
  />
63
84
  </div>
64
85
 
@@ -98,33 +119,44 @@ function NavBar({
98
119
  <div className="relative">
99
120
  <Tooltip>
100
121
  <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">
122
+ <div
123
+ className={cn(
124
+ "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
125
+ activeApp === "gpages"
126
+ ? isDefaultWl
127
+ ? "bg-cyan-100 border-white ring-cyan-300"
128
+ : "border-white ring-transparent"
129
+ : isDefaultWl
130
+ ? "hover:bg-gray-100 border-transparent ring-transparent"
131
+ : "border-transparent ring-transparent",
132
+ )}
133
+ style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : undefined } : undefined}
134
+ >
135
+ {isDefaultWl ? (
112
136
  <Image
113
137
  src="/icons/icon-navbar.svg"
114
138
  alt="GreatPages"
115
139
  width={24}
116
140
  height={24}
117
141
  />
118
- </div>
119
- )}
142
+ ) : (
143
+ <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">
144
+ <path d="M4 8h16" />
145
+ <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" />
146
+ <path d="M8 4v4" />
147
+ </svg>
148
+ )}
149
+ </div>
120
150
  </TooltipTrigger>
121
151
  <TooltipContent side="right">GreatPages</TooltipContent>
122
152
  </Tooltip>
123
153
  <div
124
154
  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",
155
+ "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
156
+ isDefaultWl ? "bg-cyan-300" : "",
126
157
  activeApp === "gpages" ? "opacity-100" : "opacity-0",
127
158
  )}
159
+ style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
128
160
  />
129
161
  </div>
130
162
  </div>