@scalio-cloud/ui 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.5.2
+- Navigation items take `match` (further paths that mark the item active), for one menu item over several pages.
+- New `SubNav` (tabs as links on top of a page) and `WorkspaceSwitcher` (Identity / HR in Nexus). No change for
+  apps that do not use them.
+
 ## 0.5.1
 - Phones: the context select (tenant, customer) is hidden in the header below 640px, there is no room next to
   the header buttons. `AppShell` takes `drawerTop` and shows it above the navigation in the phone drawer.

package/README.md

@@ -117,6 +117,12 @@ sidebar renders plain links and marks the item for `activePath`. Item test ids d
 `EmptyState` (children = next step), `Loading`, `Notice` (`info`, `ok`, `warn`, `error`), `StatusBadge`
 (tones `neutral`, `running`, `ok`, `warn`, `error`) and `PageHeader` with `back` for detail pages.
 
+Pages that belong together under one menu item keep their own addresses: the item lists them in `match`
+(`{ to: "/groups", label: "Gruppen", match: ["/teams", "/distribution-lists"] }`, pass `activePath` with
+`link`) and each page shows `<SubNav items={[{ to: "/groups", label: "Sicherheit", end: true }, ...]} link={NavLink} />`
+on top. An app with two work areas (Nexus Identity and HR) puts `<WorkspaceSwitcher options value onSelect />`
+into the sidebar's `top`.
+
 ## Sign-in page and profile (React)
 
 All sign-in pages use the same frame and order: Microsoft first, then "oder mit E-Mail", the password field with

package/nav.css

@@ -32,6 +32,22 @@
 .scalio-nav-item.is-active { border-left-color: hsl(var(--primary)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; }
 .scalio-nav-item.is-bold { font-weight: 700; }
 .scalio-nav-item:focus-visible, .scalio-nav-cta:focus-visible, .scalio-nav-search:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.scalio-workspace { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 0.375rem; background: hsl(var(--border) / 0.6); }
+.scalio-workspace-item {
+  display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.25rem;
+  background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer;
+}
+.scalio-workspace-item.is-active { background: hsl(var(--background)); color: hsl(var(--primary)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
+.scalio-workspace-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-workspace-item .scalio-icon { width: 0.875rem; height: 0.875rem; }
+.scalio-subnav { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; }
+.scalio-subnav-item {
+  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: -1px; white-space: nowrap;
+  border-bottom: 2px solid transparent; font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-decoration: none;
+}
+.scalio-subnav-item:hover { color: hsl(var(--foreground)); }
+.scalio-subnav-item.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-subnav-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
 .scalio-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
 .scalio-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .scalio-nav-badge {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/nav.js

@@ -47,10 +47,12 @@ function NavItem({ item, link, activePath, onNavigate, testIdPrefix }) {
       : null,
   ];
   const testId = itemTestId(item, testIdPrefix);
+  // match: further paths that belong to this item (e.g. "Gruppen" also for /teams); needs activePath.
+  const matched = (item.match || []).some((m) => isActivePath(activePath, m));
   if (link) {
-    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), onClick: onNavigate, "data-testid": testId }, content);
+    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive || matched), onClick: onNavigate, "data-testid": testId }, content);
   }
-  const active = isActivePath(activePath, item.to, item.end);
+  const active = isActivePath(activePath, item.to, item.end) || matched;
   return h("a", { href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, onClick: onNavigate, "data-testid": testId }, content);
 }
 
@@ -140,6 +142,53 @@ function Sidebar(props) {
   );
 }
 
+// Tabs as links on top of a page, for pages that belong together under one menu item
+// (e.g. Gruppen: Sicherheit, Verteiler, Microsoft 365, Teams). Each tab keeps its own address.
+function SubNav({ items, link, activePath, label, testId }) {
+  const visible = (items || []).filter((i) => i && !i.hidden);
+  if (visible.length < 2) return null;
+  return h(
+    "nav",
+    { className: "scalio-subnav", "aria-label": label || undefined, "data-testid": testId || "subnav" },
+    visible.map((item) => {
+      const tid = item.testId || `subnav-${slug(item.to)}`;
+      const cls = (active) => cx("scalio-subnav-item", active && "is-active");
+      const content = [item.label, item.badge != null && item.badge !== false ? h("span", { key: "b", className: "scalio-nav-badge" }, item.badge) : null];
+      if (link) {
+        return h(link, { key: item.to, to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), "data-testid": tid }, content);
+      }
+      const active = isActivePath(activePath, item.to, item.end);
+      return h("a", { key: item.to, href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, "data-testid": tid }, content);
+    })
+  );
+}
+
+// Two (or more) work areas of one app, e.g. Nexus Identity and HR. Sits in the sidebar's top slot.
+// options: [{ id, label, icon }]; onSelect(id) switches (the app navigates).
+function WorkspaceSwitcher({ options, value, onSelect, testIdPrefix, testId }) {
+  const prefix = testIdPrefix || "";
+  if (!options || options.length < 2) return null;
+  return h(
+    "div",
+    { className: "scalio-workspace", role: "group", "data-testid": prefix + (testId || "workspace-switcher") },
+    options.map((o) =>
+      h(
+        "button",
+        {
+          key: o.id,
+          type: "button",
+          className: cx("scalio-workspace-item", o.id === value && "is-active"),
+          "aria-pressed": o.id === value,
+          onClick: () => onSelect && onSelect(o.id),
+          "data-testid": `${prefix}ws-${o.id}`,
+        },
+        o.icon ? h(o.icon, { className: "scalio-icon", "aria-hidden": "true" }) : null,
+        o.label
+      )
+    )
+  );
+}
+
 // "Version 1.2.4 · 3f2a1bc" at the bottom of the sidebar.
 function VersionTag({ version, commit, lang, labels, testId }) {
   const L = labelsFor(lang, labels);
@@ -443,6 +492,8 @@ module.exports = {
   Sidebar,
   NavItem,
   NavDrawer,
+  SubNav,
+  WorkspaceSwitcher,
   AppShell,
   ContextSelect,
   ProductSwitcher,