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:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,8 +11,8 @@ import {
|
||||
} from '@/components/ui/breadcrumb';
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {getBreadcrumbs} from '@/utils/BreadcrumbUtils';
|
||||
import {breadcrumbResolvers} from "@/lib/breadcrumb-map";
|
||||
import {getBreadcrumbs} from '@/services/navigation/breadcrumb-utils';
|
||||
import {breadcrumbResolvers} from "@/lib/navigation/breadcrumb-map";
|
||||
|
||||
interface ResolvedBreadcrumb {
|
||||
href: string;
|
||||
|
||||
Reference in New Issue
Block a user