Skip to content

Commit 1987ef5

Browse files
pandinocoderpandinocoder
authored
fix: responsive and typing fixes (#144)
* fix: prevent background contents from being visible when mobile menu is open * fix: `More` section should always be visible, never pruned * fix: don't shrink version picker size because it's not obvious what the element is once it's "shrunk" * fix: resolve type detection errors * fix: make navbar visible on mobile menu
1 parent 64b4478 commit 1987ef5

File tree

18 files changed

+106
-35
lines changed

18 files changed

+106
-35
lines changed

‎src/components/Header/Header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ type Props = {
1515
versions: readonly LabeledVersion[];
1616
};
1717
18-
const { langCode, version = "latest", versions } = Astro.props;
18+
const { langCode, version = "latest", versions } = Astro.props as Props;
1919
const site = SITE[langCode];
2020
const navbar = site?.navbar ? site.navbar[version] : undefined;
2121
const langRootUrl = new URL(`/${langCode}`, Astro.url.href);

‎src/components/Header/LanguagePicker.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type Props = {
77
langCode: KnownLanguageCode;
88
};
99
10-
const { langCode: activeLangCode } = Astro.props;
10+
const { langCode: activeLangCode } = Astro.props as Props;
1111
---
1212

1313
<div class="language-select-wrapper">

‎src/components/Header/Logo.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
type Props = {
33
size: string;
44
};
5-
const { size } = Astro.props;
5+
const { size } = Astro.props as Props;
66
---
77

88
<svg

‎src/components/Header/Search.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ type Props = {
1010
version: VersionKey;
1111
};
1212
13-
const { langCode, version } = Astro.props;
13+
const { langCode, version } = Astro.props as Props;
1414
const site = SITE[langCode];
15-
const { Search } = site.components;
15+
const { Search: search } = site.components;
1616
const metadata = await getMetadata();
1717
---
1818

@@ -39,8 +39,8 @@ const metadata = await getMetadata();
3939
</section>
4040
<button
4141
class="dummy trigger"
42-
aria-label={Search.OpenSearch}
43-
title={Search.OpenSearch}></button>
42+
aria-label={search.OpenSearch}
43+
title={search.OpenSearch}></button>
4444
<svg>
4545
<path
4646
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -269,7 +269,7 @@ const metadata = await getMetadata();
269269
<Intersect animation="inner-spin" />
270270
</div>
271271
<div slot="empty-state" class="fill">
272-
<span class="details">{Search.Empty}</span>
272+
<span class="details">{search.Empty}</span>
273273
<Intersect animation="none" />
274274
</div>
275275
</site-search>

‎src/components/Header/VersionPicker.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type Props = {
88
versions: readonly LabeledVersion[];
99
};
1010
11-
const { version = "latest", versions } = Astro.props;
11+
const { version = "latest", versions } = Astro.props as Props;
1212
---
1313

1414
<div class="version-picker-wrapper">
@@ -143,7 +143,7 @@ const { version = "latest", versions } = Astro.props;
143143
right: 0;
144144
}
145145

