Skip to content

Commit f51caa2

Browse files
skarimskarim
committed
nav styling
1 parent 7acc8ae commit f51caa2

File tree

4 files changed

+208
-109
lines changed

4 files changed

+208
-109
lines changed

‎docs/astro.config.mjs‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export default defineConfig({
1515
title: 'GitHub Stacked PRs',
1616
description: 'Manage stacked branches and pull requests with the gh stack CLI extension.',
1717
favicon: '/favicon.svg',
18+
logo: {
19+
src: './src/assets/github-invertocat.svg',
20+
alt: 'GitHub',
21+
},
1822
head: [
1923
{ tag: 'meta', attrs: { name: 'robots', content: 'noindex, nofollow' } },
2024
],
@@ -24,9 +28,6 @@ export default defineConfig({
2428
customCss: [
2529
'./src/styles/custom.css',
2630
],
27-
social: [
28-
{ icon: 'github', label: 'GitHub', href: 'https://github.com/github/gh-stack' },
29-
],
3031
tableOfContents: {
3132
minHeadingLevel: 2,
3233
maxHeadingLevel: 4

‎docs/src/assets/github-invertocat.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/src/components/CustomHeader.astro‎

Lines changed: 83 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
import Default from '@astrojs/starlight/components/SocialIcons.astro';
32
const base = import.meta.env.BASE_URL;
43
---
54

@@ -11,162 +10,154 @@ const base = import.meta.env.BASE_URL;
1110
<a href={`${base}faq/`} class="header-link">FAQ</a>
1211
</nav>
1312

14-
<!-- Hamburger menu for narrow viewports where full nav would overflow -->
15-
<div class="tablet-nav-wrapper">
16-
<button class="hamburger-btn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="tablet-nav-dropdown">
17-
<span class="hamburger-icon" aria-hidden="true"></span>
13+
<!-- Hamburger for splash/homepage on mobile (content pages use Starlight's built-in) -->
14+
<div class="splash-nav-wrapper">
15+
<button class="splash-hamburger-btn" aria-label="Menu" aria-expanded="false" aria-controls="splash-nav-dropdown">
16+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
17+
<path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"/>
18+
</svg>
1819
</button>
19-
<nav class="tablet-dropdown" id="tablet-nav-dropdown" aria-label="Primary navigation" hidden>
20-
<a href={`${base}introduction/overview/`} class="dropdown-link">Overview</a>
21-
<a href={`${base}getting-started/quick-start/`} class="dropdown-link">Quick Start</a>
22-
<a href={`${base}reference/cli/`} class="dropdown-link">CLI</a>
23-
<a href={`${base}guides/ui/`} class="dropdown-link">UI</a>
24-
<a href={`${base}faq/`} class="dropdown-link">FAQ</a>
20+
<nav class="splash-dropdown" id="splash-nav-dropdown" hidden>
21+
<a href={`${base}introduction/overview/`} class="splash-dropdown-link">Overview</a>
22+
<a href={`${base}getting-started/quick-start/`} class="splash-dropdown-link">Quick Start</a>
23+
<a href={`${base}reference/cli/`} class="splash-dropdown-link">CLI</a>
24+
<a href={`${base}guides/ui/`} class="splash-dropdown-link">UI</a>
25+
<a href={`${base}faq/`} class="splash-dropdown-link">FAQ</a>
2526
</nav>
2627
</div>
2728

28-
<Default {...Astro.props} />
29-
3029
<style>
3130
.custom-header-links {
3231
display: flex;
3332
align-items: center;
34-
gap: 1rem;
35-
margin-right: 1rem;
33+
gap: 0.25rem;
3634
}
3735

3836
.header-link {
3937
color: var(--sl-color-text);
4038
text-decoration: none;
4139
font-size: 0.875rem;
42-
font-weight: 500;
43-
padding: 0.25rem 0.75rem;
44-
border-radius: 4px;
40+
font-weight: 400;
41+
padding: 6px 10px;
42+
border-radius: 6px;
4543
transition: color 0.15s ease, background-color 0.15s ease;
4644
white-space: nowrap;
45+
opacity: 0.8;
4746
}
4847

4948
.header-link:hover {
50-
color: var(--sl-color-text-accent);
51-
background-color: rgba(110, 118, 129, 0.1);
49+
opacity: 1;
50+
background-color: rgba(110, 118, 129, 0.15);
5251
}
5352

54-
/* Tablet navigation — hidden by default; shown via global CSS at narrow widths */
55-
.tablet-nav-wrapper {
53+
/* Splash-only hamburger: hidden by default, shown only on mobile splash pages via global CSS */
54+
/* .splash-nav-wrapper {
5655
display: none;
5756
position: relative;
58-
margin-right: 0.5rem;
59-
}
57+
} */
6058

61-
.hamburger-btn {
59+
.splash-hamburger-btn {
6260
background: none;
6361
border: none;
6462
cursor: pointer;
6563
padding: 0.5rem;
6664
color: var(--sl-color-text);
67-
border-radius: 4px;
68-
min-height: 44px;
69-
min-width: 44px;
65+
border-radius: 6px;
7066
display: inline-flex;
7167
align-items: center;
7268
justify-content: center;
7369
}
7470

75-
.hamburger-btn:hover {
76-
background-color: rgba(110, 118, 129, 0.1);
77-
}
78-
79-
.hamburger-icon {
80-
display: block;
81-
width: 20px;
82-
height: 2px;
83-
background: currentColor;
84-
position: relative;
71+
.splash-hamburger-btn:hover {
72+
background-color: rgba(110, 118, 129, 0.15);
8573
}
8674

87-
.hamburger-icon::before,
88-
.hamburger-icon::after {
89-
content: '';
90-
display: block;
91-
width: 20px;
92-
height: 2px;
93-
background: currentColor;
94-
position: absolute;
95-
left: 0;
96-
}
97-
98-
.hamburger-icon::before { top: -6px; }
99-
.hamburger-icon::after { top: 6px; }
100-
101-
.tablet-dropdown {
75+
.splash-dropdown {
10276
position: absolute;
10377
top: calc(100% + 0.5rem);
10478
right: 0;
105-
background: var(--sl-color-bg-nav, #161b22);
106-
border: 1px solid rgba(48, 54, 61, 0.8);
107-
border-radius: 8px;
108-
padding: 0.5rem 0;
109-
min-width: 180px;
79+
background: #000000;
80+
border: 1px solid #191f1b;
81+
border-radius: 16px;
82+
padding: 12px;
83+
min-width: 200px;
11084
z-index: 100;
111-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
85+
box-shadow:
86+
rgba(0, 0, 0, 0.01) 0px 100px 80px,
87+
rgba(0, 0, 0, 0.02) 0px 41px 33px,
88+
rgba(0, 0, 0, 0.02) 0px 22px 17px,
89+
rgba(0, 0, 0, 0.3) 0px 6px 12px;
90+
}
91+
92+
:global(:root[data-theme='light']) .splash-dropdown {
93+
background: #ffffff;
94+
border: 1px solid #d1d9e0;
95+
box-shadow:
96+
rgba(31, 35, 40, 0.04) 0px 100px 80px,
97+
rgba(31, 35, 40, 0.06) 0px 41px 33px,
98+
rgba(31, 35, 40, 0.12) 0px 6px 12px;
11299
}
113100

114-
.dropdown-link {
101+
.splash-dropdown-link {
115102
display: block;
116-
padding: 0.625rem 1rem;
117-
color: var(--sl-color-text);
103+
padding: 6px 16px;
104+
color: #ffffff;
118105
text-decoration: none;
119106
font-size: 0.875rem;
120-
font-weight: 500;
107+
font-weight: 400;
108+
line-height: 24px;
109+
border-radius: 8px;
121110
transition: background-color 0.15s ease;
122111
}
123112

124-
.dropdown-link:hover {
125-
background-color: rgba(110, 118, 129, 0.1);
126-
color: var(--sl-color-text-accent);
113+
.splash-dropdown-link:hover {
114+
background-color: rgba(110, 118, 129, 0.2);
115+
}
116+
117+
:global(:root[data-theme='light']) .splash-dropdown-link {
118+
color: #1f2328;
119+
}
120+
121+
:global(:root[data-theme='light']) .splash-dropdown-link:hover {
122+
background-color: rgba(175, 184, 193, 0.2);
127123
}
128124
</style>
129125

130126
<script>
131-
let hamburgerAbort: AbortController | undefined;
127+
let splashAbort: AbortController | undefined;
132128

133-
function initHamburgerMenu() {
134-
hamburgerAbort?.abort();
135-
hamburgerAbort = new AbortController();
136-
const { signal } = hamburgerAbort;
129+
function initSplashMenu() {
130+
splashAbort?.abort();
131+
splashAbort = new AbortController();
132+
const { signal } = splashAbort;
137133

138-
const hamburgerBtn = document.querySelector<HTMLButtonElement>('.hamburger-btn');
139-
const tabletDropdown = document.querySelector<HTMLElement>('.tablet-dropdown');
134+
const btn = document.querySelector<HTMLButtonElement>('.splash-hamburger-btn');
135+
const dropdown = document.querySelector<HTMLElement>('.splash-dropdown');
136+
if (!btn || !dropdown) return;
140137

141-
if (!hamburgerBtn || !tabletDropdown) return;
142-
143-
hamburgerBtn.addEventListener('click', (e) => {
138+
btn.addEventListener('click', (e) => {
144139
e.stopPropagation();
145-
const isOpen = hamburgerBtn.getAttribute('aria-expanded') === 'true';
146-
hamburgerBtn.setAttribute('aria-expanded', String(!isOpen));
147-
tabletDropdown.hidden = isOpen;
148-
if (!isOpen) {
149-
const firstLink = tabletDropdown.querySelector<HTMLAnchorElement>('.dropdown-link');
150-
firstLink?.focus();
151-
}
140+
const isOpen = btn.getAttribute('aria-expanded') === 'true';
141+
btn.setAttribute('aria-expanded', String(!isOpen));
142+
dropdown.hidden = isOpen;
152143
}, { signal });
153144

154145
document.addEventListener('click', (e) => {
155-
if (!hamburgerBtn.contains(e.target as Node) && !tabletDropdown.contains(e.target as Node)) {
156-
hamburgerBtn.setAttribute('aria-expanded', 'false');
157-
tabletDropdown.hidden = true;
146+
if (!btn.contains(e.target as Node) && !dropdown.contains(e.target as Node)) {
147+
btn.setAttribute('aria-expanded', 'false');
148+
dropdown.hidden = true;
158149
}
159150
}, { signal });
160151

161152
document.addEventListener('keydown', (e) => {
162-
if (e.key === 'Escape' && hamburgerBtn.getAttribute('aria-expanded') === 'true') {
163-
hamburgerBtn.setAttribute('aria-expanded', 'false');
164-
tabletDropdown.hidden = true;
165-
hamburgerBtn.focus();
153+
if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
154+
btn.setAttribute('aria-expanded', 'false');
155+
dropdown.hidden = true;
156+
btn.focus();
166157
}
167158
}, { signal });
168159
}
169160

170-
initHamburgerMenu();
171-
document.addEventListener('astro:page-load', initHamburgerMenu);
161+
initSplashMenu();
162+
document.addEventListener('astro:page-load', initSplashMenu);
172163
</script>

0 commit comments

Comments
 (0)