@meith/theme-clubhouse 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 +4 -4
- package/src/slots/header.tsx +31 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meith/theme-clubhouse",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "A sports club theme for Meith — GAA, soccer, basketball — painted from the club's own two colours.",
|
|
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.
|
|
24
|
-
"@meith/theme-kit": "^0.
|
|
25
|
-
"@meith/ui": "^0.
|
|
23
|
+
"@meith/theme-default": "^0.10.0",
|
|
24
|
+
"@meith/theme-kit": "^0.10.0",
|
|
25
|
+
"@meith/ui": "^0.10.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": "^19.2.0"
|
package/src/slots/header.tsx
CHANGED
|
@@ -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 { ClubRule, Crest, HEADING, PAGE, TAB } from '../shared'
|
|
5
5
|
|
|
@@ -34,6 +34,26 @@ function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'
|
|
|
34
34
|
)
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'] }) {
|
|
38
|
+
if (items === undefined || items.length === 0) return null
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<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">
|
|
42
|
+
{items.map((child) => (
|
|
43
|
+
<li key={child.href}>
|
|
44
|
+
<a
|
|
45
|
+
href={child.href}
|
|
46
|
+
{...linkTarget(child)}
|
|
47
|
+
className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
48
|
+
>
|
|
49
|
+
{child.label}
|
|
50
|
+
</a>
|
|
51
|
+
</li>
|
|
52
|
+
))}
|
|
53
|
+
</ul>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
37
57
|
export function Header({
|
|
38
58
|
boardTitle,
|
|
39
59
|
homeHref,
|
|
@@ -44,6 +64,8 @@ export function Header({
|
|
|
44
64
|
}: HeaderModel & { copy: SlotCopy }) {
|
|
45
65
|
const c = (key: string) => fromSlotCopy(copy, `clubhouse.header.${key}`)
|
|
46
66
|
|
|
67
|
+
const opensMenus = navigation.some((item) => item.submenu !== undefined)
|
|
68
|
+
|
|
47
69
|
return (
|
|
48
70
|
<header className="bg-card">
|
|
49
71
|
<div className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3`}>
|
|
@@ -61,15 +83,21 @@ export function Header({
|
|
|
61
83
|
{navigation.length > 0 && (
|
|
62
84
|
<nav aria-label={c('boardSections')} className="border-b border-border bg-surface">
|
|
63
85
|
<div className={PAGE}>
|
|
64
|
-
<ul
|
|
86
|
+
<ul
|
|
87
|
+
className={`-mx-4 flex items-stretch px-4 sm:-mx-6 sm:px-6 ${
|
|
88
|
+
opensMenus ? 'flex-wrap' : 'overflow-x-auto'
|
|
89
|
+
}`}
|
|
90
|
+
>
|
|
65
91
|
{navigation.map((item) => (
|
|
66
|
-
<li key={item.href} className="shrink-0">
|
|
92
|
+
<li key={item.href} className="group relative shrink-0">
|
|
67
93
|
<a
|
|
68
94
|
href={item.href}
|
|
95
|
+
{...linkTarget(item)}
|
|
69
96
|
className={`${TAB} border-b-2 border-b-transparent text-muted-foreground hover:border-b-secondary hover:bg-primary hover:text-primary-foreground`}
|
|
70
97
|
>
|
|
71
98
|
{item.label}
|
|
72
99
|
</a>
|
|
100
|
+
<Submenu items={item.submenu} />
|
|
73
101
|
</li>
|
|
74
102
|
))}
|
|
75
103
|
</ul>
|