146-
@media (max-width: 1440px) {
146+
@media (max-width: 1080px) {
147147
:global(body:not(.mobile-sidebar-toggle)) .version-picker {
148148
color: transparent;
149149
padding: 0.125em 1.125em;

‎src/components/LeftSidebar/LeftSidebar.astro‎

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type Props = {
2323
versions: readonly LabeledVersion[];
2424
};
2525
26-
const { currentPage, langCode, version, versions } = Astro.props;
26+
const { currentPage, langCode, version = "latest", versions } = Astro.props as Props;
2727
2828
function getSlug() {
2929
let slug = resolveSlug(langCode, currentPage, version);
@@ -41,17 +41,12 @@ const currentPageMatch = currentPage.endsWith("/")
4141
? currentPage.slice(1, -1)
4242
: currentPage.slice(1);
4343
44-
let sidebar = SITE[langCode].sidebar;
45-
if (sidebar && typeof version === "string") {
46-
const versionedSidebar = sidebar[version];
47-
if (!Array.isArray(versionedSidebar)) {
48-
sidebar = versionedSidebar;
49-
}
50-
}
44+
const site = SITE[langCode];
45+
46+
const navbar = site?.navbar ? site.navbar[version] : undefined;
47+
48+
const sidebar = (site?.sidebar ? site.sidebar[version] : undefined) ?? {};
5149
52-
if (!sidebar) {
53-
sidebar = {};
54-
}
5550
5651
const sidebarSlug =
5752
Object.keys(sidebar).find((sectionSlug) => slug.startsWith(sectionSlug)) ??
@@ -94,6 +89,25 @@ function findActiveSidebarItem({
9489
9590
return undefined;
9691
}
92+
93+
const langRootUrl = new URL(`/${langCode}`, Astro.url.href);
94+
function resolveNavUrl(link: string) {
95+
if (link.startsWith("http")) {
96+
return new URL(link);
97+
}
98+
99+
const versionSegment = version === "latest" ? "" : `/${version}`;
100+
101+
if (link.startsWith("/")) {
102+
if (link.startsWith(`/${langRootUrl}`)) {
103+
return new URL(link, langRootUrl);
104+
}
105+
106+
return new URL(`${langRootUrl}${versionSegment}${link}`);
107+
}
108+
109+
return new URL(link, `${langRootUrl}${versionSegment}`);
110+
}
97111
---
98112

99113
<aside id="sidebar" class="sidebar" aria-label="Site Navigation">
@@ -115,6 +129,23 @@ function findActiveSidebarItem({
115129
)
116130
}
117131
</div>
132+
{
133+
Array.isArray(navbar) && navbar.length > 0 && (
134+
<nav class="site-sections">
135+
<ul class="horizontal hide-on-mobile">
136+
{navbar.map((item) => {
137+
return (
138+
<li>
139+
<a href={resolveNavUrl(item.link)}>
140+
{item.title}
141+
</a>
142+
</li>
143+
);
144+
})}
145+
</ul>
146+
</nav>
147+
)
148+
}
118149
</div>
119150
<nav aria-labelledby="sidebar">
120151
<ul class="nav-groups">
@@ -390,6 +421,42 @@ function findActiveSidebarItem({
390421
background-color: var(--theme-bg-hover);
391422
}
392423

424+
nav.site-sections {
425+
border-top: 1px solid var(--theme-divider);
426+
padding: 1em 0.5em;
427+
text-align: left;
428+
width: 100%;
429+
}
430+
431+
@media (min-width: 900px) {
432+
nav.site-sections {
433+
display: none;
434+
}
435+
}
436+
437+
nav.site-sections ul {
438+
display: flex;
439+
flex-direction: row;
440+
flex-wrap: wrap;
441+
}
442+
443+
nav.site-sections li {
444+
padding: 0.5em 0em;
445+
}
446+
447+
nav.site-sections a {
448+
color: var(--theme-text);
449+
font-size: 1.25em;
450+
font-weight: 500;
451+
text-decoration: none;
452+
}
453+
454+
nav.site-sections a:hover,
455+
nav.site-sections a:focus {
456+
color: var(--theme-text-accent);
457+
text-decoration: none;
458+
}
459+
393460
@media (max-width: 1280px) {
394461
.menu-toggle {
395462
display: initial;
@@ -411,6 +478,7 @@ function findActiveSidebarItem({
411478
right: 0;
412479
top: var(--header-height);
413480
width: 100vw;
481+
z-index: 1;
414482
}
415483
</style>
416484

‎src/components/PageContent/PageContent.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ type Props = {
1212
langCode: KnownLanguageCode;
1313
};
1414
15-
const { editUrl, headings, langCode, title } = Astro.props;
15+
const { editUrl, headings, langCode, title } = Astro.props as Props;
1616
1717
const site = SITE[langCode];
1818
---
@@ -52,7 +52,7 @@ const site = SITE[langCode];
5252
display: block;
5353
}
5454

55-
@media (min-width: 50em) {
55+
@media (min-width: 1080px) {
5656
.sm-hidden {
5757
display: none;
5858
}

‎src/components/RightSidebar/MoreMenu.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type Props = {
99
langCode: KnownLanguageCode;
1010
};
1111
12-
const { editUrl, langCode } = Astro.props;
12+
const { editUrl, langCode } = Astro.props as Props;
1313
const site = SITE[langCode];
1414
const showMoreSection = Boolean(SITE.communityUrl);
1515
---

‎src/components/RightSidebar/RightSidebar.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ type Props = {
1212
langCode: KnownLanguageCode;
1313
};
1414
15-
const { editUrl, headings, langCode } = Astro.props;
15+
const { editUrl, headings, langCode } = Astro.props as Props;
16+
const site = SITE[langCode];
1617
---
1718

1819
<aside id="toc" class="toc" title="Table of Contents">
@@ -22,7 +23,7 @@ const { editUrl, headings, langCode } = Astro.props;
2223
<TableOfContents
2324
client:media="(min-width: 50em)"
2425
headings={headings}
25-
onThisPage={SITE[langCode].general.OnThisPage}
26+
onThisPage={site.general.OnThisPage}
2627
/>
2728
)
2829
}

‎src/components/SkipToContent.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type Props = {
66
langCode: KnownLanguageCode;
77
};
88
9-
const { langCode } = Astro.props;
9+
const { langCode } = Astro.props as Props;
1010
1111
const a11yNavLabels = A11Y_NAV_LABELS[langCode];
1212
---

0 commit comments

Comments
 (0)