Skip to content

Commit 6583e52

Browse files
skarimskarim
committed
nav styling
1 parent 7acc8ae commit 6583e52

4 files changed

Lines changed: 207 additions & 112 deletions

File tree

‎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: 82 additions & 95 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,150 @@ 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);
52-
}
53-
54-
/* Tablet navigation — hidden by default; shown via global CSS at narrow widths */
55-
.tablet-nav-wrapper {
56-
display: none;
57-
position: relative;
58-
margin-right: 0.5rem;
49+
opacity: 1;
50+
background-color: rgba(110, 118, 129, 0.15);
5951
}
6052

61-
.hamburger-btn {
53+
/* Splash-only hamburger: hidden by default, shown only on mobile splash pages */
54+
.splash-hamburger-btn {
55+
margin-top: -3px;
6256
background: none;
6357
border: none;
6458
cursor: pointer;
6559
padding: 0.5rem;
6660
color: var(--sl-color-text);
67-
border-radius: 4px;
68-
min-height: 44px;
69-
min-width: 44px;
61+
border-radius: 6px;
7062
display: inline-flex;
7163
align-items: center;
7264
justify-content: center;
7365
}
7466

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;
67+
.splash-hamburger-btn:hover {
68+
background-color: rgba(110, 118, 129, 0.15);
8569
}
8670

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 {
71+
.splash-dropdown {
10272
position: absolute;
10373
top: calc(100% + 0.5rem);
10474
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;
75+
background: #000000;
76+
border: 1px solid #191f1b;
77+
border-radius: 16px;
78+
padding: 12px;
79+
min-width: 200px;
11080
z-index: 100;
111-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
81+
box-shadow:
82+
rgba(0, 0, 0, 0.01) 0px 100px 80px,
83+
rgba(0, 0, 0, 0.02) 0px 41px 33px,
84+
rgba(0, 0, 0, 0.02) 0px 22px 17px,
85+
rgba(0, 0, 0, 0.3) 0px 6px 12px;
86+
}
87+
88+
:global(:root[data-theme='light']) .splash-dropdown {
89+
background: #ffffff;
90+
border: 1px solid #d1d9e0;
91+
box-shadow:
92+
rgba(31, 35, 40, 0.04) 0px 100px 80px,
93+
rgba(31, 35, 40, 0.06) 0px 41px 33px,
94+
rgba(31, 35, 40, 0.12) 0px 6px 12px;
11295
}
11396

114-
.dropdown-link {
97+
.splash-dropdown-link {
11598
display: block;
116-
padding: 0.625rem 1rem;
117-
color: var(--sl-color-text);
99+
padding: 6px 16px;
100+
color: #ffffff;
118101
text-decoration: none;
119102
font-size: 0.875rem;
120-
font-weight: 500;
103+
font-weight: 400;
104+
line-height: 24px;
105+
border-radius: 8px;
121106
transition: background-color 0.15s ease;
122107
}
123108

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

130122
<script>
131-
let hamburgerAbort: AbortController | undefined;
123+
let splashAbort: AbortController | undefined;
132124

133-
function initHamburgerMenu() {
134-
hamburgerAbort?.abort();
135-
hamburgerAbort = new AbortController();
136-
const { signal } = hamburgerAbort;
125+
function initSplashMenu() {
126+
splashAbort?.abort();
127+
splashAbort = new AbortController();
128+
const { signal } = splashAbort;
137129

138-
const hamburgerBtn = document.querySelector<HTMLButtonElement>('.hamburger-btn');
139-
const tabletDropdown = document.querySelector<HTMLElement>('.tablet-dropdown');
130+
const btn = document.querySelector<HTMLButtonElement>('.splash-hamburger-btn');
131+
const dropdown = document.querySelector<HTMLElement>('.splash-dropdown');
132+
if (!btn || !dropdown) return;
140133

141-
if (!hamburgerBtn || !tabletDropdown) return;
142-
143-
hamburgerBtn.addEventListener('click', (e) => {
134+
btn.addEventListener('click', (e) => {
144135
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-
}
136+
const isOpen = btn.getAttribute('aria-expanded') === 'true';
137+
btn.setAttribute('aria-expanded', String(!isOpen));
138+
dropdown.hidden = isOpen;
152139
}, { signal });
153140

154141
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;
142+
if (!btn.contains(e.target as Node) && !dropdown.contains(e.target as Node)) {
143+
btn.setAttribute('aria-expanded', 'false');
144+
dropdown.hidden = true;
158145
}
159146
}, { signal });
160147

161148
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();
149+
if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
150+
btn.setAttribute('aria-expanded', 'false');
151+
dropdown.hidden = true;
152+
btn.focus();
166153
}
167154
}, { signal });
168155
}
169156

170-
initHamburgerMenu();
171-
document.addEventListener('astro:page-load', initHamburgerMenu);
157+
initSplashMenu();
158+
document.addEventListener('astro:page-load', initSplashMenu);
172159
</script>

0 commit comments

Comments
 (0)