@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/layout/top-bar-header-menubar.tsx

@@ -0,0 +1,412 @@
+"use client";
+
+import { Fragment } from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+
+import type { DictionaryType } from "../../hooks";
+import type {
+  LocaleType,
+  NavigationNestedItem,
+  NavigationRootItem,
+  NavigationType,
+} from "../../types";
+
+import { navigationsData as defaultNavigationsData } from "../../configs/data/navigations";
+
+import { ensureLocalizedPathname } from "../../utils";
+import { i18n } from "../../configs";
+import {
+  cn,
+  getDictionaryValue,
+  isActivePathname,
+  titleCaseToCamelCase,
+} from "../../utils";
+
+import { Badge } from "../index";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "../primitives/client";
+import { DynamicIcon } from "../primitives/client";
+
+export function TopBarHeaderMenubar({
+  dictionary,
+  navigation,
+}: {
+  dictionary: DictionaryType;
+  navigation?: NavigationType[];
+}) {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const locale = (params.lang as LocaleType) || i18n.defaultLocale;
+
+  // Use app-provided navigation, fall back to core default if not provided
+  const navItems = navigation ?? defaultNavigationsData;
+
+  // SAP Fiori Logic: Show first 5 items, group rest under "More"
+  const MAX_VISIBLE_ITEMS = 5;
+  const visibleItems = navItems.slice(0, MAX_VISIBLE_ITEMS);
+  const overflowItems = navItems.slice(MAX_VISIBLE_ITEMS);
+
+  const renderMenuItem = (item: NavigationRootItem | NavigationNestedItem) => {
+    const title = getDictionaryValue(
+      titleCaseToCamelCase(item.title),
+      dictionary.navigation,
+      item.title, // Fallback to original title if not found
+    );
+    const label =
+      item.label &&
+      getDictionaryValue(
+        titleCaseToCamelCase(item.label),
+        dictionary.label,
+        item.label, // Fallback to original label if not found
+      );
+
+    // If the item has nested items, render it with a MenubarSub.
+    if (item.items) {
+      return (
+        <MenubarSub>
+          <MenubarSubTrigger className="gap-2.5 py-2 cursor-pointer rounded-sm focus:bg-accent/50 focus:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground transition-colors">
+            {"iconName" in item && (
+              <DynamicIcon
+                name={item.iconName}
+                className="me-1 h-4 w-4 text-muted-foreground/70 group-hover:text-foreground transition-colors"
+              />
+            )}
+            <span className="text-sm font-medium">{title}</span>
+            {"label" in item && (
+              <Badge
+                variant="secondary"
+                className="ml-auto text-[10px] h-5 px-1.5 font-normal bg-muted/40 text-muted-foreground border-0"
+              >
+                {label}
+              </Badge>
+            )}
+          </MenubarSubTrigger>
+          <MenubarSubContent className="max-h-[80vh] overflow-y-auto p-1 shadow-md border-border/40 bg-popover rounded-xl">
+            <div className="grid grid-cols-1 gap-0.5 min-w-[180px]">
+              {item.items.map((subItem: NavigationNestedItem) => {
+                return (
+                  <MenubarItem key={subItem.title} className="p-0" asChild>
+                    {renderMenuItem(subItem)}
+                  </MenubarItem>
+                );
+              })}
+            </div>
+          </MenubarSubContent>
+        </MenubarSub>
+      );
+    }
+
+    // Otherwise, render the item with a link.
+    if ("href" in item) {
+      const localizedPathname = ensureLocalizedPathname(item.href, locale);
+      const isActive = isActivePathname(localizedPathname, pathname);
+
+      return (
+        <MenubarItem asChild className="cursor-pointer outline-none">
+          <Link
+            href={localizedPathname}
+            className={cn(
+              "w-full gap-2.5 py-2 px-3 rounded-sm transition-colors group flex items-center",
+              isActive
+                ? "bg-primary/5 text-primary font-semibold"
+                : "text-muted-foreground hover:bg-accent/40 hover:text-foreground",
+            )}
+          >
+            {"iconName" in item ? (
+              <DynamicIcon
+                name={item.iconName}
+                className={cn(
+                  "h-4 w-4 transition-colors",
+                  isActive
+                    ? "text-primary"
+                    : "text-muted-foreground/70 group-hover:text-foreground",
+                )}
+              />
+            ) : (
+              <DynamicIcon
+                name="Circle"
+                className={cn(
+                  "h-1.5 w-1.5",
+                  isActive
+                    ? "fill-primary text-primary"
+                    : "text-muted-foreground/40 group-hover:text-muted-foreground",
+                )}
+              />
+            )}
+            <span className="text-sm">{title}</span>
+            {"label" in item && (
+              <Badge
+                variant="secondary"
+                className="ml-auto text-[10px] h-5 px-1.5 font-normal bg-muted/40 text-muted-foreground border-0"
+              >
+                {label}
+              </Badge>
+            )}
+          </Link>
+        </MenubarItem>
+      );
+    }
+  };
+
+  const renderRootItem = (nav: NavigationType) => {
+    const title = getDictionaryValue(
+      titleCaseToCamelCase(nav.title),
+      dictionary.navigation,
+      nav.title,
+    );
+
+    // Check if any child is active to highlight the parent trigger
+    // nav is NavigationType, so it always has items.
+    const isChildActive = nav.items.some((item) => {
+      if ("href" in item && item.href) {
+        return isActivePathname(
+          ensureLocalizedPathname(item.href, locale),
+          pathname,
+        );
+      }
+      if ("items" in item && item.items) {
+        // Check if item has nested items
+        return item.items.some(
+          (subItem) =>
+            "href" in subItem &&
+            subItem.href &&
+            isActivePathname(
+              ensureLocalizedPathname(subItem.href, locale),
+              pathname,
+            ),
+        );
+      }
+      return false;
+    });
+
+    // Special handling for "Apps" Mega Menu
+    if (nav.title === "Apps") {
+      return (
+        <MenubarMenu key={nav.title}>
+          <MenubarTrigger
+            className={cn(
+              "cursor-pointer px-3 py-2 rounded-md font-medium text-[14px] transition-all duration-200 flex items-center gap-2 select-none whitespace-nowrap",
+              "data-[state=open]:bg-accent/20",
+              isChildActive
+                ? "border-[#0064d9] text-foreground font-bold"
+                : "border-transparent text-muted-foreground hover:text-foreground hover:bg-accent/10",
+            )}
+          >
+            {nav.iconName && (
+              <DynamicIcon
+                name={nav.iconName}
+                className={cn(
+                  "h-4 w-4",
+                  isChildActive
+                    ? "text-[#0064d9]"
+                    : "text-muted-foreground group-hover:text-foreground",
+                )}
+              />
+            )}
+            {title}
+            <DynamicIcon
+              name="ChevronDown"
+              className={cn(
+                "h-3 w-3 transition-transform duration-200 opacity-50 ml-0.5",
+                "group-data-[state=open]:rotate-180",
+              )}
+            />
+          </MenubarTrigger>
+          <MenubarContent
+            className="w-[520px] p-4 shadow-xl border-border/40 bg-popover rounded-xl animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
+            align="start"
+            sideOffset={0}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {nav.items.map((item) => {
+                const itemTitle = getDictionaryValue(
+                  titleCaseToCamelCase(item.title),
+                  dictionary.navigation,
+                  item.title,
+                );
+
+                if ("href" in item && item.href) {
+                  const localizedPathname = ensureLocalizedPathname(
+                    item.href,
+                    locale,
+                  );
+                  const isActive = isActivePathname(
+                    localizedPathname,
+                    pathname,
+                  );
+
+                  return (
+                    <MenubarItem
+                      asChild
+                      key={item.title}
+                      className="p-0 focus:bg-transparent"
+                    >
+                      <Link
+                        href={localizedPathname}
+                        className={cn(
+                          "flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-transparent transition-all hover:bg-accent/50 hover:border-border/50 group",
+                          isActive
+                            ? "bg-primary/5 border-primary/20"
+                            : "bg-muted/20",
+                        )}
+                      >
+                        <div
+                          className={cn(
+                            "p-2.5 rounded-full transition-colors",
+                            isActive
+                              ? "bg-primary/10 text-primary"
+                              : "bg-background text-muted-foreground group-hover:text-foreground group-hover:bg-background shadow-sm",
+                          )}
+                        >
+                          {"iconName" in item ? (
+                            <DynamicIcon
+                              name={item.iconName}
+                              className="h-6 w-6"
+                            />
+                          ) : (
+                            <DynamicIcon name="AppWindow" className="h-6 w-6" />
+                          )}
+                        </div>
+                        <span className="font-medium text-sm text-center">
+                          {itemTitle}
+                        </span>
+                      </Link>
+                    </MenubarItem>
+                  );
+                }
+                return null;
+              })}
+            </div>
+          </MenubarContent>
+        </MenubarMenu>
+      );
+    }
+
+    return (
+      <MenubarMenu key={nav.title}>
+        <MenubarTrigger
+          className={cn(
+            "cursor-pointer px-3 py-2 rounded-md font-medium text-[14px] transition-all duration-200 flex items-center gap-2 select-none whitespace-nowrap",
+            "data-[state=open]:bg-accent/20",
+            isChildActive
+              ? "text-foreground font-bold"
+              : "text-muted-foreground hover:text-foreground hover:bg-accent/10",
+          )}
+        >
+          {nav.iconName && (
+            <DynamicIcon
+              name={nav.iconName}
+              className={cn(
+                "h-4 w-4",
+                isChildActive
+                  ? "text-[#0064d9]"
+                  : "text-muted-foreground group-hover:text-foreground",
+              )}
+            />
+          )}
+          {title}
+          <DynamicIcon
+            name="ChevronDown"
+            className={cn(
+              "h-3 w-3 transition-transform duration-200 opacity-50 ml-0.5",
+              "group-data-[state=open]:rotate-180",
+            )}
+          />
+        </MenubarTrigger>
+        <MenubarContent
+          className="min-w-[220px] p-1 shadow-md border-border/40 bg-popover rounded-xl animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"
+          align="start"
+          sideOffset={0}
+        >
+          <div
+            className={cn(
+              "grid gap-0.5",
+              nav.items.length > 8
+                ? "grid-cols-2 min-w-[400px] gap-x-2"
+                : "grid-cols-1",
+            )}
+          >
+            {nav.items.map((item) => (
+              <Fragment key={item.title}>{renderMenuItem(item)}</Fragment>
+            ))}
+          </div>
+        </MenubarContent>
+      </MenubarMenu>
+    );
+  };
+
+  return (
+    <div className="w-full overflow-hidden">
+      <Menubar className="border-none bg-transparent shadow-none h-auto min-h-9 p-0 gap-1 rounded-none">
+        {visibleItems.map((nav) => renderRootItem(nav))}
+
+        {overflowItems.length > 0 && (
+          <MenubarMenu>
+            <MenubarTrigger
+              className={cn(
+                "cursor-pointer px-3 py-2 rounded-md font-medium text-[14px] transition-all duration-200 flex items-center gap-1.5 select-none whitespace-nowrap",
+                "data-[state=open]:bg-accent/20 text-muted-foreground hover:text-foreground hover:bg-accent/10",
+              )}
+            >
+              <DynamicIcon name="Ellipsis" className="h-5 w-5" />
+            </MenubarTrigger>
+            <MenubarContent
+              className="min-w-[200px] p-1 shadow-md border-border/40 bg-popover rounded-xl"
+              align="end"
+              sideOffset={0}
+            >
+              <div className="grid grid-cols-1 gap-1">
+                {overflowItems.map((nav) => {
+                  const title = getDictionaryValue(
+                    titleCaseToCamelCase(nav.title),
+                    dictionary.navigation,
+                    nav.title,
+                  );
+                  return (
+                    <MenubarSub key={nav.title}>
+                      <MenubarSubTrigger className="w-full cursor-pointer rounded-lg py-2">
+                        {nav.iconName && (
+                          <DynamicIcon
+                            name={nav.iconName}
+                            className="me-2 h-4 w-4 text-muted-foreground/70"
+                          />
+                        )}
+                        {title}
+                      </MenubarSubTrigger>
+                      <MenubarSubContent className="min-w-[200px] p-1 shadow-md border-border/40 bg-popover rounded-xl">
+                        <div
+                          className={cn(
+                            "grid gap-0.5",
+                            nav.items.length > 8
+                              ? "grid-cols-2 min-w-[400px] gap-x-2"
+                              : "grid-cols-1",
+                          )}
+                        >
+                          {nav.items.map((item) => (
+                            <Fragment key={item.title}>
+                              {renderMenuItem(item)}
+                            </Fragment>
+                          ))}
+                        </div>
+                      </MenubarSubContent>
+                    </MenubarSub>
+                  );
+                })}
+              </div>
+            </MenubarContent>
+          </MenubarMenu>
+        )}
+      </Menubar>
+    </div>
+  );
+}

