@meith/theme-default 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Meith's default theme — every slot and every token, and the reference for what a complete theme fills.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.8.0",
-    "@meith/ui": "^0.8.0"
+    "@meith/theme-kit": "^0.10.0",
+    "@meith/ui": "^0.10.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/slots/header.tsx

@@ -1,5 +1,5 @@
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
-import { fromSlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
 import { LINK, PAGE } from '../shared'
 
@@ -25,6 +25,26 @@ function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'
   )
 }
 
+function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'] }) {
+  if (items === undefined || items.length === 0) return null
+
+  return (
+    <ul className="invisible absolute top-full left-0 z-30 min-w-44 rounded-b-md border border-border bg-card py-1 opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+      {items.map((child) => (
+        <li key={child.href}>
+          <a
+            href={child.href}
+            {...linkTarget(child)}
+            className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            {child.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
 export function Header({
   boardTitle,
   homeHref,
@@ -35,6 +55,8 @@ export function Header({
 }: HeaderModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `default.header.${key}`)
 
+  const opensMenus = navigation.some((item) => item.submenu !== undefined)
+
   return (
     <header className="border-b border-border bg-card">
       <div className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3`}>
@@ -50,15 +72,23 @@ export function Header({
       {navigation.length > 0 && (
         <nav aria-label={c('sections')} className="border-t border-border bg-surface">
           <div className={PAGE}>
-            <ul className="-mx-4 flex items-stretch gap-1 overflow-x-auto px-4 text-sm [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:-mx-6 sm:px-6 sm:[mask-image:none]">
+            <ul
+              className={`-mx-4 flex items-stretch gap-1 px-4 text-sm sm:-mx-6 sm:px-6 ${
+                opensMenus
+                  ? 'flex-wrap'
+                  : 'overflow-x-auto [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:[mask-image:none]'
+              }`}
+            >
               {navigation.map((item) => (
-                <li key={item.href} className="shrink-0">
+                <li key={item.href} className="group relative shrink-0">
                   <a
                     href={item.href}
+                    {...linkTarget(item)}
                     className="inline-flex h-10 items-center rounded-t-md border-b-2 border-transparent px-2.5 font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground"
                   >
                     {item.label}
                   </a>
+                  <Submenu items={item.submenu} />
                 </li>
               ))}
             </ul>