Skip to content

Commit b6d961a

Browse files
just-be-devclaude
andauthored
Make mobile header horizontally scrollable with active tab visible (#142)
Add horizontal scroll to navigation tabs on mobile viewports with hidden scrollbar for clean appearance. Auto-scroll active tab into view on page load. Co-authored-by: Claude <noreply@anthropic.com>
1 parent 6b9562e commit b6d961a

1 file changed

Lines changed: 22 additions & 2 deletions

File tree

src/components/Nav.astro

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function highlightLabel(label: string, keyChar: string) {
4848
<nav
4949
class="bg-1 fixed top-0 right-0 left-0 z-10 flex h-lh items-center justify-between lg:justify-start"
5050
>
51-
<div class="flex">
51+
<div class="nav-tabs flex max-lg:overflow-x-auto">
5252
{
5353
tabs.map((tab) => {
5454
const active = isActive(tab.href, currentPath);
@@ -58,7 +58,10 @@ function highlightLabel(label: string, keyChar: string) {
5858
<a
5959
href={tab.href}
6060
data-key={tab.keyChar}
61-
class:list={["nav-link bg-1 transition-filter flex items-center px-1", { active, current }]}
61+
class:list={[
62+
"nav-link bg-1 transition-filter flex shrink-0 items-center px-1",
63+
{ active, current },
64+
]}
6265
tabindex={current ? -1 : undefined}
6366
>
6467
{highlighted.before}
@@ -133,6 +136,15 @@ function highlightLabel(label: string, keyChar: string) {
133136
</nav>
134137

135138
<style>
139+
.nav-tabs {
140+
scrollbar-width: none; /* Firefox */
141+
-ms-overflow-style: none; /* IE/Edge */
142+
}
143+
144+
.nav-tabs::-webkit-scrollbar {
145+
display: none; /* Chrome/Safari/Opera */
146+
}
147+
136148
.nav-link {
137149
display: flex;
138150
align-items: center;
@@ -184,3 +196,11 @@ function highlightLabel(label: string, keyChar: string) {
184196
outline: none;
185197
}
186198
</style>
199+
200+
<script>
201+
// Scroll active tab into view on page load
202+
const activeTab = document.querySelector(".nav-tabs .nav-link.active");
203+
if (activeTab) {
204+
activeTab.scrollIntoView({ inline: "center", block: "nearest" });
205+
}
206+
</script>

0 commit comments

Comments
 (0)