diff --git a/inventory/index.html b/inventory/index.html index e4b78ea..c69b332 100644 --- a/inventory/index.html +++ b/inventory/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Inventory Manager
diff --git a/inventory/public/box.svg b/inventory/public/box.svg new file mode 100644 index 0000000..bf13e8b --- /dev/null +++ b/inventory/public/box.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inventory/src/App.css b/inventory/src/App.css index b9d355d..8da90e7 100644 --- a/inventory/src/App.css +++ b/inventory/src/App.css @@ -1,5 +1,5 @@ #root { - max-width: 1280px; + max-width: 1800px; margin: 0 auto; padding: 2rem; text-align: center; diff --git a/inventory/src/components/layout/AppSidebar.tsx b/inventory/src/components/layout/AppSidebar.tsx index e3625e7..210276b 100644 --- a/inventory/src/components/layout/AppSidebar.tsx +++ b/inventory/src/components/layout/AppSidebar.tsx @@ -12,6 +12,7 @@ import { SidebarMenuItem, SidebarSeparator, } from "@/components/ui/sidebar"; +import { useLocation } from "react-router-dom"; const items = [ { @@ -34,38 +35,38 @@ const items = [ icon: BarChart2, url: "/reports", }, - { - title: "Settings", - icon: Settings, - url: "/settings", - }, ]; export function AppSidebar() { + const location = useLocation(); + return ( - +
-

Inventory

+

Inventory Manager

 - Menu - {items.map((item) => ( - - - - - {item.title} - - - - ))} + {items.map((item) => { + const isActive = location.pathname === item.url || + (item.url !== "/" && location.pathname.startsWith(item.url)); + return ( + + + + + {item.title} + + + + ); + })} @@ -75,7 +76,11 @@ export function AppSidebar() { - + Add Product @@ -87,9 +92,20 @@ export function AppSidebar() { -
- Version 1.0.0 -
+ + + + + + Settings + + + + ); diff --git a/inventory/src/components/layout/MainLayout.tsx b/inventory/src/components/layout/MainLayout.tsx index d2118bc..05bc0e0 100644 --- a/inventory/src/components/layout/MainLayout.tsx +++ b/inventory/src/components/layout/MainLayout.tsx @@ -8,14 +8,13 @@ interface MainLayoutProps { export function MainLayout({ children }: MainLayoutProps) { return ( -
+
-
+
-
Inventory Management
-
-
+
+
{children}