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

Fix app shell layout with stable top bar and dynamic nav offset.

Browse Source 
Unified chrome keeps the home logo top-left, measures bottom nav height
for scroll clearance, and adds responsive content widths for mobile/desktop.
This commit is contained in:
Harkamal Randhawa
2026-05-24 04:26:09 -06:00
parent 37836ec8a5
commit 91cced4c75
13 changed files with 291 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { forwardRef } from "react";
import {
Home,
ListPlus,
@@ -36,7 +37,10 @@ type AppNavProps = {
items?: readonly NavItem[];
};
export function AppNav({ items = appNavItems }: AppNavProps) {
export const AppNav = forwardRef<HTMLElement, AppNavProps>(function AppNav(
{ items = appNavItems },
ref,
) {
const pathname = usePathname();
const columnCount = Math.min(
items.length,
@@ -45,8 +49,8 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
return (
<nav
ref={ref}
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
aria-hidden
@@ -54,7 +58,7 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
/>
<div
className={cn(
"mx-auto grid h-full max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
"mx-auto grid max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
gridColsClass[columnCount],
)}
>
@@ -71,10 +75,10 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
aria-label={item.label}
title={item.label}
className={cn(
"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",
"bottom-nav-item flex flex-col items-center justify-center gap-1.5 overflow-hidden border-2 px-1 py-2 text-[9px] leading-none transition-colors 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",
? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)]"
: "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground",
)}
>
<Icon
@@ -90,4 +94,4 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
</div>
</nav>
);
}
});