mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-09 03:38:17 +00:00
ui improvemnt
This commit is contained in:
Marshal
@@ -5,14 +5,11 @@ import {
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronDown, ChevronRight, Train } from "lucide-react";
|
||||
import { Stack, Group, Text, Box, UnstyledButton, NavLink } from "@mantine/core";
|
||||
|
||||
import type { SidebarItem, SidebarSection } from "./types";
|
||||
|
||||
const EDR_LOGO = "/assets/logo.svg";
|
||||
|
||||
export interface FreightSidebarProps {
|
||||
sections: SidebarSection[];
|
||||
activeHref?: string;
|
||||
@@ -103,25 +100,6 @@ const FreightSidebar = ({
|
||||
setExpanded((current) => ({ ...current, [key]: !current[key] }));
|
||||
};
|
||||
|
||||
const navLinkClass = (active: boolean, depth: number) =>
|
||||
cn(
|
||||
"flex items-center justify-between rounded-md px-3 py-2.5 text-base font-medium leading-snug transition-colors",
|
||||
active
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: "text-gray-900 hover:bg-gray-100",
|
||||
depth > 0 && "text-[15px]",
|
||||
);
|
||||
|
||||
const iconClass = (active: boolean, sectionActive: boolean) =>
|
||||
cn(
|
||||
"flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-5 [&_svg]:w-5",
|
||||
active
|
||||
? "text-primary-foreground"
|
||||
: sectionActive
|
||||
? "text-gray-900"
|
||||
: "text-gray-900",
|
||||
);
|
||||
|
||||
const renderNavBranch = (
|
||||
children: SidebarItem[],
|
||||
depth: number,
|
||||
@@ -136,37 +114,37 @@ const FreightSidebar = ({
|
||||
const groupActive = branchContainsActive(child.children!);
|
||||
|
||||
return (
|
||||
<div key={key} className="flex flex-col gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={isOpen}
|
||||
<Stack key={key} gap={4}>
|
||||
<UnstyledButton
|
||||
onClick={() => toggleExpanded(key)}
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide transition-colors",
|
||||
groupActive
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "text-gray-900 hover:bg-gray-100",
|
||||
)}
|
||||
style={{
|
||||
background: groupActive ? "var(--mantine-color-green-1)" : "transparent",
|
||||
padding: "8px 12px",
|
||||
borderRadius: "8px",
|
||||
width: "100%",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<span className="truncate">{child.label}</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 text-gray-900 transition-transform",
|
||||
isOpen ? "rotate-0" : "-rotate-90",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{isOpen ? (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-0.5 border-l border-gray-200",
|
||||
depth === 0 ? "ml-3 pl-2" : "ml-2 pl-2",
|
||||
)}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text size="xs" fw={600} c={groupActive ? "green" : "dimmed"} tt="uppercase">
|
||||
{child.label}
|
||||
</Text>
|
||||
<ChevronDown
|
||||
size={14}
|
||||
style={{
|
||||
transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
|
||||
transition: "transform 0.2s",
|
||||
color: groupActive ? "var(--mantine-color-green-6)" : "var(--mantine-color-gray-5)",
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
{isOpen && (
|
||||
<Stack gap={2} style={{ paddingLeft: "12px", borderLeft: "2px solid var(--mantine-color-green-2)" }}>
|
||||
{renderNavBranch(child.children!, depth + 1, key)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -176,24 +154,49 @@ const FreightSidebar = ({
|
||||
const childActiveHref = isHrefActive(childHref);
|
||||
|
||||
return (
|
||||
<a
|
||||
<NavLink
|
||||
key={key}
|
||||
component="a"
|
||||
href={child.href}
|
||||
onClick={(event) => navigateTo(event, child.href!)}
|
||||
aria-current={childActiveHref ? "page" : undefined}
|
||||
className={navLinkClass(childActiveHref, depth)}
|
||||
>
|
||||
<span className="truncate">{child.label}</span>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0",
|
||||
childActiveHref ? "text-primary-foreground/80" : "text-gray-900",
|
||||
)}
|
||||
/>
|
||||
</a>
|
||||
onClick={(e) => navigateTo(e as any, child.href!)}
|
||||
label={child.label}
|
||||
active={childActiveHref}
|
||||
color="green"
|
||||
style={{
|
||||
borderRadius: "8px",
|
||||
cursor: "pointer",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
rightSection={<ChevronRight size={16} />}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const renderIconWell = (icon: React.ReactNode, active: boolean) => {
|
||||
if (!icon) return null;
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
borderRadius: "8px",
|
||||
flexShrink: 0,
|
||||
background: active
|
||||
? "linear-gradient(135deg, #10b981 0%, #059669 100%)"
|
||||
: "var(--mantine-color-gray-1)",
|
||||
color: active ? "white" : "var(--mantine-color-gray-6)",
|
||||
boxShadow: active ? "0 2px 6px rgba(16, 185, 129, 0.25)" : "none",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const renderTopLevelItem = (item: SidebarItem) => {
|
||||
if (!item.href) return null;
|
||||
|
||||
@@ -211,99 +214,127 @@ const FreightSidebar = ({
|
||||
const leafActive = isCurrentItem && !hasChildren;
|
||||
|
||||
return (
|
||||
<div key={item.href} className="flex flex-col gap-0.5">
|
||||
<div
|
||||
className={cn(
|
||||
"group flex items-center rounded-md transition-colors",
|
||||
leafActive
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: isSectionActive || (hasChildren && isCurrentItem)
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "text-gray-900 hover:bg-gray-100",
|
||||
)}
|
||||
>
|
||||
<a
|
||||
href={item.href}
|
||||
onClick={(event) => navigateTo(event, item.href!)}
|
||||
aria-current={isCurrentItem ? "page" : undefined}
|
||||
className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-sm leading-snug"
|
||||
>
|
||||
{item.icon ? (
|
||||
<span className={iconClass(leafActive, isActive)}>
|
||||
{item.icon}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="truncate">{item.label}</span>
|
||||
</a>
|
||||
|
||||
{hasChildren ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Toggle ${item.label}`}
|
||||
aria-expanded={isOpen}
|
||||
onClick={() => toggleExpanded(item.href!)}
|
||||
className={cn(
|
||||
"mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors",
|
||||
leafActive
|
||||
? "text-primary-foreground hover:bg-white/10"
|
||||
: "text-gray-900 hover:bg-gray-200/80",
|
||||
)}
|
||||
>
|
||||
<Stack key={item.href} gap={0}>
|
||||
<NavLink
|
||||
component="a"
|
||||
href={item.href}
|
||||
onClick={(e) => navigateTo(e as any, item.href!)}
|
||||
label={item.label}
|
||||
leftSection={renderIconWell(item.icon, isActive)}
|
||||
active={leafActive}
|
||||
color="green"
|
||||
variant="light"
|
||||
style={{
|
||||
borderRadius: "10px",
|
||||
cursor: "pointer",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
rightSection={
|
||||
hasChildren ? (
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-4 w-4 transition-transform",
|
||||
isOpen ? "rotate-0" : "-rotate-90",
|
||||
)}
|
||||
size={16}
|
||||
style={{
|
||||
transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
|
||||
transition: "transform 0.2s",
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
toggleExpanded(item.href!);
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
className={cn(
|
||||
"mr-3 flex h-4 w-4 shrink-0 items-center justify-center",
|
||||
leafActive ? "text-primary-foreground/80" : "text-gray-900",
|
||||
)}
|
||||
aria-hidden
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<ChevronRight size={16} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
{hasChildren && isOpen ? (
|
||||
<div className="ml-3 flex flex-col gap-1 border-l border-gray-200 pl-2">
|
||||
{hasChildren && isOpen && (
|
||||
<Stack gap={4} style={{ paddingLeft: "16px", borderLeft: "2px solid var(--mantine-color-green-2)" }}>
|
||||
{renderNavBranch(item.children!, 0, item.href)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="flex h-full max-h-full w-[280px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
|
||||
<div className="flex shrink-0 items-center gap-2.5 border-b border-gray-100 px-5 py-5">
|
||||
<img src={EDR_LOGO} alt="EDR Freight" className="h-9 w-auto" />
|
||||
<span className="text-lg font-semibold tracking-tight text-gray-900">
|
||||
EDR Freight
|
||||
</span>
|
||||
</div>
|
||||
<Box
|
||||
component="aside"
|
||||
style={{
|
||||
height: "100%",
|
||||
maxHeight: "100%",
|
||||
width: "280px",
|
||||
flexShrink: 0,
|
||||
borderRadius: "12px",
|
||||
border: "1px solid var(--mantine-color-gray-2)",
|
||||
background: "white",
|
||||
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Group
|
||||
gap={12}
|
||||
px="lg"
|
||||
py="md"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-gray-2)",
|
||||
flexShrink: 0,
|
||||
height: "80px",
|
||||
}}
|
||||
wrap="nowrap"
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
borderRadius: "12px",
|
||||
background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
|
||||
boxShadow: "0 4px 12px rgba(16, 185, 129, 0.3)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Train size={24} color="white" strokeWidth={2} />
|
||||
</Box>
|
||||
<Stack gap={0} style={{ minWidth: 0 }}>
|
||||
<Text size="md" fw={700} style={{ letterSpacing: "-0.3px", lineHeight: 1.2 }}>
|
||||
EDR Freight
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed" fw={500} style={{ letterSpacing: "0.3px" }}>
|
||||
Backoffice
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<nav className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto overscroll-contain px-3 py-4">
|
||||
<Stack
|
||||
component="nav"
|
||||
gap="lg"
|
||||
p="md"
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
overflowY: "auto",
|
||||
overscrollBehavior: "contain",
|
||||
}}
|
||||
>
|
||||
{sections.map((section) => (
|
||||
<div key={section.title} className="flex flex-col gap-1">
|
||||
<p
|
||||
className={cn(
|
||||
"px-3 pb-1 text-xs font-semibold uppercase tracking-wide",
|
||||
// Use a very light gray for ALL section titles, not just when mutedTitle is specified
|
||||
"text-sidebar-secondary-foreground",
|
||||
)}
|
||||
>
|
||||
<Stack key={section.title} gap={8}>
|
||||
<Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: "0.5px", paddingLeft: "8px" }}>
|
||||
{section.title}
|
||||
</p>
|
||||
{section.items.map((item) => renderTopLevelItem(item))}
|
||||
</div>
|
||||
</Text>
|
||||
<Stack gap={2}>
|
||||
{section.items.map((item) => renderTopLevelItem(item))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user