soroush.asadi
08d81cba65
Rebuild ScreenShell into a UNO-style app shell: a persistent NavRail (vertical side rail in landscape, bottom tab bar in portrait — Home/Profile/Shop/Friends/ Leaderboard/Achievements, active highlighted gold) + a content panel that owns its own scroll so the page never scrolls as a whole and uses the width in landscape. Reskins all 10 menu screens at once. Transient screens (auth, matchmaking, room) opt out via hideNav. New nav.home i18n key. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Home, ShoppingBag, Star, Trophy, User, Users } from "lucide-react";
|
|
import { useUIStore, type Screen } from "@/lib/ui-store";
|
|
import { useSessionStore } from "@/lib/session-store";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { cn } from "@/lib/cn";
|
|
|
|
type Item = { key: Screen; icon: typeof Home; label: string; authed?: boolean };
|
|
|
|
/**
|
|
* UNO-style primary navigation. A vertical rail pinned to the side in landscape
|
|
* (the app's main orientation) and a bottom tab bar in portrait. Active section
|
|
* is highlighted gold and pulled forward.
|
|
*/
|
|
export function NavRail() {
|
|
const screen = useUIStore((s) => s.screen);
|
|
const go = useUIStore((s) => s.go);
|
|
const isAuthed = useSessionStore((s) => s.isAuthed);
|
|
const { t } = useI18n();
|
|
|
|
const items: Item[] = [
|
|
{ key: "home", icon: Home, label: t("nav.home") },
|
|
{ key: "profile", icon: User, label: t("menu.profile") },
|
|
{ key: "shop", icon: ShoppingBag, label: t("menu.shop") },
|
|
{ key: "friends", icon: Users, label: t("menu.friends"), authed: true },
|
|
{ key: "leaderboard", icon: Trophy, label: t("menu.leaderboard") },
|
|
{ key: "achievements", icon: Star, label: t("achv.title") },
|
|
];
|
|
|
|
return (
|
|
<nav
|
|
className={cn(
|
|
"z-20 shrink-0 glass flex justify-around gap-1 p-1.5",
|
|
// portrait: bottom bar; landscape: side rail
|
|
"border-t border-gold/10 pb-[max(0.375rem,env(safe-area-inset-bottom))]",
|
|
"landscape:order-first landscape:h-full landscape:w-[78px] landscape:flex-col landscape:justify-start",
|
|
"landscape:gap-1.5 landscape:py-3 landscape:pb-3 landscape:border-t-0",
|
|
"ltr:landscape:border-r rtl:landscape:border-l"
|
|
)}
|
|
>
|
|
{items.map((it) => {
|
|
const active = screen === it.key;
|
|
return (
|
|
<button
|
|
key={it.key}
|
|
onClick={() => go(it.authed && !isAuthed ? "auth" : it.key)}
|
|
className={cn(
|
|
"flex min-w-[54px] flex-col items-center justify-center gap-1 rounded-2xl px-1.5 py-2 transition landscape:w-full landscape:py-2.5",
|
|
active ? "btn-gold shadow-lg" : "text-cream/55 hover:bg-navy-800/60 hover:text-cream"
|
|
)}
|
|
>
|
|
<it.icon className={cn("size-5", active && "text-[#2a1f04]")} />
|
|
<span className={cn("text-[10px] font-bold leading-none", active && "text-[#2a1f04]")}>
|
|
{it.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|