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"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Inventory Manager</title>
</head> </head>
<body> <body>
<div id="root"></div> <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 { #root {
max-width: 1280px; max-width: 1800px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;

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

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

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

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