RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide bottom nav labels on narrow widths and enlarge icons.

Browse Source 
Use a container query so cramped nav items show icon-only mode with accessible labels via aria-label.
This commit is contained in:
Harkamal Randhawa
2026-05-24 04:09:13 -06:00
parent 3cdcf37c00
commit fd15338bd0
2 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/globals.css
View File

@@ -142,6 +142,28 @@
@apply border-2 border-border bg-card text-card-foreground;
box-shadow: var(--retro-shadow);
}
.bottom-nav {
container-type: inline-size;
container-name: bottom-nav;
}
@container bottom-nav (max-width: 32rem) {
.bottom-nav-item-label {
display: none;
}
.bottom-nav-item {
gap: 0;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.bottom-nav-item-icon {
height: 1.75rem;
width: 1.75rem;
}
}
}
@layer utilities {

15
components/layout/app-nav.tsx
View File

@@ -45,7 +45,7 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
return (
<nav
className="fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
className="bottom-nav fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
style={{ height: "var(--bottom-nav-height)" }}
>
<div
@@ -68,15 +68,20 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
<Link
key={item.href}
href={item.href}
aria-label={item.label}
title={item.label}
className={cn(
"flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
"bottom-nav-item flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
isActive
? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)] -translate-y-0.5"
: "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground hover:-translate-y-0.5",
)}
>
<Icon className="h-5 w-5 shrink-0" strokeWidth={2.5} />
<span className="max-w-full truncate uppercase tracking-wide">
<Icon
className="bottom-nav-item-icon h-5 w-5 shrink-0"
strokeWidth={2.5}
/>
<span className="bottom-nav-item-label max-w-full truncate uppercase tracking-wide">
{item.shortLabel}
</span>
</Link>
@@ -85,4 +90,4 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
</div>
</nav>
);
}
}