Skip to content

Commit c80c0d4

Browse files
robcohenclaude
robcohen
and
claude
committed
refactor: use VitePress layout-top slot for secondary nav
- Move SecondaryNav into #layout-top slot (proper VitePress pattern) - Use --vp-layout-top-height CSS variable for automatic positioning - VitePress components (VPNav, VPSidebar, VPLocalNav) now auto-adjust - Remove manual top/margin overrides - let VitePress handle positioning - Simplify CSS by removing redundant mobile positioning hacks - Add position: fixed to SecondaryNav for sticky behavior when scrolling This follows the same pattern used by Vite.dev's SponsorBanner. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 1d08e74 commit c80c0d4

9 files changed

Lines changed: 167 additions & 390 deletions

File tree

‎docs/.vitepress/theme/Layout.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ const { Layout } = DefaultTheme;
77
</script>
88

99
<template>
10-
<SecondaryNav />
1110
<Layout>
11+
<template #layout-top>
12+
<SecondaryNav />
13+
</template>
1214
<template #nav-bar-title-after>
1315
<span class="custom-title"><span class="accent">rust</span>ledger</span>
1416
</template>

‎docs/.vitepress/theme/SecondaryNav.vue‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,16 @@ const navigate = (url) => {
4545
</template>
4646

4747
<style scoped>
48+
/* Fixed position to stay at top when scrolling */
4849
.secondary-nav {
49-
background-color: #000;
50-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
5150
position: fixed;
5251
top: 0;
5352
left: 0;
5453
right: 0;
55-
z-index: 100;
54+
z-index: 40; /* Above VPNav (z-index: 30) */
55+
background-color: #000;
56+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
57+
height: var(--vp-layout-top-height);
5658
}
5759
5860
.secondary-nav-content {
@@ -61,6 +63,8 @@ const navigate = (url) => {
6163
padding: 0.5rem 1.5rem;
6264
display: flex;
6365
justify-content: flex-end;
66+
height: 100%;
67+
align-items: center;
6468
}
6569
6670
.secondary-nav-links {
@@ -88,4 +92,15 @@ const navigate = (url) => {
8892
.accent {
8993
color: #f97316;
9094
}
95+
96+
@media (max-width: 768px) {
97+
.secondary-nav-content {
98+
padding: 0.25rem 0.5rem;
99+
}
100+
101+
.secondary-nav-links {
102+
gap: 1rem;
103+
font-size: 0.75rem;
104+
}
105+
}
91106
</style>

‎docs/.vitepress/theme/custom.css‎

Lines changed: 37 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
/* rustledger theme - dark mode with orange accent */
22

3+
/* ========================================
4+
CSS CUSTOM PROPERTIES
5+
======================================== */
6+
37
:root {
4-
/* Orange accent color (matching #f97316) */
8+
/* Orange accent color */
59
--vp-c-brand-1: #f97316;
610
--vp-c-brand-2: #fb923c;
711
--vp-c-brand-3: #fdba74;
@@ -12,6 +16,15 @@
1216
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1317
--vp-font-family-mono:
1418
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
19+
20+
/*
21+
* Secondary nav height - VitePress reads this variable
22+
* and automatically adjusts VPNav, VPSidebar, VPLocalNav positioning
23+
*/
24+
--vp-layout-top-height: 33px;
25+
26+
/* Layout widths */
27+
--vp-layout-max-width: 1400px;
1528
}
1629

1730
/* Force dark mode always */
@@ -44,9 +57,6 @@
4457

4558
/* Custom property for accent text */
4659
--accent: #f97316;
47-
48-
/* Layout widths */
49-
--vp-layout-max-width: 1400px;
5060
}
5161

5262
/* Make html/body black */
@@ -55,37 +65,24 @@ body {
5565
background-color: #000 !important;
5666
}
5767

58-
/* Nav styling - push down to make room for secondary nav */
68+
/* ========================================
69+
NAV STYLING
70+
71+
VitePress automatically handles positioning using
72+
--vp-layout-top-height. We only need to style colors.
73+
======================================== */
74+
5975
.VPNav {
6076
background-color: rgba(0, 0, 0, 0.9) !important;
6177
backdrop-filter: blur(8px);
62-
top: 33px !important;
6378
}
6479

65-
/* Adjust content for secondary nav */
6680
.VPSidebar {
67-
top: calc(var(--vp-nav-height) + 33px) !important;
81+
background-color: #000 !important;
6882
}
6983

7084
.VPContent {
71-
padding-top: 33px !important;
72-
}
73-
74-
/* Ensure doc content has proper top margin for secondary nav */
75-
.VPDoc {
76-
margin-top: 33px !important;
77-
}
78-
79-
/* Local nav (contains hamburger menu on mobile) */
80-
.VPLocalNav {
81-
margin-top: 33px !important;
82-
}
83-
84-
/* Home page layout - needs extra padding for both navbars */
85-
.VPHome,
86-
.Layout > main,
87-
.is-home .VPContent {
88-
padding-top: calc(var(--vp-nav-height) + 33px) !important;
85+
background-color: #000 !important;
8986
}
9087

9188
/* Hide the extra menu (...) button */
@@ -94,10 +91,9 @@ body {
9491
}
9592

9693
/* ========================================
97-
HOME PAGE SPECIFIC STYLES
94+
HOME PAGE STYLES
9895
======================================== */
9996

100-
/* Remove default page padding on home */
10197
.is-home .VPDoc .vp-doc {
10298
padding: 0 !important;
10399
}
@@ -114,7 +110,6 @@ body {
114110
display: none !important;
115111
}
116112

117-
/* Ensure full width on home page */
118113
.is-home .VPDoc > .container > .content {
119114
max-width: 100% !important;
120115
padding: 0 !important;
@@ -124,6 +119,10 @@ body {
124119
max-width: 100% !important;
125120
}
126121

122+
/* ========================================
123+
COMPONENT STYLES
124+
======================================== */
125+
127126
/* Feature cards */
128127
.VPFeature {
129128
background-color: #0a0a0a !important;
@@ -163,16 +162,6 @@ body {
163162
background-color: rgba(255, 255, 255, 0.15) !important;
164163
}
165164

166-
/* Sidebar */
167-
.VPSidebar {
168-
background-color: #000 !important;
169-
}
170-
171-
/* Content area */
172-
.VPContent {
173-
background-color: #000 !important;
174-
}
175-
176165
/* Footer */
177166
.VPFooter {
178167
background-color: #000 !important;
@@ -219,99 +208,23 @@ body {
219208
--vp-local-search-bg: #0a0a0a;
220209
}
221210

222-
/* Custom accent class for inline use */
211+
/* Custom accent class */
223212
.accent {
224213
color: #f97316;
225214
}
226215

227216
/* ========================================
228-
MOBILE RESPONSIVE FIXES
217+
NARROW VIEWPORT
229218
======================================== */
230219

231220
@media (max-width: 768px) {
232-
/* Hide site title text on mobile, keep only logo */
233-
.VPNavBarTitle .title {
234-
display: none !important;
221+
:root {
222+
--vp-layout-top-height: 28px;
235223
}
236224

237-
/* Remove extra top spacing on mobile */
238-
.VPDoc {
239-
margin-top: 0 !important;
240-
}
241-
242-
/* Fix content padding on mobile */
243-
.VPContent {
244-
padding-top: 0 !important;
245-
}
246-
247-
/* Make secondary nav smaller on mobile */
248-
.secondary-nav {
249-
padding: 0.25rem 0.5rem !important;
250-
}
251-
252-
.secondary-nav-links {
253-
gap: 1rem !important;
254-
font-size: 0.75rem !important;
255-
}
256-
257-
/* Adjust nav position for smaller secondary nav */
258-
.VPNav {
259-
top: 28px !important;
260-
}
261-
262-
.VPSidebar {
263-
top: calc(var(--vp-nav-height) + 28px) !important;
264-
}
265-
266-
/* Hide the floating local nav bar on home (not the sidebar itself) */
267-
.is-home .VPLocalNav {
268-
display: none !important;
269-
}
270-
271-
/* Remove sidebar space on home - sidebar is accessed via hamburger menu */
272-
.is-home .VPContent {
273-
padding-left: 0 !important;
274-
margin-left: 0 !important;
275-
padding-top: 0 !important;
276-
}
277-
278-
.is-home .VPContent.has-sidebar {
279-
padding-top: 0 !important;
280-
}
281-
282-
/* Ensure main content starts immediately after nav */
283-
.is-home main {
284-
padding-top: 0 !important;
285-
margin-top: 0 !important;
286-
}
287-
288-
/* Mobile nav menu - ensure it's visible and properly styled */
289-
.VPNavBarMenu {
290-
background-color: #000 !important;
291-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
292-
}
293-
294-
.VPNavBarMenu .VPNavBarMenuLink {
295-
color: white !important;
296-
}
297-
298-
/* Mobile nav screen (hamburger menu dropdown) */
225+
/* Mobile nav screen styling */
299226
.VPNavScreen {
300227
background-color: #000 !important;
301-
top: calc(var(--vp-nav-height) + 28px) !important;
302-
position: fixed !important;
303-
left: 0 !important;
304-
right: 0 !important;
305-
bottom: 0 !important;
306-
height: calc(100vh - var(--vp-nav-height) - 28px) !important;
307-
height: calc(100dvh - var(--vp-nav-height) - 28px) !important;
308-
z-index: 99 !important;
309-
padding: 1.5rem !important;
310-
overflow-y: auto !important;
311-
}
312-
313-
.VPNavScreen.open {
314-
display: block !important;
315228
}
316229

317230
.VPNavScreenMenu {
@@ -320,18 +233,13 @@ body {
320233

321234
.VPNavScreenMenuLink {
322235
color: white !important;
323-
display: block !important;
324-
padding: 0.75rem 0 !important;
325-
font-size: 1.1rem !important;
326-
}
327-
328-
/* Ensure nav screen container is visible */
329-
.VPNavBar .container > .content > .content-body {
330-
position: relative;
331236
}
332237
}
333238

334-
/* 404 page - hide sidebar and nav elements */
239+
/* ========================================
240+
404 PAGE
241+
======================================== */
242+
335243
.NotFound .VPSidebar,
336244
.NotFound .VPDoc .aside {
337245
display: none !important;

‎pta-standards-docs/.vitepress/theme/Layout.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ const { Layout } = DefaultTheme;
77
</script>
88

99
<template>
10-
<SecondaryNav />
1110
<Layout>
11+
<template #layout-top>
12+
<SecondaryNav />
13+
</template>
1214
<template #nav-bar-title-after>
1315
<span class="custom-title"><span class="accent">PTA</span> Standards</span>
1416
</template>

‎pta-standards-docs/.vitepress/theme/SecondaryNav.vue‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,16 @@ const navigate = (url) => {
4545
</template>
4646

4747
<style scoped>
48+
/* Fixed position to stay at top when scrolling */
4849
.secondary-nav {
49-
background-color: #000;
50-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
5150
position: fixed;
5251
top: 0;
5352
left: 0;
5453
right: 0;
55-
z-index: 100;
54+
z-index: 40; /* Above VPNav (z-index: 30) */
55+
background-color: #000;
56+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
57+
height: var(--vp-layout-top-height);
5658
}
5759
5860
.secondary-nav-content {
@@ -61,6 +63,8 @@ const navigate = (url) => {
6163
padding: 0.5rem 1.5rem;
6264
display: flex;
6365
justify-content: flex-end;
66+
height: 100%;
67+
align-items: center;
6468
}
6569
6670
.secondary-nav-links {
@@ -88,4 +92,15 @@ const navigate = (url) => {
8892
.accent {
8993
color: #f97316;
9094
}
95+
96+
@media (max-width: 768px) {
97+
.secondary-nav-content {
98+
padding: 0.25rem 0.5rem;
99+
}
100+
101+
.secondary-nav-links {
102+
gap: 1rem;
103+
font-size: 0.75rem;
104+
}
105+
}
91106
</style>

0 commit comments

Comments
 (0)