@prenta/admin 2.6.1 → 2.7.0

package/src/layout/MobileTabBar.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { Ellipsis } from 'lucide-react'
+import { hasActiveDescendant, isPathActive, type NavItem } from './nav-config.js'
+
+export interface MobileTabBarProps {
+  items: NavItem[]
+  currentPath: string
+  onNavigate: (path: string) => void
+  /** Opens the nav drawer ("More"). */
+  onMore: () => void
+  moreOpen: boolean
+  /** The drawer's element id, for More's `aria-controls`. */
+  drawerId?: string
+}
+
+// Kit tab (SHELL.md §2): icon over a 9px label, at least 60px wide. 44px tall
+// so every tab clears the touch target minimum.
+const TAB =
+  'rounded-7 relative flex min-h-11 min-w-[60px] shrink-0 cursor-pointer flex-col items-center justify-center gap-[3px] border-0 px-1 py-1.5'
+
+/**
+ * Mobile nav (≤768px, SHELL.md §2 and CONFLICTS.md §2 "mobile nav"): a fixed
+ * 56px bottom bar that scrolls sideways, one tab per kit destination (icon over
+ * a 9px label). Collection and plugin entries, sub-pages and Settings tabs
+ * stay in the drawer, opened from the last tab, "More". It sits below every
+ * overlay layer (`--z-tabbar`), so sheets and dialogs cover it.
+ */
+export function MobileTabBar({
+  items,
+  currentPath,
+  onNavigate,
+  onMore,
+  moreOpen,
+  drawerId,
+}: MobileTabBarProps) {
+  const tabs = items.filter((item) => !item.extra)
+
+  return (
+    <nav
+      aria-label="Tab bar"
+      className="bg-sb border-bdr shadow-tabbar fixed right-0 bottom-0 left-0 z-[var(--z-tabbar)] flex h-[calc(var(--tabbar-h)+env(safe-area-inset-bottom))] items-start border-t pb-[env(safe-area-inset-bottom)]"
+    >
+      <div className="flex h-[var(--tabbar-h)] w-full flex-row items-center gap-0.5 overflow-x-auto overflow-y-hidden px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {tabs.map((item) => {
+          const active = item.children?.length
+            ? isPathActive(currentPath, item.path) ||
+              hasActiveDescendant(item.children, currentPath) ||
+              currentPath.split(/[?#]/)[0]!.startsWith(item.path + '/')
+            : isPathActive(currentPath, item.path)
+          const Icon = item.icon
+          return (
+            <button
+              key={`tab:${item.label}`}
+              type="button"
+              onClick={() => onNavigate(item.path)}
+              aria-current={active ? 'page' : undefined}
+              className={`${TAB} ${
+                active
+                  ? 'bg-acc-l text-acc font-[550] forced-colors:outline-2 forced-colors:-outline-offset-2 forced-colors:outline-solid'
+                  : 'text-sub bg-transparent font-[450]'
+              }`}
+            >
+              <Icon className="h-4 w-4 shrink-0" size={16} strokeWidth={1.75} aria-hidden />
+              <span className="text-tab leading-[normal] tracking-[0.2px] whitespace-nowrap">
+                {item.label}
+              </span>
+              {item.badge && item.badge > 0 ? (
+                <span
+                  className="rounded-pill bg-err text-badge text-acc-on absolute top-0.5 left-[calc(50%+4px)] flex h-4 min-w-4 items-center justify-center px-1 leading-none font-bold tabular-nums"
+                  aria-label={`${item.badge} unread`}
+                >
+                  {item.badge > 99 ? '99+' : item.badge}
+                </span>
+              ) : null}
+            </button>
+          )
+        })}
+        <button
+          type="button"
+          onClick={onMore}
+          aria-expanded={moreOpen}
+          aria-controls={drawerId}
+          className={`${TAB} text-sub bg-transparent font-[450]`}
+        >
+          <Ellipsis className="h-4 w-4 shrink-0" strokeWidth={1.75} aria-hidden />
+          <span className="text-tab leading-[normal] tracking-[0.2px] whitespace-nowrap">More</span>
+        </button>
+      </div>
+    </nav>
+  )
+}