@mohasinac/appkit 4.7.2 → 4.7.3

package/dist/_internal/client/features/layout/DashboardLayoutClient.js

@@ -22,8 +22,9 @@ import { normalizeError } from "../../../../errors/normalize";
  * the underlying *Sidebar components.
  */
 import { useCallback, useEffect, useState, startTransition } from "react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
+import { useQueryClient } from "@tanstack/react-query";
 import { useDashboardNav } from "../../../../features/layout/DashboardNavContext";
 import { AdminSidebar } from "../../../../features/admin/components/AdminSidebar";
 import { StoreSidebar } from "../../../../features/seller/components/SellerSidebar";
@@ -33,7 +34,10 @@ import { filterNavItems } from "./filterNavItems";
 import { useSiteSettings } from "../../../../core/hooks/useSiteSettings";
 import { useTheme } from "../../theme";
 import { BackgroundRenderer, Div, Nav, Span } from "../../../../ui";
+import { useToast } from "../../../../ui/components/Toast";
 import { useVisualViewportInset } from "../../../../react/hooks/useVisualViewportInset";
+import { useSession } from "../../../../react/contexts/SessionContext";
+import { ROUTES } from "../../../../next/routing/route-map";
 /**
  * Hoisted drawer-state hook — the matchMedia-aware open/close logic that was
  * triplicated across admin/store/user layouts. Used internally by
@@ -153,6 +157,24 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
     const storageKey = `appkit:sidebar-open:${variant}`;
     const { desktopOpen, mobileOpen, close, closeMobile, toggle } = useResponsiveDrawer(storageKey);
     useEffect(() => { closeMobile(); }, [pathname, closeMobile]);
+    const router = useRouter();
+    const { signOut } = useSession();
+    const { showToast } = useToast();
+    const queryClient = useQueryClient();
+    const handleLogout = useCallback(async () => {
+        try {
+            await signOut();
+            void queryClient.invalidateQueries({ queryKey: ["wishlist"] });
+            void queryClient.invalidateQueries({ queryKey: ["cart"] });
+            void queryClient.invalidateQueries({ queryKey: ["notifications"] });
+            showToast("Signed out successfully", "info");
+        }
+        catch (_err) {
+            void normalizeError(_err);
+            showToast("Signed out", "info");
+        }
+        router.push(String(ROUTES.AUTH.LOGIN));
+    }, [signOut, queryClient, router, showToast]);
     const { data: settings } = useSiteSettings();
     const navConfig = settings?.navConfig;
     const { theme } = useTheme();
@@ -166,10 +188,8 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
         ? filteredGroups
         : groups;
     const crossNavLinkClass = "flex items-center gap-[var(--appkit-space-2)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]/60 hover:text-[var(--appkit-color-text)] transition-colors";
-    const hasCrossNav = Boolean(crossNav?.profileHref || crossNav?.storeHref || crossNav?.adminHref);
-    const renderCrossNavFooter = hasCrossNav
-        ? () => (_jsxs(Nav, { "aria-label": "Cross-dashboard links", padding: "y-xs", children: [crossNav?.storeHref && (_jsx(Link, { href: crossNav.storeHref, onClick: closeMobile, className: crossNavLinkClass, children: "Go to my Store" })), crossNav?.adminHref && (_jsx(Link, { href: crossNav.adminHref, onClick: closeMobile, className: crossNavLinkClass, children: "Back to Admin" })), crossNav?.profileHref && (_jsx(Link, { href: crossNav.profileHref, onClick: closeMobile, className: crossNavLinkClass, children: "My Profile" }))] }))
-        : undefined;
+    const logoutBtnClass = "flex w-full items-center gap-[var(--appkit-space-2)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium text-error transition-colors hover:bg-error-surface hover:text-error";
+    const renderCrossNavFooter = () => (_jsxs(Nav, { "aria-label": "Cross-dashboard links", padding: "y-xs", children: [crossNav?.storeHref && (_jsx(Link, { href: crossNav.storeHref, onClick: closeMobile, className: crossNavLinkClass, children: "Go to my Store" })), crossNav?.adminHref && (_jsx(Link, { href: crossNav.adminHref, onClick: closeMobile, className: crossNavLinkClass, children: "Back to Admin" })), crossNav?.profileHref && (_jsx(Link, { href: crossNav.profileHref, onClick: closeMobile, className: crossNavLinkClass, children: "My Profile" })), _jsx("button", { type: "button", onClick: () => { closeMobile(); void handleLogout(); }, className: logoutBtnClass, children: "Log out" })] }));
     return (_jsxs(_Fragment, { children: [hasBackground && (_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: resolvedLightBackground ?? { type: "color", value: "" }, darkMode: resolvedDarkBackground ?? { type: "color", value: "" } })), variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: filteredGroups.flatMap((g) => g.items), groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), _jsx(Div, { className: [
                     "w-full flex-1 flex flex-col min-h-[calc(100dvh-var(--header-height,3.5rem))]",
                     "pb-[var(--appkit-space-16)] lg:pb-[0]", // clears the fixed mobile bottom-nav

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.7.2",
+  "version": "4.7.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"