astro-better-nav-bar 0.1.1 → 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/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/package.json
CHANGED