kickern/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add bottom nav with settings

Browse Source
This commit is contained in:
arnef
2026-09-10 17:07:34 +02:00
parent d900e45352
commit e57964e9d4
3 changed files with 90 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/App.tsx
+14 -10
View File
@@ -1,7 +1,8 @@
import { OverviewPage } from "./pages/Overview";
import { MatchPage } from "./pages/MatchDetails";
import { SettingsPage } from "./pages/Settings";
import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
import { BottomNav } from "./components/BottomNav";
import { type ParentProps, onMount, onCleanup, createSignal, Show } from "solid-js";
function Layout(props: ParentProps) {
return (
@@ -68,15 +69,18 @@ function App() {
return (
<div class="bg-app text-ink h-dvh flex flex-col font-sans overflow-hidden select-none">
<Show when={path() === "/"}>
<OverviewPage />
</Show>
<Show when={path() === "/einstellungen" || path() === "/settings"}>
<SettingsPage />
</Show>
<Show when={path().startsWith("/match/")}>
<MatchPage />
</Show>
<div class="flex-1 min-h-0 flex flex-col overflow-hidden">
<Show when={path() === "/"}>
<OverviewPage />
</Show>
<Show when={path() === "/einstellungen" || path() === "/settings"}>
<SettingsPage />
</Show>
<Show when={path().startsWith("/match/")}>
<MatchPage />
</Show>
</div>
<BottomNav currentPath={path} />
</div>
);
}
apps/frontend/src/components/BottomNav.tsx
+76
View File
@@ -0,0 +1,76 @@
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>
);
}
apps/frontend/src/pages/Overview.tsx
-22
View File
@@ -215,28 +215,6 @@ export function OverviewPage() {
month: "long",
})}
</span>
<a href="/einstellungen" class="shrink-0">
<button
aria-label="Einstellungen"
class="p-1.5 -m-0.5 rounded-lg text-ink-muted hover:text-ink hover:bg-elevated/60 transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<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>
</button>
</a>
</div>
</div>
<div