srcdev-nuxt-components 9.0.17 → 9.0.18
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.
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# NavigationHorizontal
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
A horizontal navigation bar that renders a flat list of links with an animated glow/underline effect on the active link. Fully themeable via CSS custom properties.
|
|
6
|
+
|
|
7
|
+
## Types
|
|
8
|
+
|
|
9
|
+
Import from the layer package root — do **not** use `~/types/...` (that resolves to the consuming app, not the layer):
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import type { NavItemData } from "srcdev-nuxt-components"
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
interface NavItem {
|
|
17
|
+
text: string;
|
|
18
|
+
href?: string;
|
|
19
|
+
isExternal?: boolean; // adds target="_blank" rel behaviour via NuxtLink
|
|
20
|
+
iconName?: string; // icon set name, rendered as <Icon name="icon-{iconName}" />
|
|
21
|
+
cssName?: string; // extra CSS class on the <li>
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface NavItemData {
|
|
25
|
+
[key: string]: NavItem[]; // key name is arbitrary; component reads navItemData.main
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Important:** The component only iterates `navItemData.main`. Other keys in the object are ignored unless you fork the component.
|
|
30
|
+
|
|
31
|
+
## Props
|
|
32
|
+
|
|
33
|
+
| Prop | Type | Default | Description |
|
|
34
|
+
|------|------|---------|-------------|
|
|
35
|
+
| `navItemData` | `NavItemData` | required | Navigation link data |
|
|
36
|
+
| `tag` | `"ul" \| "ol" \| "div"` | `"ul"` | HTML element for the list |
|
|
37
|
+
| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root `<nav>` |
|
|
38
|
+
|
|
39
|
+
## Basic usage
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<NavigationHorizontal :nav-item-data="navLinks" />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import type { NavItemData } from "srcdev-nuxt-components"
|
|
47
|
+
|
|
48
|
+
const navLinks: NavItemData = {
|
|
49
|
+
main: [
|
|
50
|
+
{ text: "Home", href: "/" },
|
|
51
|
+
{ text: "Services", href: "/services/" },
|
|
52
|
+
{ text: "Contact", href: "/contact" },
|
|
53
|
+
{ text: "GitHub", href: "https://github.com/example", isExternal: true },
|
|
54
|
+
],
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## CSS token API
|
|
59
|
+
|
|
60
|
+
Override these custom properties on a wrapping selector to theme the nav without touching component internals:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
.your-wrapper {
|
|
64
|
+
/* Colours */
|
|
65
|
+
--nav-active-colour: lime; /* glow + border-bottom colour on hover/focus */
|
|
66
|
+
--nav-link-colour: hsl(0 0% 100%); /* link text colour */
|
|
67
|
+
--nav-link-bg: hsl(0 0% 20%); /* link background */
|
|
68
|
+
--nav-border-colour: hsl(0 0% 100% / 0.2); /* top/bottom border on the list */
|
|
69
|
+
|
|
70
|
+
/* Borders */
|
|
71
|
+
--nav-border-start: 0px; /* block-start border thickness */
|
|
72
|
+
--nav-border-end: 3px; /* block-end border thickness */
|
|
73
|
+
|
|
74
|
+
/* Layout */
|
|
75
|
+
--nav-list-padding: 2rem;
|
|
76
|
+
--nav-list-gap: 1rem;
|
|
77
|
+
--nav-link-padding-block: 0.5rem;
|
|
78
|
+
--nav-link-padding-inline: 1rem;
|
|
79
|
+
--nav-link-border-radius: 0.2rem;
|
|
80
|
+
|
|
81
|
+
/* Glow effect */
|
|
82
|
+
--nav-glow-pos-x: 50%;
|
|
83
|
+
--nav-glow-pos-y: 100%;
|
|
84
|
+
--nav-glow-inner-stop: 10%;
|
|
85
|
+
--nav-glow-outer-stop: 75%;
|
|
86
|
+
--nav-glow-size: 32px;
|
|
87
|
+
--nav-glow-opacity: 0.5;
|
|
88
|
+
--nav-anchor-offset: 40px;
|
|
89
|
+
|
|
90
|
+
/* Animation */
|
|
91
|
+
--nav-transition-duration: 300ms;
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Notes
|
|
96
|
+
|
|
97
|
+
- The glow effect uses CSS Anchor Positioning (`anchor-name`, `position-anchor`). The layer ships `@oddbird/css-anchor-positioning` as a polyfill for browsers that don't support it yet.
|
|
98
|
+
- The `--nav-active-colour` token drives both the border-bottom and the radial glow — set it to your brand accent colour.
|
|
99
|
+
- `isExternal: true` on a `NavItem` passes `:external="true"` to `<NuxtLink>`, which adds `target="_blank"` and `rel="noopener noreferrer"` automatically.
|
package/.claude/skills/index.md
CHANGED
|
@@ -43,7 +43,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
|
|
|
43
43
|
├── services-section.md — ServicesSection props, summary-link/cta slots, summary vs full mode
|
|
44
44
|
├── contact-section.md — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
|
|
45
45
|
├── stepper-list.md — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
|
|
46
|
-
|
|
46
|
+
├── expanding-panel.md — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
|
|
47
|
+
└── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
|
|
47
48
|
```
|
|
48
49
|
|
|
49
50
|
## Skill file template
|