77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
interface BottomNavProps {
|
|
currentPath: () => string;
|
|
}
|
|
|
|
function HomeIcon() {
|
|
return (
|
|
<svg
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M3 10.5 12 3l9 7.5" />
|
|
<path d="M5 9.5V21h5v-6h4v6h5V9.5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function GearIcon() {
|
|
return (
|
|
<svg
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function BottomNav(props: BottomNavProps) {
|
|
const path = () => props.currentPath();
|
|
|
|
const isHome = () => path() === "/";
|
|
const isSettings = () =>
|
|
path().startsWith("/einstellungen") || path().startsWith("/settings");
|
|
|
|
return (
|
|
<nav
|
|
class="shrink-0 border-t border-line bg-surface/90 backdrop-blur-md flex"
|
|
style={{ paddingBlockEnd: "env(safe-area-inset-bottom)" }}
|
|
>
|
|
<a
|
|
href="/"
|
|
aria-label="Übersicht"
|
|
class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
|
|
isHome() ? "text-accent" : "text-ink-muted hover:text-ink"
|
|
}`}
|
|
>
|
|
<HomeIcon />
|
|
<span class="text-[10px] font-medium">Übersicht</span>
|
|
</a>
|
|
|
|
<a
|
|
href="/einstellungen"
|
|
aria-label="Einstellungen"
|
|
class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
|
|
isSettings() ? "text-accent" : "text-ink-muted hover:text-ink"
|
|
}`}
|
|
>
|
|
<GearIcon />
|
|
<span class="text-[10px] font-medium">Einstellungen</span>
|
|
</a>
|
|
</nav>
|
|
);
|
|
}
|