cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(lst): added icons to the sidebar

Browse Source
This commit is contained in:
Blake Matthes
2025-02-20 10:25:35 -06:00
parent 54b1b6081a
commit 604fdf1545
9 changed files with 291 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/components/layout/side-components/admin.tsx
View File

@@ -1,4 +1,4 @@
import {Printer} from "lucide-react";
import {Atom, Logs, Minus, Plus, Server, Settings, ShieldCheck, Users, Webhook} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
@@ -6,41 +6,99 @@ import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from "../../ui/sidebar";
import {Collapsible, CollapsibleContent, CollapsibleTrigger} from "../../ui/collapsible";
const items = [
{
title: "Settings",
title: "Servers",
url: "#",
icon: Printer,
},
{
title: "Swagger",
url: "#",
icon: Printer,
},
{
title: "Logs",
url: "#",
icon: Printer,
},
{
title: "Users",
url: "#",
icon: Printer,
},
{
title: "UCD",
url: "#",
icon: Printer,
icon: Server,
isActive: false,
},
];
const data = {
navMain: [
{
title: "Admin",
url: "#",
icon: ShieldCheck,
items: [
{
title: "Settings",
url: "#",
icon: Settings,
isActive: false,
},
{
title: "Swagger",
url: "#",
icon: Webhook,
isActive: false,
},
{
title: "Logs",
url: "#",
icon: Logs,
isActive: false,
},
{
title: "Users",
url: "#",
icon: Users,
isActive: false,
},
{
title: "UCD",
url: "#",
icon: Atom,
isActive: false,
},
],
},
],
};
export function AdminSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Admin</SidebarGroupLabel>
<SidebarGroupLabel>Admin section</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{data.navMain.map((item, index) => (
<Collapsible key={item.title} defaultOpen={index === 1} className="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton>
<item.icon />
{item.title}{" "}
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
</SidebarMenuButton>
</CollapsibleTrigger>
{item.items?.length ? (
<CollapsibleContent>
<SidebarMenuSub>
{item.items.map((item) => (
<SidebarMenuSubItem key={item.title}>
<SidebarMenuSubButton asChild isActive={item.isActive}>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
) : null}
</SidebarMenuItem>
</Collapsible>
))}
</SidebarMenu>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>

75
frontend/src/components/layout/side-components/forklift.tsx
View File

@@ -1,4 +1,4 @@
import {Printer} from "lucide-react";
import {Forklift, Hourglass, Minus, Plus, Signature} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
@@ -6,21 +6,88 @@ import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from "../../ui/sidebar";
import {Collapsible, CollapsibleTrigger} from "../../ui/collapsible";
import {CollapsibleContent} from "@radix-ui/react-collapsible";
const items = [
{
title: "Qaulity Request",
title: "Gemone",
url: "#",
icon: Printer,
icon: Forklift,
isActive: false,
},
];
const data = {
navMain: [
{
title: "Forklift Management",
url: "#",
icon: Forklift,
items: [
{
title: "All Forklifts",
url: "#",
icon: Forklift,
},
{
title: "Leasing data",
url: "#",
isActive: false,
icon: Signature,
},
{
title: "Forklift Hours",
url: "#",
isActive: false,
icon: Hourglass,
},
],
},
],
};
export function ForkliftSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Forklift</SidebarGroupLabel>
<SidebarGroupLabel>Forklift Section</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{data.navMain.map((item, index) => (
<Collapsible key={item.title} defaultOpen={index === 1} className="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton>
<item.icon />
{item.title}{" "}
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
</SidebarMenuButton>
</CollapsibleTrigger>
{item.items?.length ? (
<CollapsibleContent>
<SidebarMenuSub>
{item.items.map((item) => (
<SidebarMenuSubItem key={item.title}>
<SidebarMenuSubButton asChild isActive={item.isActive}>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
) : null}
</SidebarMenuItem>
</Collapsible>
))}
</SidebarMenu>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>

10
frontend/src/components/layout/side-components/logistics.tsx
View File

@@ -1,4 +1,4 @@
import {Printer} from "lucide-react";
import {Cylinder, Package, Printer, Truck} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
@@ -12,22 +12,22 @@ const items = [
{
title: "Silo Adjustments",
url: "#",
icon: Printer,
icon: Cylinder,
},
{
title: "Bulk orders",
url: "#",
icon: Printer,
icon: Truck,
},
{
title: "Forecast",
url: "#",
icon: Printer,
icon: Truck,
},
{
title: "Ocme cycle counts",
url: "#",
icon: Printer,
icon: Package,
},
];