@meith/theme-raidframe 0.33.2 → 0.33.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-raidframe",
-  "version": "0.33.2",
+  "version": "0.33.3",
   "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.33.2",
-    "@meith/theme-kit": "^0.33.2",
-    "@meith/ui": "^0.33.2"
+    "@meith/theme-default": "^0.33.3",
+    "@meith/theme-kit": "^0.33.3",
+    "@meith/ui": "^0.33.3"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/slots/board-index.tsx

@@ -18,6 +18,14 @@ export function BoardIndex({
         <div className="flex flex-col gap-4 empty:hidden">{regions.announcements}</div>
       )}
 
+      {markAllReadAction !== null && (
+        <form action={markAllReadAction} method="post" className="self-end">
+          <button type="submit" className={BUTTON}>
+            {c('markAllRead')}
+          </button>
+        </form>
+      )}
+
       <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
         <div className="flex min-w-0 flex-1 flex-col gap-4">{regions.categories}</div>
 
@@ -29,14 +37,6 @@ export function BoardIndex({
       </div>
 
       {regions.plugins}
-
-      {markAllReadAction !== null && (
-        <form action={markAllReadAction} method="post">
-          <button type="submit" className={BUTTON}>
-            {c('markAllRead')}
-          </button>
-        </form>
-      )}
     </div>
   )
 }

package/src/slots/header.tsx

@@ -116,6 +116,23 @@ function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
   )
 }
 
+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,
@@ -127,7 +144,7 @@ export function Header({
   const c = (key: string) => fromSlotCopy(copy, `raidframe.header.${key}`)
 
   return (
-    <header>
+    <header className="relative">
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b border-border bg-surface px-4 py-3">
         <a href={homeHref} className="group inline-flex items-center gap-3 hover:text-primary">
           <span
@@ -136,13 +153,38 @@ export function Header({
           />
           <BoardMark boardTitle={boardTitle} logo={logo} />
         </a>
-        {children}
+        <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>
+          )}
+        </div>
       </div>
 
       <div className={RULE} aria-hidden="true" />
 
       {navigation.length > 0 && (
-        <nav aria-label={c('sectionsAriaLabel')} className="border-b border-border bg-card/60">
+        <nav
+          aria-label={c('sectionsAriaLabel')}
+          className="hidden border-b border-border bg-card/60 lg:block"
+        >
           <div data-nav-view="desktop" className="hidden flex-wrap lg:flex">
             {navigation.map((item) => (
               <span key={item.href} className="group relative">
@@ -157,20 +199,6 @@ export function Header({
               </span>
             ))}
           </div>
-
-          <div data-nav-view="mobile" className="px-4 py-1 lg:hidden">
-            <details data-nav-disclosure className="group">
-              <summary className="flex min-h-11 cursor-default list-none items-center gap-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-foreground uppercase select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none">
-                <Chevron className="size-3 shrink-0 transition-transform group-open:rotate-90" />
-                {c('sectionsAriaLabel')}
-              </summary>
-              <ul className="flex flex-col gap-0.5 pb-2">
-                {navigation.map((item) => (
-                  <MobileNavItem key={item.href} item={item} />
-                ))}
-              </ul>
-            </details>
-          </div>
         </nav>
       )}
     </header>

package/src/slots/panel-shell.tsx

@@ -13,11 +13,15 @@ export function PanelShell({ panel, links, linksLabel, regions, children }: Pane
         {regions.nav}
 
         {links.length > 0 && (
-          <nav aria-label={linksLabel} className="border-t border-border pt-3">
-            <ul className="flex flex-col gap-1">
+          <nav aria-label={linksLabel} className="border border-border bg-card">
+            <p className={`${MICRO} border-b border-border px-3 py-2`}>{linksLabel}</p>
+            <ul className="flex flex-col p-1">
               {links.map((link) => (
                 <li key={link.href}>
-                  <a href={link.href} className={`${MICRO} block hover:text-primary`}>
+                  <a
+                    href={link.href}
+                    className="block px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-surface hover:text-primary"
+                  >
                     {link.label}
                   </a>
                 </li>

package/src/slots/post-bit.tsx

@@ -162,7 +162,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
           </dl>
         </div>
 
-        <div className="min-w-0">
+        <div className="flex min-w-0 flex-col">
           <div className="flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-1.5">
             <Stamp at={post.postedAt} className={`${MICRO} normal-case`} />
             <a
@@ -227,7 +227,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
           )}
 
           {regions.actions !== null && (
-            <div className="border-t border-border bg-surface/60 px-3 py-1.5 empty:hidden">
+            <div className="mt-auto border-t border-border bg-surface/60 px-3 py-1.5 empty:hidden">
               {regions.actions}
             </div>
           )}

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.33.2',
+  version: '0.33.3',
   extends: defaultTheme,
   slots: {
     Shell,