@claralight-design/abweb-navbar 0.2.0 → 0.2.1
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/NavHeader.module.css +19 -5
- package/NavHeader.tsx +82 -37
- package/package.json +1 -1
package/NavHeader.module.css
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
30
30
|
align-items: center;
|
|
31
31
|
overflow: hidden;
|
|
32
|
-
padding: 3px 6px 6px;
|
|
32
|
+
padding: 3px 6px 6px calc(6px + var(--nav-header-left-padding, 0px));
|
|
33
33
|
border-radius: 48px;
|
|
34
34
|
gap: 12px;
|
|
35
35
|
transform: translateY(0);
|
|
@@ -185,6 +185,12 @@
|
|
|
185
185
|
display: inline-flex;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
+
.navCustomItem {
|
|
189
|
+
display: inline-flex;
|
|
190
|
+
align-items: center;
|
|
191
|
+
min-height: 40px;
|
|
192
|
+
}
|
|
193
|
+
|
|
188
194
|
.navLink {
|
|
189
195
|
corner-shape: unset;
|
|
190
196
|
min-height: 40px;
|
|
@@ -235,7 +241,7 @@
|
|
|
235
241
|
font-weight: 600;
|
|
236
242
|
}
|
|
237
243
|
|
|
238
|
-
.desktopLabel svg {
|
|
244
|
+
.desktopLabel svg.logotype, .desktopLabel :global(svg.logotype) {
|
|
239
245
|
max-height: 12px;
|
|
240
246
|
}
|
|
241
247
|
|
|
@@ -329,7 +335,7 @@
|
|
|
329
335
|
justify-content: center;
|
|
330
336
|
min-height: 72px;
|
|
331
337
|
height: 72px;
|
|
332
|
-
padding: 11px
|
|
338
|
+
padding: 11px 28px 11px 0px;
|
|
333
339
|
border: none;
|
|
334
340
|
border-radius: calc(var(--radius-root) * 1.55);
|
|
335
341
|
background: transparent;
|
|
@@ -338,15 +344,23 @@
|
|
|
338
344
|
box-sizing: border-box;
|
|
339
345
|
gap: 12px;
|
|
340
346
|
user-select: none;
|
|
341
|
-
transition: background 0.2s ease-out, opacity 0.2s ease, transform 0.15s ease;
|
|
347
|
+
transition: background 0.2s ease-out, opacity 0.2s ease, transform 0.15s ease, padding 0.2s ease-in-out;
|
|
342
348
|
font-size: 30px;
|
|
343
349
|
font-weight: 600;
|
|
344
350
|
cursor: pointer;
|
|
345
351
|
font-family: inherit;
|
|
346
352
|
}
|
|
347
353
|
|
|
354
|
+
.menuCustomItem {
|
|
355
|
+
width: 100%;
|
|
356
|
+
display: inline-flex;
|
|
357
|
+
align-items: center;
|
|
358
|
+
justify-content: center;
|
|
359
|
+
}
|
|
360
|
+
|
|
348
361
|
.menuLink:hover {
|
|
349
362
|
color: var(--color-text);
|
|
363
|
+
padding: 11px 11px 11px 11px;
|
|
350
364
|
}
|
|
351
365
|
|
|
352
366
|
.menuItemMarker {
|
|
@@ -440,4 +454,4 @@
|
|
|
440
454
|
.menuItemMarker {
|
|
441
455
|
transition: none;
|
|
442
456
|
}
|
|
443
|
-
}
|
|
457
|
+
}
|
package/NavHeader.tsx
CHANGED
|
@@ -15,6 +15,7 @@ export type NavHeaderItem = {
|
|
|
15
15
|
ariaLabel: string
|
|
16
16
|
href?: string
|
|
17
17
|
external?: boolean
|
|
18
|
+
hideInMobileMenu?: boolean
|
|
18
19
|
active?: boolean
|
|
19
20
|
matchPath?: string
|
|
20
21
|
onClick?: (
|
|
@@ -29,6 +30,7 @@ export type NavHeaderProps = {
|
|
|
29
30
|
variant?: 'default' | 'docs' | (string & {})
|
|
30
31
|
showHeaderBlur?: boolean
|
|
31
32
|
navItems?: NavHeaderItem[]
|
|
33
|
+
leftPadding?: number | string
|
|
32
34
|
leftSlot?: React.ReactNode
|
|
33
35
|
logo?: React.ReactNode
|
|
34
36
|
brandName?: string
|
|
@@ -94,6 +96,14 @@ const renderDesktopItem = (
|
|
|
94
96
|
)
|
|
95
97
|
}
|
|
96
98
|
|
|
99
|
+
if (!item.onClick) {
|
|
100
|
+
return (
|
|
101
|
+
<div className={styles.navCustomItem} aria-label={item.ariaLabel}>
|
|
102
|
+
{renderItemLabel(item)}
|
|
103
|
+
</div>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
|
|
97
107
|
return (
|
|
98
108
|
<button
|
|
99
109
|
type='button'
|
|
@@ -118,7 +128,9 @@ const renderMobileItem = (
|
|
|
118
128
|
const content = (
|
|
119
129
|
<>
|
|
120
130
|
<span aria-hidden className={styles.menuItemMarker}>
|
|
121
|
-
/
|
|
131
|
+
<svg height="23" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
132
|
+
<path d="M2.21289 12H0.291016L5.73047 0H7.65234L2.21289 12Z" fill="white" fill-opacity="0.5" />
|
|
133
|
+
</svg>
|
|
122
134
|
</span>
|
|
123
135
|
<span className={styles.menuLabel}>{renderItemLabel(item)}</span>
|
|
124
136
|
</>
|
|
@@ -139,6 +151,14 @@ const renderMobileItem = (
|
|
|
139
151
|
)
|
|
140
152
|
}
|
|
141
153
|
|
|
154
|
+
if (!item.onClick) {
|
|
155
|
+
return (
|
|
156
|
+
<div className={styles.menuCustomItem} aria-label={item.ariaLabel}>
|
|
157
|
+
{renderItemLabel(item)}
|
|
158
|
+
</div>
|
|
159
|
+
)
|
|
160
|
+
}
|
|
161
|
+
|
|
142
162
|
return (
|
|
143
163
|
<button
|
|
144
164
|
type='button'
|
|
@@ -156,6 +176,7 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
156
176
|
variant = 'default',
|
|
157
177
|
showHeaderBlur = true,
|
|
158
178
|
navItems = [],
|
|
179
|
+
leftPadding = 0,
|
|
159
180
|
leftSlot,
|
|
160
181
|
logo,
|
|
161
182
|
brandName = 'Brand',
|
|
@@ -167,8 +188,13 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
167
188
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
168
189
|
|
|
169
190
|
const resolvedLabels = { ...DEFAULT_LABELS, ...labels }
|
|
170
|
-
const
|
|
191
|
+
const desktopNavItems = navItems
|
|
192
|
+
const mobileNavItems = navItems.filter((item) => !item.hideInMobileMenu)
|
|
193
|
+
const hasDesktopNavItems = desktopNavItems.length > 0
|
|
194
|
+
const hasMobileNavItems = mobileNavItems.length > 0
|
|
171
195
|
const resolvedLogoAriaLabel = logoAriaLabel ?? brandName
|
|
196
|
+
const resolvedLeftPadding =
|
|
197
|
+
typeof leftPadding === 'number' ? `${leftPadding}px` : leftPadding
|
|
172
198
|
|
|
173
199
|
const brandContent = logo ?? <span className={styles.brandName}>{brandName}</span>
|
|
174
200
|
|
|
@@ -179,8 +205,15 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
179
205
|
data-variant={variant}
|
|
180
206
|
>
|
|
181
207
|
{showHeaderBlur && <BlurEffect className={styles.blurEffect} position="top" intensity={100} aria-hidden />}
|
|
182
|
-
<header
|
|
183
|
-
{
|
|
208
|
+
<header
|
|
209
|
+
className={styles.inner}
|
|
210
|
+
style={
|
|
211
|
+
{
|
|
212
|
+
'--nav-header-left-padding': resolvedLeftPadding,
|
|
213
|
+
} as React.CSSProperties
|
|
214
|
+
}
|
|
215
|
+
>
|
|
216
|
+
{hasMobileNavItems && (
|
|
184
217
|
<div className={styles.mobileMenu}>
|
|
185
218
|
<Drawer.Root
|
|
186
219
|
open={menuOpen}
|
|
@@ -224,7 +257,7 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
224
257
|
className={styles.menuNav}
|
|
225
258
|
aria-label={resolvedLabels.menu}
|
|
226
259
|
>
|
|
227
|
-
{
|
|
260
|
+
{mobileNavItems.map((item) => {
|
|
228
261
|
const key =
|
|
229
262
|
item.id ??
|
|
230
263
|
item.href ??
|
|
@@ -241,14 +274,26 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
241
274
|
)
|
|
242
275
|
)
|
|
243
276
|
|
|
277
|
+
if (item.href || item.onClick) {
|
|
278
|
+
return (
|
|
279
|
+
<Drawer.Close asChild key={key}>
|
|
280
|
+
{renderMobileItem(
|
|
281
|
+
item,
|
|
282
|
+
styles.menuLink,
|
|
283
|
+
isActive
|
|
284
|
+
)}
|
|
285
|
+
</Drawer.Close>
|
|
286
|
+
)
|
|
287
|
+
}
|
|
288
|
+
|
|
244
289
|
return (
|
|
245
|
-
<
|
|
290
|
+
<div key={key}>
|
|
246
291
|
{renderMobileItem(
|
|
247
292
|
item,
|
|
248
293
|
styles.menuLink,
|
|
249
294
|
isActive
|
|
250
295
|
)}
|
|
251
|
-
</
|
|
296
|
+
</div>
|
|
252
297
|
)
|
|
253
298
|
})}
|
|
254
299
|
</nav>
|
|
@@ -280,39 +325,39 @@ const NavHeader: React.FC<NavHeaderProps> = ({
|
|
|
280
325
|
</div>
|
|
281
326
|
</div>
|
|
282
327
|
|
|
283
|
-
{
|
|
328
|
+
{hasDesktopNavItems && (
|
|
284
329
|
<>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
330
|
+
<span className={styles.dividingLine} />
|
|
331
|
+
<nav
|
|
332
|
+
className={styles.desktopNav}
|
|
333
|
+
aria-label={resolvedLabels.menu}
|
|
334
|
+
>
|
|
335
|
+
<div className={styles.navList}>
|
|
336
|
+
{desktopNavItems.map((item) => {
|
|
337
|
+
const key = item.id ?? item.href ?? item.ariaLabel
|
|
338
|
+
const isActive =
|
|
339
|
+
item.active ??
|
|
340
|
+
Boolean(
|
|
341
|
+
item.href &&
|
|
342
|
+
!item.external &&
|
|
343
|
+
isMenuItemActive(
|
|
344
|
+
currentPath,
|
|
345
|
+
item.matchPath ?? item.href
|
|
346
|
+
)
|
|
301
347
|
)
|
|
302
|
-
)
|
|
303
348
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
349
|
+
return (
|
|
350
|
+
<div className={styles.navItem} key={key}>
|
|
351
|
+
{renderDesktopItem(
|
|
352
|
+
item,
|
|
353
|
+
styles.navLink,
|
|
354
|
+
isActive
|
|
355
|
+
)}
|
|
356
|
+
</div>
|
|
357
|
+
)
|
|
358
|
+
})}
|
|
359
|
+
</div>
|
|
360
|
+
</nav>
|
|
316
361
|
</>
|
|
317
362
|
)}
|
|
318
363
|
</div>
|