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:
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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user