Refactor navigation structure and API routes

- Centralize user menu, sidebar items, and breadcrumb logic.
- Map consistent API endpoints in `customerRoutes`.
- Replace inline route definitions with reusable constants.
- Refactor auth configuration file location.
- Improve `<Link>` usage to replace static `<a>` elements.
- Adjust sidebar and dropdown components to use dynamic navigation configurations.
This commit is contained in:
2025-07-07 19:49:58 +02:00
parent 7ba92dc66c
commit e42b352216
15 changed files with 127 additions and 88 deletions

View File

@@ -1,13 +1,11 @@
import Link from 'next/link';
import {
AppWindowIcon,
ChevronUp,
ChevronRight,
Home,
Scale,
User2,
Settings, LayoutDashboard
Settings,
} from "lucide-react";
import {
Sidebar,
SidebarContent,
@@ -23,40 +21,20 @@ import {
SidebarMenuSubItem,
SidebarMenuSubButton,
} from "@/components/ui/sidebar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from "@/components/ui/collapsible";
import {rheinItems, customerItems, kanzleiItems} from "@/lib/navigation/sidebar-items";
import {userMenuItems} from "@/lib/navigation/user-menu-items";
const rheinItems = [
{
title: "Dashboard",
url: "/",
icon: Home,
},
{
title: "Apps",
url: "/apps",
icon: AppWindowIcon,
},
];
const customerItems = [
{
title: "Kundenübersicht",
url: "/customers",
icon: LayoutDashboard,
},
];
export function AppSidebar() {
return (
@@ -74,10 +52,10 @@ export function AppSidebar() {
asChild
className="hover:bg-accent hover:text-accent-foreground"
>
<a href={item.url}>
<Link href={item.url}>
<item.icon/>
<span>{item.title}</span>
</a>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
@@ -95,10 +73,10 @@ export function AppSidebar() {
asChild
className="hover:bg-accent hover:text-accent-foreground"
>
<a href={item.url}>
<Link href={item.url}>
<item.icon/>
<span>{item.title}</span>
</a>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
@@ -117,11 +95,10 @@ export function AppSidebar() {
asChild
className="hover:bg-accent hover:text-accent-foreground"
>
<a href="/demo/settings">
<Link href="/demo/settings">
<Settings/>
<span>Demo Settings</span>
</a>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
@@ -144,21 +121,15 @@ export function AppSidebar() {
<CollapsibleContent>
<SidebarMenuSub className="ml-4 border-l border-border pl-4 flex flex-col gap-y-1">
<SidebarMenuSubItem>
<SidebarMenuSubButton href="/demo/kanzlei/steuer">
Steuer
</SidebarMenuSubButton>
</SidebarMenuSubItem>
<SidebarMenuSubItem>
<SidebarMenuSubButton href="/demo/kanzlei/rechtsanwalt">
Rechtsanwalt
</SidebarMenuSubButton>
</SidebarMenuSubItem>
<SidebarMenuSubItem>
<SidebarMenuSubButton href="/demo/kanzlei/bilanzbuchhalter">
Bilanzbuchhalter
</SidebarMenuSubButton>
</SidebarMenuSubItem>
{kanzleiItems.map((item) => (
<SidebarMenuSubItem key={item.title}>
<SidebarMenuSubButton asChild>
<Link href={item.url}>
{item.title}
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</Collapsible>
@@ -183,15 +154,14 @@ export function AppSidebar() {
side="top"
className="w-[--radix-popper-anchor-width]"
>
<DropdownMenuItem>
<span>Account</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Billing</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Sign out</span>
</DropdownMenuItem>
{userMenuItems.map((item) => (
<DropdownMenuItem key={item.title} asChild>
<Link href={item.url}>
{item.icon && <item.icon className="mr-2 h-4 w-4"/>}
<span>{item.title}</span>
</Link>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
@@ -199,4 +169,4 @@ export function AppSidebar() {
</SidebarFooter>
</Sidebar>
);
}
}