Skip to content

Commit c06b8bc

Browse files
skarimskarim
committed
links in nav header
1 parent 7fd5e09 commit c06b8bc

3 files changed

Lines changed: 186 additions & 0 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ export default defineConfig({
1818
head: [
1919
{ tag: 'meta', attrs: { name: 'robots', content: 'noindex, nofollow' } },
2020
],
21+
components: {
22+
SocialIcons: './src/components/CustomHeader.astro',
23+
},
2124
customCss: [
2225
'./src/styles/custom.css',
2326
],

‎docs/src/components/CustomHeader.astro‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
---
2+
import type { Props } from '@astrojs/starlight/props';
3+
import Default from '@astrojs/starlight/components/SocialIcons.astro';
4+
const base = import.meta.env.BASE_URL;
5+
---
6+
7+
<nav class="custom-header-links" aria-label="Primary navigation">
8+
<a href={`${base}introduction/overview/`} class="header-link">Overview</a>
9+
<a href={`${base}getting-started/quick-start/`} class="header-link">Quick Start</a>
10+
<a href={`${base}reference/cli/`} class="header-link">CLI</a>
11+
<a href={`${base}guides/ui/`} class="header-link">UI</a>
12+
<a href={`${base}faq/`} class="header-link">FAQ</a>
13+
</nav>
14+
15+
<!-- Hamburger menu for narrow viewports where full nav would overflow -->
16+
<div class="tablet-nav-wrapper">
17+
<button class="hamburger-btn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="tablet-nav-dropdown">
18+
<span class="hamburger-icon" aria-hidden="true"></span>
19+
</button>
20+
<nav class="tablet-dropdown" id="tablet-nav-dropdown" aria-label="Primary navigation" hidden>
21+
<a href={`${base}introduction/overview/`} class="dropdown-link">Overview</a>
22+
<a href={`${base}getting-started/quick-start/`} class="dropdown-link">Quick Start</a>
23+
<a href={`${base}reference/cli/`} class="dropdown-link">CLI</a>
24+
<a href={`${base}guides/ui/`} class="dropdown-link">UI</a>
25+
<a href={`${base}faq/`} class="dropdown-link">FAQ</a>
26+
</nav>
27+
</div>
28+
29+
<Default {...Astro.props} />
30+
31+
<style>
32+
.custom-header-links {
33+
display: flex;
34+
align-items: center;
35+
gap: 1rem;
36+
margin-right: 1rem;
37+
}
38+
39+
.header-link {
40+
color: var(--sl-color-text);
41+
text-decoration: none;
42+
font-size: 0.875rem;
43+
font-weight: 500;
44+
padding: 0.25rem 0.75rem;
45+
border-radius: 4px;
46+
transition: color 0.15s ease, background-color 0.15s ease;
47+
white-space: nowrap;
48+
}
49+
50+
.header-link:hover {
51+
color: var(--sl-color-text-accent);
52+
background-color: rgba(110, 118, 129, 0.1);
53+
}
54+
55+
/* Tablet navigation — hidden by default; shown via global CSS at narrow widths */
56+
.tablet-nav-wrapper {
57+
display: none;
58+
position: relative;
59+
margin-right: 0.5rem;
60+
}
61+
62+
.hamburger-btn {
63+
background: none;
64+
border: none;
65+
cursor: pointer;
66+
padding: 0.5rem;
67+
color: var(--sl-color-text);
68+
border-radius: 4px;
69+
min-height: 44px;
70+
min-width: 44px;
71+
display: inline-flex;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
.hamburger-btn:hover {
77+
background-color: rgba(110, 118, 129, 0.1);
78+
}
79+
80+
.hamburger-icon {
81+
display: block;
82+
width: 20px;
83+
height: 2px;
84+
background: currentColor;
85+
position: relative;
86+
}
87+
88+
.hamburger-icon::before,
89+
.hamburger-icon::after {
90+
content: '';
91+
display: block;
92+
width: 20px;
93+
height: 2px;
94+
background: currentColor;
95+
position: absolute;
96+
left: 0;
97+
}
98+
99+
.hamburger-icon::before { top: -6px; }
100+
.hamburger-icon::after { top: 6px; }
101+
102+
.tablet-dropdown {
103+
position: absolute;
104+
top: calc(100% + 0.5rem);
105+
right: 0;
106+
background: var(--sl-color-bg-nav, #161b22);
107+
border: 1px solid rgba(48, 54, 61, 0.8);
108+
border-radius: 8px;
109+
padding: 0.5rem 0;
110+
min-width: 180px;
111+
z-index: 100;
112+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
113+
}
114+
115+
.dropdown-link {
116+
display: block;
117+
padding: 0.625rem 1rem;
118+
color: var(--sl-color-text);
119+
text-decoration: none;
120+
font-size: 0.875rem;
121+
font-weight: 500;
122+
transition: background-color 0.15s ease;
123+
}
124+
125+
.dropdown-link:hover {
126+
background-color: rgba(110, 118, 129, 0.1);
127+
color: var(--sl-color-text-accent);
128+
}
129+
</style>
130+
131+
<script>
132+
function initHamburgerMenu() {
133+
const hamburgerBtn = document.querySelector<HTMLButtonElement>('.hamburger-btn');
134+
const tabletDropdown = document.querySelector<HTMLElement>('.tablet-dropdown');
135+
136+
if (!hamburgerBtn || !tabletDropdown) return;
137+
138+
hamburgerBtn.addEventListener('click', (e) => {
139+
e.stopPropagation();
140+
const isOpen = hamburgerBtn.getAttribute('aria-expanded') === 'true';
141+
hamburgerBtn.setAttribute('aria-expanded', String(!isOpen));
142+
tabletDropdown.hidden = isOpen;
143+
if (!isOpen) {
144+
const firstLink = tabletDropdown.querySelector<HTMLAnchorElement>('.dropdown-link');
145+
firstLink?.focus();
146+
}
147+
});
148+
149+
document.addEventListener('click', (e) => {
150+
if (!hamburgerBtn.contains(e.target as Node) && !tabletDropdown.contains(e.target as Node)) {
151+
hamburgerBtn.setAttribute('aria-expanded', 'false');
152+
tabletDropdown.hidden = true;
153+
}
154+
});
155+
156+
document.addEventListener('keydown', (e) => {
157+
if (e.key === 'Escape' && hamburgerBtn.getAttribute('aria-expanded') === 'true') {
158+
hamburgerBtn.setAttribute('aria-expanded', 'false');
159+
tabletDropdown.hidden = true;
160+
hamburgerBtn.focus();
161+
}
162+
});
163+
}
164+
165+
initHamburgerMenu();
166+
document.addEventListener('astro:page-load', initHamburgerMenu);
167+
</script>

‎docs/src/styles/custom.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,19 @@
1111
--sl-color-accent: #4f46e5;
1212
--sl-color-accent-high: #312e81;
1313
}
14+
15+
/* Show full nav by default, switch to hamburger on narrow viewports */
16+
@media (max-width: 900px) {
17+
.custom-header-links {
18+
display: none !important;
19+
}
20+
.tablet-nav-wrapper {
21+
display: block !important;
22+
}
23+
}
24+
25+
@media (min-width: 901px) {
26+
.tablet-nav-wrapper {
27+
display: none !important;
28+
}
29+
}

0 commit comments

Comments
 (0)