@broberg/app-shell 0.1.1 → 0.2.1

package/dist/preact.cjs

@@ -25,6 +25,19 @@ function safeNavigate(target) {
     return null;
   }
 }
+function activeNavLabel(groups, footer, currentPath) {
+  let best;
+  const visit = (it) => {
+    if (it.href && isActivePath(it.href, currentPath)) {
+      const len = it.href.length;
+      if (!best || len > best.len) best = { label: it.label, len };
+    }
+    it.children?.forEach(visit);
+  };
+  for (const g of groups) g.items.forEach(visit);
+  footer?.forEach(visit);
+  return best?.label;
+}
 function badgeLabel(n) {
   if (!n || n <= 0) return null;
   return n > 99 ? "99+" : String(n);
@@ -159,6 +172,8 @@ function relativeTime(ts, lang, now = Date.now()) {
 var TEXT = {
   da: {
     openMenu: "\xC5bn menu",
+    closeMenu: "Luk menu",
+    home: "Forside",
     collapse: "Skjul sidemenu",
     expand: "Vis sidemenu",
     notifications: "Notifikationer",
@@ -183,6 +198,8 @@ var TEXT = {
   },
   en: {
     openMenu: "Open menu",
+    closeMenu: "Close menu",
+    home: "Home",
     collapse: "Hide sidebar",
     expand: "Show sidebar",
     notifications: "Notifications",
@@ -240,8 +257,10 @@ function NavLink(props) {
 var svg = (d, size = 18) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", "stroke-width": "1.9", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: d });
 var IconMenu = () => svg(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }), 20);
 var IconChevron = ({ open }) => /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-chev" + (open ? " is-open" : ""), children: svg(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }), 12) });
-var IconCollapse = () => svg(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }), 15);
-var IconExpand = () => svg(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }), 15);
+var IconPanelLeft = () => svg(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" })
+] }), 16);
 var IconBell = () => svg(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
@@ -256,8 +275,12 @@ var IconUser = () => svg(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
 ] }), 14);
 function Sidebar(p) {
-  const t = TEXT[p.lang];
   const key = p.groupsKey ?? "broberg-app-shell.groups";
+  const itemsKey = p.itemsKey ?? "broberg-app-shell.items";
+  const mode = p.mobile ?? "drawer";
+  const collapseMode = p.collapse ?? (mode === "rail" ? "icon" : "offcanvas");
+  const isMobile = useIsMobile();
+  const railed = isMobile ? mode === "rail" : !!p.collapsed && collapseMode === "icon";
   const [folded, setFolded] = hooks.useState(() => readSet(key));
   const toggleGroup = (label) => {
     const next = new Set(folded);
@@ -265,9 +288,47 @@ function Sidebar(p) {
     setFolded(next);
     writeSet(key, next);
   };
-  const mode = p.mobile ?? "drawer";
-  const close = () => p.onClose?.();
-  const item = (it) => {
+  const all = [...p.groups.flatMap((g) => g.items), ...p.footer ?? []];
+  const childActive = (it) => !!it.children?.some((c) => isActivePath(c.href, p.currentPath));
+  const [openItems, setOpenItems] = hooks.useState(() => {
+    const s = readSet(itemsKey);
+    for (const it of all) if (childActive(it)) s.add(it.id);
+    return s;
+  });
+  const toggleItem = (id) => {
+    const next = new Set(openItems);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setOpenItems(next);
+    writeSet(itemsKey, next);
+  };
+  const [flyout, setFlyout] = hooks.useState(null);
+  const flyoutRef = hooks.useRef(null);
+  hooks.useEffect(() => {
+    if (!flyout) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setFlyout(null);
+    };
+    const onDown = (e) => {
+      const t = e.target;
+      if (flyoutRef.current && t && flyoutRef.current.contains(t)) return;
+      if (t instanceof Element && t.closest(`[data-flyout-for="${flyout.id}"]`)) return;
+      setFlyout(null);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [flyout]);
+  hooks.useEffect(() => {
+    if (!railed) setFlyout(null);
+  }, [railed]);
+  const close = () => {
+    setFlyout(null);
+    p.onClose?.();
+  };
+  const leaf = (it, sub = false) => {
     const active = isActivePath(it.href, p.currentPath);
     const badge = badgeLabel(it.badge);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -276,12 +337,13 @@ function Sidebar(p) {
         href: it.href,
         onNavigate: p.onNavigate,
         onAfter: close,
-        class: "bas-item" + (active ? " is-active" : ""),
+        class: "bas-item" + (sub ? " bas-item--sub" : "") + (active ? " is-active" : ""),
         "data-testid": `sidebar-item-${it.id}`,
         "aria-current": active ? "page" : void 0,
+        "aria-label": railed && !sub ? it.label : void 0,
         title: it.label,
         children: [
-          active ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__bar" }) : null,
+          active && !sub ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__bar" }) : null,
           it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
           /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__label", children: it.label }),
           badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
@@ -290,22 +352,84 @@ function Sidebar(p) {
       it.id
     );
   };
+  const parent = (it) => {
+    const children = it.children;
+    const onPage = childActive(it) || isActivePath(it.href, p.currentPath);
+    const open = railed ? flyout?.id === it.id : openItems.has(it.id);
+    const onClick = (e) => {
+      if (!railed) return toggleItem(it.id);
+      if (flyout?.id === it.id) return setFlyout(null);
+      const r = e.currentTarget.getBoundingClientRect();
+      setFlyout({ id: it.id, top: r.top, left: r.right + 6 });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-itemgroup", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          class: "bas-item bas-item--parent" + (onPage ? " is-parent-active" : ""),
+          "data-testid": `sidebar-item-${it.id}-toggle`,
+          "data-flyout-for": it.id,
+          "aria-expanded": open,
+          "aria-label": railed ? it.label : void 0,
+          title: it.label,
+          onClick,
+          children: [
+            onPage && railed ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__bar" }) : null,
+            it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__label", children: it.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__chev", children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { open }) })
+          ]
+        }
+      ),
+      !railed && open ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sub", children: children.map((c) => leaf(c, true)) }) : null,
+      railed && flyout?.id === it.id ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: flyoutRef,
+          class: "bas-flyout",
+          "data-testid": `sidebar-flyout-${it.id}`,
+          role: "menu",
+          "aria-label": it.label,
+          style: { top: `${flyout.top}px`, left: `${flyout.left}px` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-flyout__title", children: it.label }),
+            children.map((c) => leaf(c, true))
+          ]
+        }
+      ) : null
+    ] }, it.id);
+  };
+  const item = (it) => it.children?.length ? parent(it) : leaf(it);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     mode === "drawer" ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-backdrop" + (p.mobileOpen ? " is-open" : ""), "data-testid": "sidebar-backdrop", onClick: close }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
-        class: `bas-sidebar is-mobile-${mode}` + (p.mobileOpen ? " is-open" : "") + (p.collapsed ? " is-collapsed" : ""),
+        class: `bas-sidebar is-mobile-${mode}` + (p.mobileOpen ? " is-open" : "") + (p.collapsed ? " is-collapsed" : "") + (railed ? " is-railed" : ""),
         "data-testid": "sidebar-root",
         "data-mobile": mode,
