astro-better-nav-bar 0.1.0 → 0.2.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/NavBar.astro +1 -1
- package/README.md +62 -8
- package/ThemeSelector.astro +20 -12
- package/package.json +1 -1
package/NavBar.astro
CHANGED
|
@@ -37,7 +37,7 @@ const {
|
|
|
37
37
|
const activeDropdowns = dropdowns.filter(d => d.items.length > 0);
|
|
38
38
|
---
|
|
39
39
|
|
|
40
|
-
<div id="main-header" class="nav-header">
|
|
40
|
+
<div id="main-header" class="nav-header" style="background:#0f172a">
|
|
41
41
|
|
|
42
42
|
<!-- Desktop bar (lg and above) -->
|
|
43
43
|
<div class="nav-desktop">
|
package/README.md
CHANGED
|
@@ -119,19 +119,73 @@ import { ThemeSelector } from 'astro-better-nav-bar';
|
|
|
119
119
|
|
|
120
120
|
## Sidebar toggle
|
|
121
121
|
|
|
122
|
-
|
|
122
|
+
The `sidebar-toggle` slot renders at the left of the mobile bar (hidden on desktop). Use it to place a hamburger that opens a collapsible docs sidebar.
|
|
123
|
+
|
|
124
|
+
The recommended approach is CSS-only using a hidden checkbox and `:has()`. No JavaScript required.
|
|
125
|
+
|
|
126
|
+
In your layout:
|
|
123
127
|
|
|
124
128
|
```astro
|
|
129
|
+
---
|
|
130
|
+
// layout.astro
|
|
131
|
+
---
|
|
132
|
+
<!-- checkbox drives sidebar open/close state via CSS :has() -->
|
|
133
|
+
<input type="checkbox" id="nav-sidebar-open" class="nav-sidebar-checkbox" aria-hidden="true">
|
|
134
|
+
|
|
125
135
|
<NavBar ...>
|
|
126
|
-
<
|
|
127
|
-
slot="sidebar-toggle"
|
|
128
|
-
data-widget="visibility-button"
|
|
129
|
-
data-element="side-nav"
|
|
130
|
-
aria-label="Show Menu"
|
|
131
|
-
>
|
|
136
|
+
<label slot="sidebar-toggle" for="nav-sidebar-open" class="nav-sidebar-toggle" aria-label="Open navigation">
|
|
132
137
|
<!-- hamburger icon -->
|
|
133
|
-
|
|
138
|
+
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
|
139
|
+
<path d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 7.75zm0 5a.75.75 0 01.75-.75h12.5a.75.75 0 010 1.5H1.75a.75.75 0 01-.75-.75z"/>
|
|
140
|
+
</svg>
|
|
141
|
+
</label>
|
|
134
142
|
</NavBar>
|
|
143
|
+
|
|
144
|
+
<!-- clicking the backdrop label unchecks the checkbox, closing the sidebar -->
|
|
145
|
+
<label class="sidebar-backdrop" for="nav-sidebar-open" aria-hidden="true"></label>
|
|
146
|
+
|
|
147
|
+
<aside class="doc-sidebar">...</aside>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
In your CSS:
|
|
151
|
+
|
|
152
|
+
```css
|
|
153
|
+
.nav-sidebar-checkbox { position: fixed; opacity: 0; pointer-events: none; width: 0; height: 0; }
|
|
154
|
+
|
|
155
|
+
/* style the label to look like an icon button */
|
|
156
|
+
.nav-sidebar-toggle {
|
|
157
|
+
display: flex;
|
|
158
|
+
align-items: center;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
height: 1.75rem;
|
|
161
|
+
width: 1.75rem;
|
|
162
|
+
border-radius: 0.25rem;
|
|
163
|
+
color: var(--nav-text, #fff);
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
}
|
|
166
|
+
/* hide when sidebar is already visible inline */
|
|
167
|
+
@media (min-width: 769px) { .nav-sidebar-toggle { display: none; } }
|
|
168
|
+
|
|
169
|
+
.sidebar-backdrop {
|
|
170
|
+
display: none;
|
|
171
|
+
position: fixed;
|
|
172
|
+
inset: 0;
|
|
173
|
+
z-index: 39;
|
|
174
|
+
background: rgba(0, 0, 0, 0.4);
|
|
175
|
+
cursor: pointer;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@media (max-width: 768px) {
|
|
179
|
+
.doc-sidebar {
|
|
180
|
+
position: fixed;
|
|
181
|
+
left: 0; top: 3.75rem; bottom: 0;
|
|
182
|
+
z-index: 40;
|
|
183
|
+
transform: translateX(-100%);
|
|
184
|
+
transition: transform 0.2s ease;
|
|
185
|
+
}
|
|
186
|
+
body:has(.nav-sidebar-checkbox:checked) .doc-sidebar { transform: translateX(0); }
|
|
187
|
+
body:has(.nav-sidebar-checkbox:checked) .sidebar-backdrop { display: block; }
|
|
188
|
+
}
|
|
135
189
|
```
|
|
136
190
|
|
|
137
191
|
## CSS custom properties
|
package/ThemeSelector.astro
CHANGED
|
@@ -2,48 +2,56 @@
|
|
|
2
2
|
// standalone theme selector
|
|
3
3
|
// mobile: single icon button that flips light/dark
|
|
4
4
|
// desktop: dropdown with Light / Dark / System options
|
|
5
|
+
// icons: FA7 solid/regular (viewBox 0 0 640 640)
|
|
5
6
|
---
|
|
6
7
|
<nav-theme-selector class="nav-theme-selector">
|
|
7
8
|
|
|
8
9
|
<!-- mobile toggle: shows moon when light, sun when dark -->
|
|
9
10
|
<button type="button" aria-label="Toggle Theme" class="nav-theme-mobile-btn nav-icon-btn">
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
<!-- sun: visible in dark mode (click to go light) -->
|
|
12
|
+
<svg class="nav-theme-sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="20" height="20" aria-hidden="true">
|
|
13
|
+
<path d="M320 32c8.4 0 16.3 4.4 20.6 11.7l55.5 92.6L500.9 110c8.2-2 16.9.4 22.8 6.3s8.3 14.7 6.3 22.8l-26.3 104.7l92.7 55.5c7.2 4.3 11.7 12.2 11.7 20.6s-4.4 16.3-11.7 20.6l-92.7 55.6L530 500.8c2 8.2-.4 16.9-6.3 22.8S509 532 500.9 530l-104.7-26.3l-55.5 92.7c-4.3 7.2-12.2 11.7-20.6 11.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2 530c-8.2 2-16.8-.4-22.8-6.3S108 509 110 500.8l26.2-104.7l-92.6-55.5C36.4 336.2 32 328.4 32 320s4.4-16.3 11.7-20.6l92.6-55.5L110 139.1c-2-8.2.3-16.8 6.3-22.8s14.7-8.3 22.9-6.3l104.7 26.2l55.5-92.6l1.8-2.6c4.5-5.7 11.4-9.1 18.8-9.1zm0 144c-79.5 0-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144m0 240c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96"/>
|
|
12
14
|
</svg>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
<!-- moon: visible in light mode (click to go dark) -->
|
|
16
|
+
<svg class="nav-theme-moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="20" height="20" aria-hidden="true">
|
|
17
|
+
<path d="M320 64C178.6 64 64 178.6 64 320s114.6 256 256 256c68.8 0 131.3-27.2 177.3-71.4c7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9.4-9.8.6-14.8.6c-101.6 0-184-82.4-184-184c0-72.1 41.5-134.6 102.1-164.8c9.1-4.5 14.3-14.3 13.1-24.4s-8.6-18.3-18.5-20.5C358.4 66.2 339.4 64 320 64"/>
|
|
15
18
|
</svg>
|
|
16
19
|
</button>
|
|
17
20
|
|
|
18
|
-
<!-- desktop dropdown: moon
|
|
21
|
+
<!-- desktop dropdown: moon summary, three options -->
|
|
19
22
|
<details class="nav-theme-details nav-dropdown-root">
|
|
20
23
|
<summary class="nav-icon-btn nav-theme-details-summary" aria-label="Theme Selector">
|
|
24
|
+
<!-- MoonIcon (24x24 crescent, matches original site) -->
|
|
21
25
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true">
|
|
22
|
-
<path fill
|
|
26
|
+
<path fill="none" d="M0 0h24v24H0z"/>
|
|
27
|
+
<path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
|
|
23
28
|
</svg>
|
|
24
29
|
</summary>
|
|
25
30
|
<div class="nav-dropdown-panel nav-theme-panel">
|
|
26
31
|
<ul class="nav-dropdown-list">
|
|
27
32
|
<li class="nav-dropdown-item">
|
|
28
33
|
<button type="button" class="nav-dropdown-link nav-theme-option" data-theme="light">
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
<!-- FA7 regular sun -->
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="18" height="18" aria-hidden="true">
|
|
36
|
+
<path d="M320 32c8 0 15.4 4 19.9 10.6l58.8 87.4l103.4-20.2c7.8-1.5 15.9.9 21.6 6.6s8.1 13.8 6.6 21.6L510 241.3l87.4 58.8C604 304.5 608 312 608 320s-4 15.4-10.6 19.9L510 398.7L530.2 502c1.5 7.8-.9 15.9-6.6 21.6s-13.8 8.1-21.6 6.6L398.7 510l-58.8 87.4C335.4 604 328 608 320 608s-15.4-4-19.9-10.6L241.3 510l-103.4 20.2c-7.8 1.5-15.9-.9-21.6-6.6s-8.1-13.8-6.6-21.6L130 398.7l-87.4-58.8C36 335.4 32 328 32 320s4-15.4 10.6-19.9l87.4-58.8l-20.2-103.4c-1.5-7.8.9-15.9 6.6-21.6s13.8-8.1 21.6-6.6l103.3 20.2l58.8-87.4l1.8-2.3C306.4 35 313 32 320 32m-47.8 138c-5.4 8-15 12-24.5 10.2l-84-16.4l16.4 84c1.8 9.5-2.2 19.1-10.2 24.5L99 320l71 47.8c8 5.4 12 15 10.2 24.5l-16.4 84l84-16.4l3.5-.4c8.3-.4 16.3 3.6 21 10.6l47.8 71l47.8-71l2.2-2.8c5.6-6.1 14-9 22.3-7.3l84 16.4l-16.4-84c-1.8-9.5 2.2-19.1 10.2-24.5l71-47.8l-71-47.8c-8-5.4-12-15-10.2-24.5l16.4-84l-84 16.4c-9.5 1.8-19.1-2.2-24.5-10.2l-47.8-71l-47.8 71zM320 440c-66.3 0-120-53.7-120-120s53.7-120 120-120s120 53.7 120 120s-53.7 120-120 120m0-192c-39.8 0-72 32.2-72 72s32.2 72 72 72s72-32.2 72-72s-32.2-72-72-72"/>
|
|
31
37
|
</svg>
|
|
32
38
|
Light
|
|
33
39
|
</button>
|
|
34
40
|
</li>
|
|
35
41
|
<li class="nav-dropdown-item">
|
|
36
42
|
<button type="button" class="nav-dropdown-link nav-theme-option" data-theme="dark">
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
<!-- FA7 regular moon -->
|
|
44
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="18" height="18" aria-hidden="true">
|
|
45
|
+
<path d="M303.3 112.7C196.2 121.2 112 210.8 112 320c0 114.9 93.1 208 208 208c33.3 0 64.7-7.8 92.6-21.7C309.2 482.9 232 390.5 232 280c0-65.8 27.4-125.1 71.3-167.3M64 320C64 178.6 178.6 64 320 64c19.4 0 38.4 2.2 56.7 6.3c9.9 2.2 17.3 10.5 18.5 20.5s-4 19.8-13.1 24.4C321.5 145.4 280 207.9 280 280c0 101.6 82.4 184 184 184c5 0 9.9-.2 14.8-.6c10.1-.8 19.6 4.8 23.8 14.1s2 20.1-5.3 27.1C451.3 548.8 388.8 576 320 576C178.6 576 64 461.4 64 320"/>
|
|
39
46
|
</svg>
|
|
40
47
|
Dark
|
|
41
48
|
</button>
|
|
42
49
|
</li>
|
|
43
50
|
<li class="nav-dropdown-item">
|
|
44
51
|
<button type="button" class="nav-dropdown-link nav-theme-option" data-theme="system">
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
<!-- FA7 solid computer -->
|
|
53
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="18" height="18" aria-hidden="true">
|
|
54
|
+
<path d="M380.8 96c-8.1 14.1-12.8 30.5-12.8 48v16H96v224h272v64H96c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64zM368 496c0 17.5 4.7 33.9 12.8 48H152c-13.3 0-24-10.7-24-24s10.7-24 24-24zm96-400h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48h-96c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48m24 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24zm56 144c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32"/>
|
|
47
55
|
</svg>
|
|
48
56
|
System
|
|
49
57
|
</button>
|
package/package.json
CHANGED