feat(frontend): Responsive Smartphone-Oberfläche (Modul 15)

Mobile Bottom-Navigation und permanent erreichbare "+ Neu"-
Schnellaktion (Durchsicht/Varroa/Behandlung/Fütterung/Aufgabe/Ernte).
Header-Navigation überarbeitet, damit sie bei schmaler Breite intern
scrollt statt die Seite horizontal zu sprengen. Verifiziert bei
Smartphone- (390px) und Tablet-Breite (820px).
This commit is contained in:
Nick Szaunig committed 2026-08-22 05:50:07 +02:00
1 parent 166979ff3c
commit 45646833b9
4 files changed
+99 -7

No files matched your search

@@ -0,0 +1,45 @@
"use client";
import Link from "next/link";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
const QUICK_ACTIONS = [
{ label: "Durchsicht", href: "/inspections/new" },
{ label: "Varroa-Messung", href: "/varroa/new" },
{ label: "Behandlung", href: "/treatments/new" },
{ label: "Fütterung", href: "/feedings/new" },
{ label: "Aufgabe", href: "/tasks/new" },
{ label: "Ernte", href: "/harvests/new" },
];
export function QuickAddMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
size="icon-lg"
className="fixed right-4 bottom-20 z-40 rounded-full shadow-lg sm:hidden"
aria-label="Neu"
/>
}
>
<Plus className="size-6" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="top">
{QUICK_ACTIONS.map((action) => (
<DropdownMenuItem key={action.href} render={<Link href={action.href} />}>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
}