@mshuja288/aksuicore 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mshuja288/aksuicore",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Shared UI components and templates for Ikssam applications",
   "license": "UNLICENSED",
   "private": false,

package/src/patterns/AppShell.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { SideNav, type SideNavItem } from "../primitives/SideNav";
 import { Topbar } from "../primitives/Topbar";
 
+export type MobileNavMode = "drawer" | "bottom" | "hybrid";
+
 export type AppShellProps = {
   title: string;
   logoSrc?: string;
@@ -14,8 +16,21 @@ export type AppShellProps = {
   activeNavId: string;
   onNavSelect: (id: string) => void;
   navLabel?: string;
-  /** When true (default), renders a mobile bottom nav from `navItems`. */
+  /**
+   * Small-screen navigation strategy.
+   * - `drawer` (default): hamburger opens a collapsible side menu; no crowded bottom bar
+   * - `bottom`: classic bottom nav from all `navItems` (fine for a few sections)
+   * - `hybrid`: compact bottom bar with current section + Menu that opens the drawer
+   */
+  mobileNav?: MobileNavMode;
+  /**
+   * When true, renders the mobile bottom nav.
+   * Defaults to true for `bottom` / `hybrid`, false for `drawer`.
+   */
   showBottomNav?: boolean;
+  /** Controlled drawer open state (optional). */
+  navDrawerOpen?: boolean;
+  onNavDrawerOpenChange?: (open: boolean) => void;
   topbarActions?: ReactNode;
   children: ReactNode;
   /** Extra class on the content/screen region */
@@ -24,7 +39,7 @@ export type AppShellProps = {
 
 /**
  * Application chrome: topbar + left side nav + content screen.
- * Matches aksconfigurator_ui shell layout.
+ * On small screens, prefers a collapsible drawer over a crowded bottom nav.
  */
 export function AppShell({
   title,
@@ -36,32 +51,140 @@ export function AppShell({
   activeNavId,
   onNavSelect,
   navLabel = "Sections",
-  showBottomNav = true,
+  mobileNav = "drawer",
+  showBottomNav,
+  navDrawerOpen,
+  onNavDrawerOpenChange,
   topbarActions,
   children,
   screenClassName = "",
 }: AppShellProps) {
+  const [internalDrawerOpen, setInternalDrawerOpen] = useState(false);
+  const drawerControlled = navDrawerOpen !== undefined;
+  const drawerOpen = drawerControlled ? navDrawerOpen : internalDrawerOpen;
+  const useBottomNav = showBottomNav ?? (mobileNav === "bottom" || mobileNav === "hybrid");
+  const useDrawer = mobileNav === "drawer" || mobileNav === "hybrid";
+  const activeItem = navItems.find((item) => item.id === activeNavId);
+
+  function setDrawerOpen(open: boolean) {
+    if (!drawerControlled) {
+      setInternalDrawerOpen(open);
+    }
+    onNavDrawerOpenChange?.(open);
+  }
+
+  useEffect(() => {
+    if (!drawerOpen) {
+      return;
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        if (!drawerControlled) {
+          setInternalDrawerOpen(false);
+        }
+        onNavDrawerOpenChange?.(false);
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [drawerControlled, drawerOpen, onNavDrawerOpenChange]);
+
+  function selectNav(id: string) {
+    onNavSelect(id);
+    setDrawerOpen(false);
+  }
+
   return (
-    <div className="aksui-root app-shell">
-      <Topbar title={title} logoSrc={logoSrc} logoAlt={logoAlt} username={username} onLogout={onLogout}>
+    <div
+      className={[
+        "aksui-root",
+        "app-shell",
+        `mobile-nav-${mobileNav}`,
+        useBottomNav ? "has-bottom-nav" : "",
+        drawerOpen ? "nav-drawer-open" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <Topbar
+        title={title}
+        logoSrc={logoSrc}
+        logoAlt={logoAlt}
+        username={username}
+        onLogout={onLogout}
+        showMenuButton={useDrawer}
+        menuOpen={drawerOpen}
+        onMenuClick={() => setDrawerOpen(!drawerOpen)}
+      >
         {topbarActions}
       </Topbar>
+
       <div className="app-body">
         <SideNav items={navItems} activeId={activeNavId} onSelect={onNavSelect} label={navLabel} />
         <div className={["screen", screenClassName].filter(Boolean).join(" ")}>{children}</div>
       </div>
-      {showBottomNav ? (
+
+      {useDrawer ? (
+        <>
+          <button
+            type="button"
+            className={drawerOpen ? "nav-drawer-backdrop open" : "nav-drawer-backdrop"}
+            aria-label="Close navigation menu"
+            tabIndex={drawerOpen ? 0 : -1}
+            onClick={() => setDrawerOpen(false)}
+          />
+          <aside
+            className={drawerOpen ? "nav-drawer open" : "nav-drawer"}
+            aria-label={navLabel}
+            aria-hidden={!drawerOpen}
+          >
+            <div className="nav-drawer-head">
+              <p className="nav-drawer-title">{navLabel}</p>
+              <button type="button" className="ghost nav-drawer-close" onClick={() => setDrawerOpen(false)}>
+                Close
+              </button>
+            </div>
+            <SideNav
+              className="nav-drawer-nav"
+              items={navItems}
+              activeId={activeNavId}
+              onSelect={selectNav}
+              label={navLabel}
+            />
+          </aside>
+        </>
+      ) : null}
+
+      {useBottomNav ? (
         <nav className="bottom-nav" aria-label={navLabel}>
-          {navItems.map((item) => (
-            <button
-              key={item.id}
-              type="button"
-              className={activeNavId === item.id ? "active" : ""}
-              onClick={() => onNavSelect(item.id)}
-            >
-              {item.short ?? item.label}
-            </button>
-          ))}
+          {mobileNav === "hybrid" ? (
+            <>
+              <button type="button" className="active bottom-nav-current" disabled>
+                {activeItem?.short ?? activeItem?.label ?? "Section"}
+              </button>
+              <button type="button" className="bottom-nav-menu" onClick={() => setDrawerOpen(true)}>
+                Menu
+              </button>
+            </>
+          ) : (
+            navItems.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                className={activeNavId === item.id ? "active" : ""}
+                onClick={() => onNavSelect(item.id)}
+              >
+                {item.short ?? item.label}
+              </button>
+            ))
+          )}
         </nav>
       ) : null}
     </div>