@greatapps/common 1.1.699 → 1.1.700

package/src/components/layouts/NavBar.tsx

@@ -1,228 +1,228 @@
-"use client";
-
-import * as React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
-import { IconChevronRight } from "@tabler/icons-react";
-import { Separator } from "../ui/data-display/Separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import {
-  useDesktopSidebarStore,
-  useDesktopSidebarHydration,
-} from "../../store/useDesktopSidebarStore";
-import {
-  useWhitelabel,
-  useIsDefaultWhitelabel,
-} from "../../providers/whitelabel.provider";
-import { cn } from "../../infra/utils/clsx";
-
-type NavBarProps = {
-  logoHref: string;
-  appIconHref: string;
-  activeApp?: "gapps" | "gpages";
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-function NavBar({
-  logoHref,
-  appIconHref,
-  activeApp,
-  showExpandButton = false,
-  onExpandClick,
-  children,
-  className,
-}: NavBarProps) {
-  const translate = useTranslations();
-  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
-    useDesktopSidebarStore();
-  useDesktopSidebarHydration();
-  const { whitelabel } = useWhitelabel();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const primaryColor = whitelabel?.general?.primary_color;
-  const wlName = whitelabel?.name || "Great";
-
-  const wlIcon = whitelabel?.secondary_logo ? (
-    <Image
-      className="size-7 object-contain"
-      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}
-      alt={`${wlName} Logo`}
-      width={28}
-      height={28}
-    />
-  ) : (
-    <div
-      className={cn(
-        "size-10 rounded-lg flex items-center justify-center transition-opacity duration-300",
-        activeApp !== "gapps" && "opacity-20",
-      )}
-      style={{ backgroundColor: primaryColor }}
-    >
-      <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"
-      >
-        <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" />
-        <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" />
-        <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" />
-        <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" />
-      </svg>
-    </div>
-  );
-
-  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>
-              <Link href={logoHref}>
-                {isDefaultWl ? (
-                  <Image
-                    src="/icons/great-icon.svg"
-                    alt="Great Icon"
-                    width={28}
-                    height={28}
-                  />
-                ) : (
-                  wlIcon
-                )}
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">{wlName}</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-gray-950" : "",
-              activeApp === "gapps" ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </div>
-
-        <div className="relative w-full mt-[7.5px]">
-          <Separator />
-          {/* Md expand button */}
-          {showExpandButton && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onExpandClick}
-                  className="hidden md:flex lg:hidden 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"
-                >
-                  <IconChevronRight size={16} className="text-gray-500" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
-            </Tooltip>
-          )}
-          {/* Desktop expand button */}
-          {!isDesktopExpanded && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={toggleDesktop}
-                  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"
-                >
-                  <IconChevronRight size={16} className="text-gray-500" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* GreatPages icon */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                href={appIconHref}
-                className={cn(
-                  "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                  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",
-                )}
-                style={
-                  !isDefaultWl
-                    ? {
-                        backgroundColor: primaryColor,
-                        boxShadow:
-                          activeApp === "gpages"
-                            ? `0 0 0 2px ${primaryColor}40`
-                            : undefined,
-                        opacity: activeApp !== "gpages" ? 0.2 : undefined,
-                      }
-                    : undefined
-                }
-              >
-                {isDefaultWl ? (
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                ) : (
-                  <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"
-                  >
-                    <path d="M4 8h16" />
-                    <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" />
-                    <path d="M8 4v4" />
-                  </svg>
-                )}
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}
-            </TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-cyan-300" : "",
-              activeApp === "gpages" ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </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 Link from "next/link";
+import { useTranslations } from "next-intl";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import {
+  useDesktopSidebarStore,
+  useDesktopSidebarHydration,
+} from "../../store/useDesktopSidebarStore";
+import {
+  useWhitelabel,
+  useIsDefaultWhitelabel,
+} from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
+
+type NavBarProps = {
+  logoHref: string;
+  appIconHref: string;
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function NavBar({
+  logoHref,
+  appIconHref,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className,
+}: NavBarProps) {
+  const translate = useTranslations();
+  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
+    useDesktopSidebarStore();
+  useDesktopSidebarHydration();
+  const { whitelabel } = useWhitelabel();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const primaryColor = whitelabel?.general?.primary_color;
+  const wlName = whitelabel?.name || "Great";
+
+  const wlIcon = whitelabel?.secondary_logo ? (
+    <Image
+      className="size-7 object-contain"
+      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}
+      alt={`${wlName} Logo`}
+      width={28}
+      height={28}
+    />
+  ) : (
+    <div
+      className={cn(
+        "size-10 rounded-lg flex items-center justify-center transition-opacity duration-300",
+        activeApp !== "gapps" && "opacity-20",
+      )}
+      style={{ backgroundColor: primaryColor }}
+    >
+      <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"
+      >
+        <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" />
+        <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" />
+        <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" />
+        <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" />
+      </svg>
+    </div>
+  );
+
+  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>
+              <Link href={logoHref}>
+                {isDefaultWl ? (
+                  <Image
+                    src="/icons/great-icon.svg"
+                    alt="Great Icon"
+                    width={28}
+                    height={28}
+                  />
+                ) : (
+                  wlIcon
+                )}
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">{wlName}</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-gray-950" : "",
+              activeApp === "gapps" ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
+        </div>
+
+        <div className="relative w-full mt-[7.5px]">
+          <Separator />
+          {/* Md expand button */}
+          {showExpandButton && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onExpandClick}
+                  className="hidden md:flex lg:hidden 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"
+                >
+                  <IconChevronRight size={16} className="text-gray-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
+            </Tooltip>
+          )}
+          {/* Desktop expand button */}
+          {!isDesktopExpanded && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={toggleDesktop}
+                  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"
+                >
+                  <IconChevronRight size={16} className="text-gray-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{translate('common.layout.navbar.expandMenu')}</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        {/* GreatPages icon */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link
+                href={appIconHref}
+                className={cn(
+                  "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                  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",
+                )}
+                style={
+                  !isDefaultWl
+                    ? {
+                        backgroundColor: primaryColor,
+                        boxShadow:
+                          activeApp === "gpages"
+                            ? `0 0 0 2px ${primaryColor}40`
+                            : undefined,
+                        opacity: activeApp !== "gpages" ? 0.2 : undefined,
+                      }
+                    : undefined
+                }
+              >
+                {isDefaultWl ? (
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                ) : (
+                  <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"
+                  >
+                    <path d="M4 8h16" />
+                    <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" />
+                    <path d="M8 4v4" />
+                  </svg>
+                )}
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}
+            </TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-cyan-300" : "",
+              activeApp === "gpages" ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+export { NavBar };
+export type { NavBarProps };