matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebar + layout tweaks + favicon and title

Browse Source
This commit is contained in:
Matt
2025-01-09 19:08:51 -05:00
parent 1aacf56bef
commit df1b648155
5 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
inventory/index.html
View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/box.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>Inventory Manager</title>
</head>
<body>
<div id="root"></div>

1
inventory/public/box.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7l8.7 5l8.7-5M12 22V12"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 340 B

2
inventory/src/App.css
View File

@@ -1,5 +1,5 @@
#root {
max-width: 1280px;
max-width: 1800px;
margin: 0 auto;
padding: 2rem;
text-align: center;

60
inventory/src/components/layout/AppSidebar.tsx
View File

@@ -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 (
<Sidebar collapsible="icon">
<Sidebar collapsible="icon" variant="sidebar">
<SidebarHeader>
<div className="p-4 flex items-center gap-2 group-data-[collapsible=icon]:justify-center">
<Box className="h-6 w-6 shrink-0" />
<h2 className="text-lg font-semibold group-data-[collapsible=icon]:hidden">Inventory</h2>
<h2 className="text-lg font-semibold group-data-[collapsible=icon]:hidden">Inventory Manager</h2>
</div>
</SidebarHeader>
<SidebarSeparator />
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Menu</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={item.title}>
<a href={item.url}>
<item.icon className="h-4 w-4" />
<span className="group-data-[collapsible=icon]:hidden">{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
{items.map((item) => {
const isActive = location.pathname === item.url ||
(item.url !== "/" && location.pathname.startsWith(item.url));
return (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={item.title} isActive={isActive}>
<a href={item.url}>
<item.icon className="h-4 w-4" />
<span className="group-data-[collapsible=icon]:hidden">{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
);
})}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
@@ -75,7 +76,11 @@ export function AppSidebar() {
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild tooltip="Add Product">
<SidebarMenuButton
asChild
tooltip="Add Product"
isActive={location.pathname === "/products/new"}
>
<a href="/products/new">
<Plus className="h-4 w-4" />
<span className="group-data-[collapsible=icon]:hidden">Add Product</span>
@@ -87,9 +92,20 @@ export function AppSidebar() {
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<div className="p-4 text-sm text-muted-foreground group-data-[collapsible=icon]:hidden">
Version 1.0.0
</div>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
asChild
tooltip="Settings"
isActive={location.pathname === "/settings"}
>
<a href="/settings">
<Settings className="h-4 w-4" />
<span className="group-data-[collapsible=icon]:hidden">Settings</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
);

9
inventory/src/components/layout/MainLayout.tsx
View File

@@ -8,14 +8,13 @@ interface MainLayoutProps {
export function MainLayout({ children }: MainLayoutProps) {
return (
<SidebarProvider defaultOpen>
<div className="flex min-h-screen">
<div className="flex min-h-screen w-full pr-2">
<AppSidebar />
<main className="flex-1 overflow-hidden">
<div className="flex h-14 items-center border-b px-4 gap-4">
<div className="flex h-14 w-full items-center border-b px-4 gap-4">
<SidebarTrigger />
<div className="font-medium">Inventory Management</div>
</div>
<div className="overflow-auto h-[calc(100vh-3.5rem)]">
</div>
<div className="overflow-auto h-[calc(100vh-3.5rem)] max-w-[1500px]">
{children}
</div>
</main>