@meith/theme-raidframe 0.8.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meith/theme-raidframe",
3
- "version": "0.8.0",
3
+ "version": "0.10.0",
4
4
  "description": "A gaming theme for Meith — guild, raid and match boards — built on the default theme's slots.",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "repository": {
@@ -20,9 +20,9 @@
20
20
  "access": "public"
21
21
  },
22
22
  "dependencies": {
23
- "@meith/theme-default": "^0.8.0",
24
- "@meith/ui": "^0.8.0",
25
- "@meith/theme-kit": "^0.8.0"
23
+ "@meith/ui": "^0.10.0",
24
+ "@meith/theme-kit": "^0.10.0",
25
+ "@meith/theme-default": "^0.10.0"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": "^19.2.0"
@@ -1,5 +1,5 @@
1
1
  import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
2
- import { fromSlotCopy } from '@meith/theme-kit'
2
+ import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
3
3
 
4
4
  import { RULE } from '../shared'
5
5
 
@@ -31,6 +31,26 @@ function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'
31
31
  )
32
32
  }
33
33
 
34
+ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'] }) {
35
+ if (items === undefined || items.length === 0) return null
36
+
37
+ return (
38
+ <ul className="invisible absolute top-full left-0 z-30 min-w-44 rounded-b-md border border-border bg-card py-1 text-sm opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
39
+ {items.map((child) => (
40
+ <li key={child.href}>
41
+ <a
42
+ href={child.href}
43
+ {...linkTarget(child)}
44
+ className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
45
+ >
46
+ {child.label}
47
+ </a>
48
+ </li>
49
+ ))}
50
+ </ul>
51
+ )
52
+ }
53
+
34
54
  export function Header({
35
55
  boardTitle,
36
56
  homeHref,
@@ -62,13 +82,16 @@ export function Header({
62
82
  className="flex flex-wrap border-b border-border bg-card/60"
63
83
  >
64
84
  {navigation.map((item) => (
65
- <a
66
- key={item.href}
67
- href={item.href}
68
- className="border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:border-t-primary hover:bg-secondary hover:text-primary"
69
- >
70
- {item.label}
71
- </a>
85
+ <span key={item.href} className="group relative">
86
+ <a
87
+ href={item.href}
88
+ {...linkTarget(item)}
89
+ className="block border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:border-t-primary hover:bg-secondary hover:text-primary"
90
+ >
91
+ {item.label}
92
+ </a>
93
+ <Submenu items={item.submenu} />
94
+ </span>
72
95
  ))}
73
96
  </nav>
74
97
  )}