@meith/theme-phasebook 0.35.0 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-phasebook",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "A theme for Meith with a familiar social shape, built on the default theme's slots.",
   "license": "MIT",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.35.0",
-    "@meith/theme-kit": "^0.35.0",
-    "@meith/ui": "^0.35.0"
+    "@meith/theme-default": "^0.36.0",
+    "@meith/theme-kit": "^0.36.0",
+    "@meith/ui": "^0.36.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -1,3 +1,4 @@
+import { mobileHeaderNavCopy, mobilePanelNavCopy } from '@meith/theme-default'
 import type { SlotCopy, Translator } from '@meith/theme-kit'
 
 function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
@@ -77,7 +78,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['phasebook.header.sectionsAriaLabel'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['phasebook.header.sectionsAriaLabel']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
@@ -134,7 +135,7 @@ export function paginationCopy(t: Translator): SlotCopy {
 }
 
 export function panelNavCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['phasebook.panelNav.waiting'])
+  return { ...mobilePanelNavCopy(t), ...copyFor(t, ['phasebook.panelNav.waiting']) }
 }
 
 export function postActionsCopy(t: Translator): SlotCopy {

package/src/slots/header.tsx

@@ -1,3 +1,4 @@
+import { MobileHeaderNav } from '@meith/theme-default'
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
@@ -56,88 +57,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a
-          href={item.href}
-          {...linkTarget(item)}
-          className="flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="phasebook-header-submenu" className="group/submenu">
-        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 rounded-lg px-3 text-sm font-medium text-muted-foreground select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-accent hover:text-foreground">
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 text-muted-foreground transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="ml-2 flex flex-col gap-0.5 border-l border-border py-1 pl-2.5">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a
-                href={child.href}
-                {...linkTarget(child)}
-                className="flex min-h-11 items-center rounded-lg px-3 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -186,26 +105,7 @@ export function Header({
 
         <div className="flex shrink-0 items-center justify-end gap-2">
           {children}
-          {navigation.length > 0 && (
-            <nav aria-label={c('sectionsAriaLabel')} data-nav-view="mobile" className="lg:hidden">
-              <details data-nav-disclosure className="group/menu">
-                <summary
-                  className={`rounded-full text-foreground transition-colors hover:bg-accent group-open/menu:bg-accent flex size-10 cursor-default list-none items-center justify-center select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
-                >
-                  <MenuGlyph />
-                  <span className="sr-only">{c('sectionsAriaLabel')}</span>
-                </summary>
-
-                <div className="absolute inset-x-0 top-full z-30 max-h-[calc(100dvh-4rem)] overflow-y-auto border-b border-border bg-card shadow-elevation">
-                  <ul className={`${PAGE} flex flex-col gap-0.5 py-2`}>
-                    {navigation.map((item) => (
-                      <MobileNavItem key={item.href} item={item} />
-                    ))}
-                  </ul>
-                </div>
-              </details>
-            </nav>
-          )}
+          <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
         </div>
       </div>
     </header>

package/src/slots/panel-nav.tsx

@@ -1,6 +1,7 @@
+import { MobilePanelNav } from '@meith/theme-default'
 import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { cn, Disclosure } from '@meith/ui'
+import { cn } from '@meith/ui'
 
 import { Chip } from '../shared'
 
@@ -98,6 +99,7 @@ function Sections({
 }
 
 export function PanelNav({
+  panel,
   label,
   sections,
   currentTitle,
@@ -105,14 +107,13 @@ export function PanelNav({
 }: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
-      <Disclosure
-        summary={label}
-        className="lg:hidden"
-        contentClassName="p-2"
-        {...(currentTitle === null ? {} : { aside: currentTitle })}
-      >
-        <Sections label={label} sections={sections} copy={copy} />
-      </Disclosure>
+      <MobilePanelNav
+        panel={panel}
+        label={label}
+        sections={sections}
+        currentTitle={currentTitle}
+        copy={copy}
+      />
 
       <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
         <Sections label={label} sections={sections} copy={copy} />

package/src/theme.ts

@@ -70,7 +70,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const phasebookTheme = defineTheme({
   key: 'phasebook',
   title: 'Phasebook',
-  version: '0.35.0',
+  version: '0.36.0',
   extends: defaultTheme,
   slots: {
     Shell,