refactor: refactor the color schema

src/components/app-sidebar.tsx

@@ -0,0 +1,106 @@
+"use client";
+import * as React from "react";
+import {
+    LayoutDashboard,
+    Plus,
+    FolderPlus,
+    Package,
+    MapPin,
+} from "lucide-react";
+import { NavUser } from "@/components/nav-user";
+import { ROUTES } from "@/utils/routes";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarRail,
+    SidebarMenu,
+    SidebarMenuItem,
+    SidebarMenuButton,
+    SidebarGroup,
+    SidebarGroupLabel,
+} from "@/components/ui/sidebar";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+// This is the navigation data
+const data = {
+    user: {
+        name: "shadcn",
+        email: "m@example.com",
+        avatar: "/avatars/shadcn.jpg",
+    },
+    navMain: [
+        {
+            title: "Dashboard",
+            url: ROUTES.DASHBOARD,
+            icon: LayoutDashboard,
+        },
+        {
+            title: "New Analysis",
+            url: ROUTES.NEW_ANALYSIS,
+            icon: Plus,
+        },
+        {
+            title: "Project",
+            url: ROUTES.PROJECT,
+            icon: FolderPlus,
+        },
+        {
+            title: "Package",
+            url: ROUTES.PACKAGE,
+            icon: Package,
+        },
+        {
+            title: "Location",
+            url: ROUTES.LOCATION,
+            icon: MapPin,
+        },
+    ],
+};
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+    const pathname = usePathname();
+
+    return (
+        <Sidebar collapsible="icon" {...props}>
+            <SidebarHeader>
+                <div className="flex items-center gap-2 py-2">
+                    <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                        <Package className="size-4" />
+                    </div>
+                    <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                        <span className="truncate font-semibold">Vision Road</span>
+                        <span className="truncate text-xs">Analytics Platform</span>
+                    </div>
+                </div>
+            </SidebarHeader>
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupLabel>Application</SidebarGroupLabel>
+                    <SidebarMenu>
+                        {data.navMain.map((item) => (
+                            <SidebarMenuItem key={item.title}>
+                                <SidebarMenuButton
+                                    asChild
+                                    tooltip={item.title}
+                                    isActive={pathname === item.url}
+                                >
+                                    <Link href={item.url}>
+                                        {item.icon && <item.icon />}
+                                        <span>{item.title}</span>
+                                    </Link>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        ))}
+                    </SidebarMenu>
+                </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+                <NavUser user={data.user} />
+            </SidebarFooter>
+            <SidebarRail />
+        </Sidebar>
+    );
+}