shadcn bottom navigation for a mobile web app

components/bottom-nav.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Bookmark, House, Inbox, Search, User } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const items = [
  { href: "/", label: "Home", icon: House },
  { href: "/search", label: "Search", icon: Search },
  { href: "/saved", label: "Saved", icon: Bookmark },
  { href: "/inbox", label: "Inbox", icon: Inbox },
  { href: "/account", label: "Account", icon: User },
];

export function BottomNav() {
  const pathname = usePathname();

  return (
    <nav
      aria-label="Main"
      className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur md:hidden"
    >
      <ul className="mx-auto grid max-w-md grid-cols-5">
        {items.map(({ href, label, icon: Icon }) => {
          const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
          return (
            <li key={href}>
              <Button
                asChild
                variant="ghost"
                className={cn("h-16 w-full flex-col gap-1 rounded-none text-xs", active ? "text-foreground" : "text-muted-foreground")}
              >
                <Link href={href} aria-current={active ? "page" : undefined}>
                  <Icon className="size-5" />
                  {label}
                </Link>
              </Button>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

components/tabbar-liquid.css

/* components/tabbar-liquid.css (your copy). Edit 1: the file's first rule was ":root{". */
@scope (.qd-tabbar) to (.qd-screen) {
:scope{font-family:var(--font-ui);color:var(--text);
  --ink:#0A0A0D;--surface:#111218; /* ...every variable that was on :root stays here... */
}
/* ...the rest of the file stays as it is... */

/* Edit 2: hide the demo's 9:41 status bar, then close the @scope block. */
.sb{display:none}
}

components/LiquidGlassTabBar.tsx

// components/LiquidGlassTabBar.tsx (your copy): three small edits.

// 1. The React import gains createContext, useContext and ReactNode.
import { createContext, useContext, useEffect, useLayoutEffect, useRef, type CSSProperties, type ReactNode } from 'react';

// 2. Above Pages: a context for your screens. Pages renders them when a provider is set.
export const TabScreens = createContext<ReactNode[] | null>(null);

function Pages({ data }: { data: NorthwindData }) {
  const screens = useContext(TabScreens);
  if (screens) return <>{screens.map((s, i) => <div className="pg" data-pg={i} key={i}><div className="pgc"><div className="qd-screen">{s}</div></div></div>)}</>;
  // ...the demo screens below stay as they are...
}

// 3. In LensOrb: the drop draws a copy of the screens, so keep that copy out of the tab order.
<div className="orb" data-k="orb" aria-hidden="true" inert>