+        "data-collapse": collapseMode,
         "aria-label": "Navigation",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-sidebar__head", children: [
-            p.header ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__brand", children: p.header }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-            p.onToggleCollapse ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-iconbtn bas-collapse", "data-testid": "sidebar-collapse", "aria-label": t.collapse, title: t.collapse, onClick: p.onToggleCollapse, children: /* @__PURE__ */ jsxRuntime.jsx(IconCollapse, {}) }) : null
-          ] }),
+          p.header || p.brandMark ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-sidebar__head", children: [
+            p.header ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": "sidebar-brand-home", children: p.header }) : p.header }) : null,
+            p.brandMark ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__mark", "data-testid": "sidebar-brand-mark", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(
+              NavLink,
+              {
+                href: p.homeHref,
+                onNavigate: p.onNavigate,
+                onAfter: close,
+                class: "bas-home",
+                "data-testid": "brand-mark-home",
+                "aria-label": p.homeLabel ?? TEXT[p.lang].home,
+                title: p.homeLabel ?? TEXT[p.lang].home,
+                children: p.brandMark
+              }
+            ) : p.brandMark }) : null
+          ] }) : null,
           /* @__PURE__ */ jsxRuntime.jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
-            const open = !folded.has(g.label);
+            const open = railed || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-group", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
@@ -593,7 +717,7 @@ function TopBar(p) {
   const t = TEXT[p.lang];
   return /* @__PURE__ */ jsxRuntime.jsx("header", { class: "bas-topbar", "data-testid": "topbar-root", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-topbar__inner", children: [
     p.onOpenMenu ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-iconbtn bas-hamburger", "data-testid": "sidebar-toggle", "aria-label": t.openMenu, onClick: p.onOpenMenu, children: /* @__PURE__ */ jsxRuntime.jsx(IconMenu, {}) }) : null,
-    p.brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-topbar__brand", children: p.brand }) : null,
+    p.brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-topbar__brand", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: p.onHome, class: "bas-home", "data-testid": "brand-home", children: p.brand }) : p.brand }) : null,
     p.actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-topbar__actions", children: p.actions }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-spacer" }),
     /* @__PURE__ */ jsxRuntime.jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
@@ -604,7 +728,7 @@ function PageHeader(p) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pagehead", "data-testid": "page-header", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pagehead__text", children: [
       p.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-pagehead__eyebrow", children: p.eyebrow }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { class: "bas-pagehead__title", children: p.title }),
+      p.title != null && p.title !== "" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { class: "bas-pagehead__title", children: p.title }) : null,
       p.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { class: "bas-pagehead__desc", children: p.description }) : null
     ] }),
     p.actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-pagehead__actions", children: p.actions }) : null
