Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-07 20:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: sidebar ui

Browse Source
This commit is contained in:
Nathnael
2026-07-04 08:39:16 +00:00
parent de87845f22
commit ee335e63ba
1 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
View File

@@ -18,6 +18,7 @@ import {
} from "react"; } from "react";
import type { SidebarItem, SidebarSection } from "./types"; import type { SidebarItem, SidebarSection } from "./types";
import { Link } from "react-router-dom";
export interface FreightSidebarProps { export interface FreightSidebarProps {
sections: SidebarSection[]; sections: SidebarSection[];
@@ -35,15 +36,15 @@ const BRAND_LOGO = "/assets/logo.svg";
const navClassNames = (active: boolean) => const navClassNames = (active: boolean) =>
active active
? { ? {
root: "rounded-md transition-all duration-150 bg-edr-soft! ring-1 ring-inset ring-edr-primary/40 [&_svg]:size-[16px]", root: "rounded-md transition-all py-1.5! duration-150 bg-edr-soft! ring-1 ring-inset ring-edr-primary/40 [&_svg]:size-[16px]",
label: "text-edr-primary-dark! font-medium! text-sm!", label: "text-edr-primary-dark! font-medium! text-sm!",
section: "text-edr-primary-dark!", section: "text-edr-primary-dark!",
} }
: { : {
root: "rounded-md transition-all duration-150 hover:bg-[#EEF2F6]! [&_svg]:size-4", root: "rounded-md transition-all py-1.5! duration-150 hover:bg-[#EEF2F6]! [&_svg]:size-4",
label: "text-edr-text! font-medium! text-sm! hover:text-edr-ink!", label: "text-edr-text! font-medium! text-sm! hover:text-edr-ink!",
section: "text-edr-text!", section: "text-edr-text!",
}; };
const itemKey = (parentKey: string, item: SidebarItem, index: number) => const itemKey = (parentKey: string, item: SidebarItem, index: number) =>
`${parentKey}/${item.href ?? item.label}/${index}`; `${parentKey}/${item.href ?? item.label}/${index}`;
@@ -65,7 +66,9 @@ const FreightSidebar = ({
const isHrefActive = useCallback( const isHrefActive = useCallback(
(href: string) => { (href: string) => {
const normalized = href.toLowerCase(); const normalized = href.toLowerCase();
return activePath === normalized || activePath.startsWith(`${normalized}/`); return (
activePath === normalized || activePath.startsWith(`${normalized}/`)
);
}, },
[activePath], [activePath],
); );
@@ -109,9 +112,7 @@ const FreightSidebar = ({
if (hasChildren) { if (hasChildren) {
const isLink = !!item.href; const isLink = !!item.href;
const active = const active = isLink ? isHrefActive(item.href!) : false;
(isLink ? isHrefActive(item.href!) : false) ||
branchActive(item.children!);
const isOpen = openMap[key] ?? false; const isOpen = openMap[key] ?? false;
return ( return (
@@ -124,7 +125,7 @@ const FreightSidebar = ({
active={active} active={active}
opened={isOpen} opened={isOpen}
classNames={navClassNames(active)} classNames={navClassNames(active)}
onClick={ () => toggle(key)} onClick={() => toggle(key)}
rightSection={ rightSection={
<Box <Box
component="span" component="span"
@@ -140,7 +141,9 @@ const FreightSidebar = ({
<ChevronDown <ChevronDown
size={16} size={16}
className="text-edr-muted transition-transform duration-200" className="text-edr-muted transition-transform duration-200"
style={{ transform: isOpen ? "rotate(-180deg)" : "rotate(180deg)" }} style={{
transform: isOpen ? "rotate(-180deg)" : "rotate(180deg)",
}}
/> />
</Box> </Box>
} }
@@ -161,8 +164,9 @@ const FreightSidebar = ({
label={item.label} label={item.label}
leftSection={item.icon} leftSection={item.icon}
active={active} active={active}
component={Link}
classNames={navClassNames(active)} classNames={navClassNames(active)}
onClick={() => onNavigate?.(item.href!)} to={item.href!}
/> />
); );
}, },
@@ -178,7 +182,7 @@ const FreightSidebar = ({
tt="uppercase" tt="uppercase"
px="sm" px="sm"
mb={6} mb={6}
className={ "text-edr-muted!" } className={"text-edr-muted!"}
style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }} style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }}
> >
{section.title} {section.title}
@@ -232,14 +236,24 @@ const FreightSidebar = ({
</Box> </Box>
</Group> </Group>
{onClose && ( {onClose && (
<UnstyledButton onClick={onClose} hiddenFrom="sm" aria-label="Close sidebar"> <UnstyledButton
onClick={onClose}
hiddenFrom="sm"
aria-label="Close sidebar"
>
<X size={18} className="text-edr-muted" strokeWidth={1.8} /> <X size={18} className="text-edr-muted" strokeWidth={1.8} />
</UnstyledButton> </UnstyledButton>
)} )}
</Box> </Box>
{/* Nav */} {/* Nav */}
<AppShell.Section grow component={ScrollArea} type="never" px="sm" pb="md"> <AppShell.Section
grow
component={ScrollArea}
type="never"
px="sm"
pb="md"
>
<Stack gap="lg">{renderedSections}</Stack> <Stack gap="lg">{renderedSections}</Stack>
</AppShell.Section> </AppShell.Section>
</AppShell.Navbar> </AppShell.Navbar>