@meith/theme-raidframe 0.35.0 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-raidframe",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "A gaming theme for Meith — guild, raid and match boards — 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 {
@@ -92,7 +93,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['raidframe.header.sectionsAriaLabel'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['raidframe.header.sectionsAriaLabel']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
@@ -149,7 +150,7 @@ export function paginationCopy(t: Translator): SlotCopy {
 }
 
 export function panelNavCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['raidframe.panelNav.waiting'])
+  return { ...mobilePanelNavCopy(t), ...copyFor(t, ['raidframe.panelNav.waiting']) }
 }
 
 export function panelPageCopy(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'
 
@@ -51,88 +52,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 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:bg-secondary hover:text-primary"
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="raidframe-header-submenu" className="group/submenu">
-        <summary className="flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none hover:bg-secondary hover:text-primary">
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate normal-case tracking-normal hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="ml-3 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 px-3.5 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:bg-secondary hover:text-primary"
-              >
-                {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,
@@ -155,26 +74,7 @@ export function Header({
         </a>
         <div className="flex min-w-0 items-center gap-3">
           {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={`border border-border bg-card text-foreground hover:border-primary/60 hover:text-primary group-open/menu:border-primary group-open/menu:text-primary 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="flex flex-col gap-0.5 px-4 py-2">
-                    {navigation.map((item) => (
-                      <MobileNavItem key={item.href} item={item} />
-                    ))}
-                  </ul>
-                </div>
-              </details>
-            </nav>
-          )}
+          <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
         </div>
       </div>
 

package/src/slots/panel-nav.tsx

@@ -1,3 +1,4 @@
+import { MobilePanelNav } from '@meith/theme-default'
 import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 
@@ -105,6 +106,7 @@ function Sections({
 }
 
 export function PanelNav({
+  panel,
   label,
   sections,
   currentTitle,
@@ -112,16 +114,13 @@ export function PanelNav({
 }: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
-      <details className="border border-border bg-card lg:hidden">
-        <summary className="flex cursor-pointer items-center justify-between gap-2 bg-surface px-3 py-2">
-          <span className={`${MICRO} text-foreground`}>{label}</span>
-          {currentTitle !== null && <span className={MICRO}>{currentTitle}</span>}
-        </summary>
-        <div className={RULE} aria-hidden="true" />
-        <div className="p-2">
-          <Sections label={label} sections={sections} copy={copy} />
-        </div>
-      </details>
+      <MobilePanelNav
+        panel={panel}
+        label={label}
+        sections={sections}
+        currentTitle={currentTitle}
+        copy={copy}
+      />
 
       <div className="hidden border border-border bg-card shadow-elevation lg:block">
         <p className={`${MICRO} border-b border-border bg-surface px-3 py-2 text-foreground`}>

package/src/theme.ts

@@ -73,7 +73,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const raidframeTheme = defineTheme({
   key: 'raidframe',
   title: 'Raidframe',
-  version: '0.35.0',
+  version: '0.36.0',
   extends: defaultTheme,
   slots: {
     Shell,