@@ -628,21 +752,29 @@ function PageTabs(p) {
 function AppShell(p) {
   const prefix = p.storageKey ?? "broberg-app-shell";
   const mode = p.mobile ?? "drawer";
+  const collapse = p.collapse ?? (mode === "rail" ? "icon" : "offcanvas");
   const [collapsed, setCollapsed] = hooks.useState(() => readFlag(`${prefix}.collapsed`, false));
   const [drawer, setDrawer] = hooks.useState(false);
+  const isMobile = useIsMobile();
   const t = TEXT[p.lang];
   const toggle = () => {
     const next = !collapsed;
     setCollapsed(next);
     writeFlag(`${prefix}.collapsed`, next);
   };
+  const drawerMode = isMobile && mode === "drawer";
+  const onTrigger = () => drawerMode ? setDrawer(!drawer) : toggle();
+  const expanded = drawerMode ? drawer : !collapsed;
+  const triggerLabel = drawerMode ? drawer ? t.closeMenu : t.openMenu : collapsed ? t.expand : t.collapse;
+  const heading = p.title ?? activeNavLabel(p.groups, p.footer, p.currentPath);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TopBar,
       {
         brand: p.brand,
+        homeHref: p.homeHref,
+        onHome: () => setDrawer(false),
         actions: p.actions,
-        onOpenMenu: mode === "drawer" ? () => setDrawer(true) : void 0,
         notifications: p.notifications,
         user: p.user,
         userMenu: p.userMenu,
@@ -659,17 +791,41 @@ function AppShell(p) {
           currentPath: p.currentPath,
           onNavigate: p.onNavigate,
           collapsed,
-          onToggleCollapse: toggle,
+          collapse,
+          brandMark: p.brandMark,
+          homeHref: p.homeHref,
+          homeLabel: p.homeLabel,
           mobileOpen: drawer,
           onClose: () => setDrawer(false),
           mobile: mode,
           header: mode === "drawer" ? p.brand : void 0,
           groupsKey: `${prefix}.groups`,
+          itemsKey: `${prefix}.items`,
           lang: p.lang
         }
       ),
-      collapsed && mode === "drawer" ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-iconbtn bas-expand", "data-testid": "sidebar-expand", "aria-label": t.expand, title: t.expand, onClick: toggle, children: /* @__PURE__ */ jsxRuntime.jsx(IconExpand, {}) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("main", { class: "bas-main", "data-testid": "app-content", children: p.children })
+      /* @__PURE__ */ jsxRuntime.jsxs("main", { class: "bas-main", "data-testid": "app-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-contenthead", "data-testid": "content-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              class: "bas-iconbtn bas-trigger",
+              "data-testid": "sidebar-trigger",
+              "aria-label": triggerLabel,
+              "aria-expanded": expanded,
+              title: triggerLabel,
+              onClick: onTrigger,
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconPanelLeft, {})
+            }
+          ),
+          heading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
+          ] }) : null
+        ] }),
+        p.children
+      ] })
     ] })
   ] });
 }
@@ -683,6 +839,7 @@ exports.Sidebar = Sidebar;
 exports.TEXT = TEXT;
 exports.TopBar = TopBar;
 exports.UserMenu = UserMenu;
+exports.activeNavLabel = activeNavLabel;
 exports.badgeLabel = badgeLabel;
 exports.createFetchNotificationSource = createFetchNotificationSource;
 exports.createMemoryNotificationSource = createMemoryNotificationSource;