85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { CloudSun, Droplets, Settings, TriangleAlert } from "lucide-react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { isAppNavItemVisible } from "@/lib/app-sections";
|
|
import { NAV_ITEMS } from "@/lib/constants";
|
|
import { cn } from "@/lib/utils";
|
|
import { InstallPWAButton } from "@/components/ui/install-pwa-button";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useWeatherStore } from "@/lib/store";
|
|
|
|
const iconsByHref: Record<string, LucideIcon> = {
|
|
"/": CloudSun,
|
|
"/warnings": TriangleAlert,
|
|
"/hydro": Droplets,
|
|
"/settings": Settings,
|
|
};
|
|
|
|
export function AppShell({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
const { t } = useI18n();
|
|
const appSections = useWeatherStore((state) => state.appSections);
|
|
const visibleNavItems = NAV_ITEMS.filter((item) => isAppNavItemVisible(item.href, appSections));
|
|
|
|
return (
|
|
<div className="min-h-screen overflow-x-hidden bg-background">
|
|
<header className="app-header-safe sticky top-0 z-40 border-b border-border/70 bg-surface">
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
|
|
<Link
|
|
href="/"
|
|
className="text-2xl font-semibold tracking-[-0.09em] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
wtr<span className="text-accent">.</span>
|
|
</Link>
|
|
<nav aria-label={t("nav.main")} className="hidden items-center gap-1 md:flex">
|
|
{visibleNavItems.map((item) => {
|
|
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"rounded-control px-4 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
active ? "bg-foreground text-background shadow-soft" : "text-muted hover:bg-surface-muted/70",
|
|
)}
|
|
>
|
|
{t(item.labelKey)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
<div className="flex items-center gap-2">
|
|
<InstallPWAButton />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="app-main-safe mx-auto max-w-7xl px-4 pt-5 sm:px-6 sm:pt-8 lg:px-8">{children}</main>
|
|
<nav
|
|
aria-label={t("nav.mobile")}
|
|
className="mobile-nav-safe fixed z-50 flex justify-around rounded-panel border border-border/70 bg-surface p-1.5 shadow-card md:hidden"
|
|
>
|
|
{visibleNavItems.map((item) => {
|
|
const Icon = iconsByHref[item.href] ?? CloudSun;
|
|
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex min-w-0 flex-1 flex-col items-center gap-1 rounded-card px-2 py-2 text-[0.68rem] font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
active ? "bg-foreground text-background" : "text-muted",
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
<span className="max-w-full truncate">{t(item.labelKey)}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|