@meith/theme-clubhouse 0.35.0 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-clubhouse",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "A sports club theme for Meith — GAA, soccer, basketball — painted from the club's own two colours.",
   "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 } from '@meith/theme-default'
 import type { SlotCopy, Translator } from '@meith/theme-kit'
 
 function copyFor(t: Translator, keys: readonly string[]): SlotCopy {
@@ -71,7 +72,7 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['clubhouse.header.boardSections'])
+  return { ...mobileHeaderNavCopy(t), ...copyFor(t, ['clubhouse.header.boardSections']) }
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {

package/src/shared.tsx

@@ -34,10 +34,10 @@ export const TAB =
   'inline-flex h-11 items-center px-3.5 text-sm font-bold tracking-[0.03em] whitespace-nowrap uppercase transition-colors'
 
 export const BUTTON =
-  'inline-flex h-8 items-center rounded-sm px-3 text-[0.6875rem] font-bold tracking-[0.08em] whitespace-nowrap uppercase transition-colors'
+  'inline-flex h-8 pointer-coarse:min-h-11 items-center rounded-sm px-3 text-[0.6875rem] font-bold tracking-[0.08em] whitespace-nowrap uppercase transition-colors'
 
 export const TABLE_ROW =
-  'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 px-4 py-2.5 md:grid-cols-[auto_minmax(0,1fr)_4.5rem_4.5rem_14rem] md:items-center'
+  'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5 px-4 py-2.5 @3xl/card:grid-cols-[auto_minmax(0,1fr)_4.5rem_4.5rem_14rem] @3xl/card:items-center'
 
 export function ClubBar({ className }: { className?: string }) {
   return (
@@ -72,7 +72,7 @@ export function ColumnHeads({
   return (
     <div
       aria-hidden="true"
-      className={`hidden border-b-2 border-b-secondary bg-surface md:grid ${TABLE_ROW} py-1.5`}
+      className={`hidden border-b-2 border-b-secondary bg-surface @3xl/card:grid ${TABLE_ROW} py-1.5`}
     >
       <span />
       <span className={MICRO}>{first}</span>

package/src/slots/forum-row.tsx

@@ -41,18 +41,18 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
 
       {!isLink && (
         <>
-          <span className="col-start-2 md:col-start-3 md:block md:text-right">
+          <span className="col-start-2 @3xl/card:col-start-3 @3xl/card:block @3xl/card:text-right">
             <Tally value={forum.threadCount} label={c('threads')} />
-            <span className="ms-3 md:hidden">
+            <span className="ms-3 @3xl/card:hidden">
               <Tally value={forum.postCount} label={c('posts')} />
             </span>
           </span>
 
-          <span className="hidden md:block md:text-right">
+          <span className="hidden @3xl/card:block @3xl/card:text-right">
             <Tally value={forum.postCount} label={c('posts')} />
           </span>
 
-          <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
+          <div className="col-start-2 min-w-0 text-xs text-muted-foreground @3xl/card:col-start-5">
             {forum.lastPost === null ? (
               <span className={MICRO}>{c('noPostsYet')}</span>
             ) : (

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'
 
@@ -54,90 +55,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={`${HEADING} flex min-h-11 items-center px-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground`}
-        >
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="clubhouse-header-submenu" className="group/submenu">
-        <summary
-          className={`${HEADING} flex min-h-11 cursor-default list-none items-center justify-between gap-2 px-2.5 text-sm 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 px-2.5 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,
@@ -161,26 +78,7 @@ export function Header({
         </a>
         <div className="flex min-w-0 items-center gap-3">
           {children}
-          {navigation.length > 0 && (
-            <nav aria-label={c('boardSections')} data-nav-view="mobile" className="lg:hidden">
-              <details data-nav-disclosure className="group/menu">
-                <summary
-                  className={`rounded-md border border-border text-foreground transition-colors hover:bg-primary hover:text-primary-foreground group-open/menu:bg-primary group-open/menu:text-primary-foreground 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('boardSections')}</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>
 

package/src/slots/thread-row.tsx

@@ -62,18 +62,18 @@ export function ThreadRow({
         </p>
       </div>
 
-      <span className="col-start-2 md:col-start-3 md:block md:text-right">
+      <span className="col-start-2 @3xl/card:col-start-3 @3xl/card:block @3xl/card:text-right">
         <Tally value={thread.replyCount} label={c('replies')} />
-        <span className="ms-3 md:hidden">
+        <span className="ms-3 @3xl/card:hidden">
           <Tally value={thread.viewCount} label={c('views')} />
         </span>
       </span>
 
-      <span className="hidden md:block md:text-right">
+      <span className="hidden @3xl/card:block @3xl/card:text-right">
         <Tally value={thread.viewCount} label={c('views')} />
       </span>
 
-      <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
+      <div className="col-start-2 min-w-0 text-xs text-muted-foreground @3xl/card:col-start-5">
         {thread.lastPost === null ? (
           <span className={MICRO}>{c('noRepliesYet')}</span>
         ) : (

package/src/theme.ts

@@ -51,7 +51,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const clubhouseTheme = defineTheme({
   key: 'clubhouse',
   title: 'Clubhouse',
-  version: '0.35.0',
+  version: '0.36.0',
   extends: defaultTheme,
   slots: {
     Shell,