package/src/ui/layout/user-dropdown.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import Link from "next/link";
+import { signOut, useSession } from "next-auth/react";
+import { LogOut, User, UserCog } from "lucide-react";
+
+import type { DictionaryType } from "../../hooks";
+import type { LocaleType } from "../../types";
+
+import { ensureLocalizedPathname } from "../../utils";
+import { getInitials } from "../../utils";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../data-display/avatar";
+import { Button } from "../primitives/button";
+import { useTabContentCache } from "./tab-content-cache";
+import { useTabNavigation } from "./tab-navigation-provider";
+
+// Safe wrapper to prevent crashing when useSession is called outside of SessionProvider
+// This often happens during Error Boundary or Hydration failures.
+function useSafeSession() {
+  try {
+    return useSession();
+  } catch (error) {
+    return { data: null, status: "unauthenticated" as const };
+  }
+}
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../primitives/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../primitives/client";
+
+interface ExtendedUser {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+  avatar?: string | null;
+}
+
+interface UserDropdownProps {
+  dictionary: DictionaryType;
+  locale: LocaleType;
+  user?: ExtendedUser | null | undefined;
+  onSignOut?: () => void;
+}
+
+export function UserDropdown({
+  dictionary,
+  locale,
+  user: userProp,
+  onSignOut,
+}: UserDropdownProps) {
+  const { data: session } = useSafeSession();
+  const { clearAllCache } = useTabContentCache();
+  const { clearTabs } = useTabNavigation();
+
+  // Use provided user prop or fall back to session user
+  const user = userProp ?? (session?.user as ExtendedUser | undefined);
+
+  const handleSignOut = async () => {
+    // Clear client-side caches that can leak UI/data between users
+    try {
+      clearAllCache();
+      clearTabs();
+
+      // Remove persisted tab state explicitly to avoid stale sessions after re-login
+      if (typeof window !== "undefined") {
+        sessionStorage.removeItem("tab-content-cache");
+        sessionStorage.removeItem("tab-navigation-state");
+      }
+    } catch {
+      // Best-effort cleanup only
+    }
+
+    if (onSignOut) {
+      await onSignOut();
+    } else {
+      await signOut({ callbackUrl: "/sign-in" });
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="icon"
+                className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
+                aria-label="User"
+              >
+                <Avatar className="size-6">
+                  <AvatarImage
+                    src={user?.avatar || undefined}
+                    alt={user?.name || ""}
+                    className="object-cover"
+                  />
+                  <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
+                    {user?.name && getInitials(user.name)}
+                  </AvatarFallback>
+                </Avatar>
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Profile</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <DropdownMenuContent
+        className="w-56 p-1 bg-background/80 backdrop-blur-xl border border-border/40 shadow-xl rounded-xl animate-in fade-in zoom-in-95 duration-200"
+        align="end"
+        forceMount
+      >
+        <DropdownMenuLabel className="flex gap-2 p-2">
+          <Avatar className="size-8 border border-border/20 shadow-sm">
+            <AvatarImage src={user?.avatar || undefined} alt="Avatar" />
+            <AvatarFallback className="bg-transparent">
+              {user?.name && getInitials(user.name)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col min-w-0 space-y-0.5 overflow-hidden">
+            <p className="text-sm font-semibold text-foreground truncate leading-none">
+              {user?.name}
+            </p>
+            <p className="text-[11px] text-muted-foreground truncate font-medium opacity-80 leading-none">
+              {user?.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+
+        <DropdownMenuSeparator className="my-1 bg-border/40 -mx-1" />
+
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            asChild
+            className="h-8 px-2 rounded-md cursor-pointer focus:bg-primary/10 focus:text-primary transition-colors duration-200 group text-sm"
+          >
+            <Link
+              href={ensureLocalizedPathname("/user/profile", locale)}
+              className="flex items-center w-full"
+            >
+              <User className="me-2 size-4 text-muted-foreground group-hover:text-primary group-focus:text-primary transition-colors" />
+              <span>{dictionary.navigation.userNav.profile}</span>
+            </Link>
+          </DropdownMenuItem>
+          {/* <DropdownMenuItem
+            asChild
+            className="h-8 px-2 rounded-md cursor-pointer focus:bg-primary/10 focus:text-primary transition-colors duration-200 group text-sm"
+          >
+            <Link
+              href={ensureLocalizedPathname("/user", locale)}
+              className="flex items-center w-full"
+            >
+              <UserCog className="me-2 size-4 text-muted-foreground group-hover:text-primary group-focus:text-primary transition-colors" />
+              <span>{dictionary.navigation.userNav.settings}</span>
+            </Link>
+          </DropdownMenuItem> */}
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator className="my-1 bg-border/40 -mx-1" />
+
+        <DropdownMenuItem
+          onClick={handleSignOut}
+          className="h-8 px-2 rounded-md cursor-pointer text-red-600 focus:bg-red-50 focus:text-red-700 dark:text-red-400 dark:focus:bg-red-950/30 dark:focus:text-red-300 transition-colors duration-200 group text-sm"
+        >
+          <LogOut className="me-2 size-4 group-hover:text-red-700 dark:group-hover:text-red-300 transition-colors" />
+          <span>{dictionary.navigation.userNav.signOut}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/ui/layout/vertical-layout-header.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { Settings } from "lucide-react";
+
+import type { DictionaryType } from "../../hooks";
+import type { LocaleType } from "../../types";
+
+import { Button } from "../index";
+import { SidebarTrigger } from "../primitives/sidebar"; // Primitive
+import { Customizer } from "./customizer";
+import { FullScreenToggle } from "./full-screen-toggle";
+import { NotificationDropdown } from "./notification-dropdown";
+import { PageTabs } from "./page-tabs";
+import { UserDropdown } from "./user-dropdown";
+import { ToggleMobileSidebar } from "./toggle-mobile-sidebar";
+
+export function VerticalLayoutHeader({
+  dictionary,
+}: {
+  dictionary: DictionaryType;
+}) {
+  const params = useParams();
+  const locale = params.lang as LocaleType;
+
+  return (
+    <header className="sticky top-0 z-50 w-full bg-background/95 border-b border-sidebar-border backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="container flex h-11 justify-between items-center gap-0">
+        {/* Left: sidebar toggles */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <ToggleMobileSidebar />
+          <SidebarTrigger className="hidden lg:inline-flex" />
+        </div>
+
+        {/* Center: page tabs use available space */}
+        <div className="flex-1 min-w-0">
+          <PageTabs
+            dictionary={dictionary}
+            className="h-8 flex items-center"
+            variant="header"
+          />
+        </div>
+
+        {/* Right: user actions */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <div className="hidden sm:flex items-center gap-2">
+            <NotificationDropdown dictionary={dictionary} />
+            <FullScreenToggle />
+          </div>
+          <Customizer
+            trigger={
+              <Button variant="ghost" size="icon" aria-label="Customize layout">
+                <Settings className="h-4 w-4" />
+              </Button>
+            }
+          />
+          {/* <ModeDropdown dictionary={dictionary} /> */}
+          {/* <LanguageDropdown dictionary={dictionary} /> */}
+          {/* User dropdown */}
+          <UserDropdown dictionary={dictionary} locale={locale} />
+        </div>
+      </div>
+    </header>
+  );
+}