Jason Woltje
c939a541a7
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
750 lines
19 KiB
TypeScript
750 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import Image from "next/image";
|
|
import { useAuth } from "@/lib/auth/auth-context";
|
|
import { fetchUserWorkspaces } from "@/lib/api/workspaces";
|
|
import { useSidebar } from "./SidebarContext";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface NavBadge {
|
|
label: string;
|
|
pulse?: boolean;
|
|
}
|
|
|
|
interface NavItemConfig {
|
|
href: string;
|
|
label: string;
|
|
icon: React.JSX.Element;
|
|
badge?: NavBadge;
|
|
}
|
|
|
|
interface NavGroup {
|
|
label: string;
|
|
items: NavItemConfig[];
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SVG Icons (16x16 viewBox, stroke="currentColor", strokeWidth="1.5")
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function IconDashboard(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<rect x="1" y="1" width="6" height="6" rx="1" />
|
|
<rect x="9" y="1" width="6" height="6" rx="1" />
|
|
<rect x="1" y="9" width="6" height="6" rx="1" />
|
|
<rect x="9" y="9" width="6" height="6" rx="1" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconProjects(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<rect x="1" y="4" width="14" height="10" rx="1.5" />
|
|
<path d="M1 7h14" />
|
|
<path d="M5 4V2.5A.5.5 0 0 1 5.5 2h5a.5.5 0 0 1 .5.5V4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconProjectWorkspace(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="8" cy="4" r="2" />
|
|
<circle cx="3" cy="12" r="2" />
|
|
<circle cx="13" cy="12" r="2" />
|
|
<path d="M8 6v2M5 12h6M6 8l-2 2M10 8l2 2" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconKanban(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<rect x="1" y="2" width="4" height="12" rx="1" />
|
|
<rect x="6" y="2" width="4" height="12" rx="1" />
|
|
<rect x="11" y="2" width="4" height="12" rx="1" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconFileManager(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h4l2 2h3A1.5 1.5 0 0 1 14 5.5v7A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5v-9z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconLogs(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M2 4h12M2 8h8M2 12h10" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconTerminal(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<rect x="1" y="2" width="14" height="12" rx="1.5" />
|
|
<path d="M4 6l3 3-3 3M9 12h3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconSettings(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="8" cy="8" r="2.5" />
|
|
<path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconChevronLeft(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.75"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M10 3L5 8l5 5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconChevronRight(): React.JSX.Element {
|
|
return (
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.75"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6 3l5 5-5 5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Nav groups definition
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const NAV_GROUPS: NavGroup[] = [
|
|
{
|
|
label: "Overview",
|
|
items: [
|
|
{
|
|
href: "/",
|
|
label: "Dashboard",
|
|
icon: <IconDashboard />,
|
|
badge: { label: "live", pulse: true },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Workspace",
|
|
items: [
|
|
{
|
|
href: "/projects",
|
|
label: "Projects",
|
|
icon: <IconProjects />,
|
|
},
|
|
{
|
|
href: "/workspace",
|
|
label: "Project Workspace",
|
|
icon: <IconProjectWorkspace />,
|
|
},
|
|
{
|
|
href: "/kanban",
|
|
label: "Kanban",
|
|
icon: <IconKanban />,
|
|
},
|
|
{
|
|
href: "/files",
|
|
label: "File Manager",
|
|
icon: <IconFileManager />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Operations",
|
|
items: [
|
|
{
|
|
href: "/logs",
|
|
label: "Logs & Telemetry",
|
|
icon: <IconLogs />,
|
|
badge: { label: "live", pulse: true },
|
|
},
|
|
{
|
|
href: "/terminal",
|
|
label: "Terminal",
|
|
icon: <IconTerminal />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "System",
|
|
items: [
|
|
{
|
|
href: "/settings",
|
|
label: "Settings",
|
|
icon: <IconSettings />,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helper: derive initials from display name
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function getInitials(name: string): string {
|
|
const parts = name.trim().split(/\s+/);
|
|
const first = parts[0] ?? "";
|
|
if (parts.length === 1) {
|
|
return first.slice(0, 2).toUpperCase();
|
|
}
|
|
const last = parts[parts.length - 1] ?? "";
|
|
return ((first[0] ?? "") + (last[0] ?? "")).toUpperCase();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// NavBadge component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface NavBadgeProps {
|
|
badge: NavBadge;
|
|
}
|
|
|
|
function NavBadgeChip({ badge }: NavBadgeProps): React.JSX.Element {
|
|
const pulseStyle: React.CSSProperties = badge.pulse
|
|
? {
|
|
background: "rgba(47,128,255,0.15)",
|
|
color: "var(--primary-l)",
|
|
}
|
|
: {
|
|
background: "var(--surface-2)",
|
|
color: "var(--muted)",
|
|
};
|
|
|
|
return (
|
|
<span
|
|
style={{
|
|
marginLeft: "auto",
|
|
fontSize: "0.68rem",
|
|
fontFamily: "var(--mono)",
|
|
padding: "1px 6px",
|
|
borderRadius: "10px",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "4px",
|
|
flexShrink: 0,
|
|
...pulseStyle,
|
|
}}
|
|
aria-label={badge.pulse ? `${badge.label} indicator` : badge.label}
|
|
>
|
|
{badge.pulse && (
|
|
<span
|
|
style={{
|
|
display: "inline-block",
|
|
width: "5px",
|
|
height: "5px",
|
|
borderRadius: "50%",
|
|
background: "var(--primary-l)",
|
|
boxShadow: "0 0 4px var(--primary)",
|
|
animation: "pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
{badge.label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// NavItem component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface NavItemProps {
|
|
item: NavItemConfig;
|
|
isActive: boolean;
|
|
collapsed: boolean;
|
|
}
|
|
|
|
function NavItem({ item, isActive, collapsed }: NavItemProps): React.JSX.Element {
|
|
const baseStyle: React.CSSProperties = {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "11px",
|
|
padding: "9px 10px",
|
|
borderRadius: "var(--r-sm)",
|
|
fontSize: "0.875rem",
|
|
fontWeight: 500,
|
|
color: isActive ? "var(--text)" : "var(--muted)",
|
|
background: isActive ? "var(--surface)" : "transparent",
|
|
position: "relative",
|
|
transition: "background 0.12s ease, color 0.12s ease",
|
|
textDecoration: "none",
|
|
justifyContent: collapsed ? "center" : undefined,
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
};
|
|
|
|
const iconStyle: React.CSSProperties = {
|
|
width: "16px",
|
|
height: "16px",
|
|
flexShrink: 0,
|
|
opacity: isActive ? 1 : 0.7,
|
|
transition: "opacity 0.12s ease",
|
|
};
|
|
|
|
const content = (
|
|
<>
|
|
{/* Active left accent bar */}
|
|
{isActive && (
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
top: "6px",
|
|
bottom: "6px",
|
|
width: "3px",
|
|
background: "var(--primary)",
|
|
borderRadius: "0 2px 2px 0",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
|
|
{/* Icon */}
|
|
<span style={iconStyle}>{item.icon}</span>
|
|
|
|
{/* Label and badge — hidden when collapsed */}
|
|
{!collapsed && (
|
|
<>
|
|
<span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis" }}>
|
|
{item.label}
|
|
</span>
|
|
{item.badge !== undefined && <NavBadgeChip badge={item.badge} />}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const sharedProps = {
|
|
style: baseStyle,
|
|
"aria-current": isActive ? ("page" as const) : undefined,
|
|
title: collapsed ? item.label : undefined,
|
|
onMouseEnter: (e: React.MouseEvent<HTMLElement>): void => {
|
|
if (!isActive) {
|
|
(e.currentTarget as HTMLElement).style.background = "var(--surface)";
|
|
(e.currentTarget as HTMLElement).style.color = "var(--text-2)";
|
|
const iconEl = (e.currentTarget as HTMLElement).querySelector<HTMLElement>(
|
|
"[data-nav-icon]"
|
|
);
|
|
if (iconEl) iconEl.style.opacity = "1";
|
|
}
|
|
},
|
|
onMouseLeave: (e: React.MouseEvent<HTMLElement>): void => {
|
|
if (!isActive) {
|
|
(e.currentTarget as HTMLElement).style.background = "transparent";
|
|
(e.currentTarget as HTMLElement).style.color = "var(--muted)";
|
|
const iconEl = (e.currentTarget as HTMLElement).querySelector<HTMLElement>(
|
|
"[data-nav-icon]"
|
|
);
|
|
if (iconEl) iconEl.style.opacity = "0.7";
|
|
}
|
|
},
|
|
};
|
|
|
|
if (item.href.startsWith("#")) {
|
|
return (
|
|
<a href={item.href} {...sharedProps}>
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link href={item.href} {...sharedProps}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// UserCard component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface UserCardProps {
|
|
collapsed: boolean;
|
|
}
|
|
|
|
function UserCard({ collapsed }: UserCardProps): React.JSX.Element {
|
|
const { user } = useAuth();
|
|
const [roleLabel, setRoleLabel] = useState<string>("Member");
|
|
|
|
useEffect(() => {
|
|
if (user === null) return;
|
|
fetchUserWorkspaces()
|
|
.then((workspaces) => {
|
|
if (workspaces.length === 0) return;
|
|
const first = workspaces[0];
|
|
if (!first) return;
|
|
const role = first.role;
|
|
setRoleLabel(role.charAt(0) + role.slice(1).toLowerCase());
|
|
})
|
|
.catch(() => {
|
|
// keep default
|
|
});
|
|
}, [user]);
|
|
|
|
const displayName = user?.name ?? "User";
|
|
const initials = getInitials(displayName);
|
|
const role = roleLabel;
|
|
|
|
return (
|
|
<footer
|
|
style={{
|
|
padding: "12px 10px",
|
|
borderTop: "1px solid var(--border)",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "10px",
|
|
padding: "8px 10px",
|
|
borderRadius: "6px",
|
|
cursor: "pointer",
|
|
transition: "background 0.12s ease",
|
|
justifyContent: collapsed ? "center" : undefined,
|
|
}}
|
|
role="button"
|
|
tabIndex={0}
|
|
title={collapsed ? `${displayName} — ${role}` : undefined}
|
|
onMouseEnter={(e): void => {
|
|
(e.currentTarget as HTMLElement).style.background = "var(--surface)";
|
|
}}
|
|
onMouseLeave={(e): void => {
|
|
(e.currentTarget as HTMLElement).style.background = "transparent";
|
|
}}
|
|
onKeyDown={(e): void => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
aria-label={`User: ${displayName}, Role: ${role}`}
|
|
>
|
|
{/* Avatar */}
|
|
<div
|
|
style={{
|
|
width: "30px",
|
|
height: "30px",
|
|
borderRadius: "50%",
|
|
background: "linear-gradient(135deg, var(--ms-blue-500), var(--ms-purple-500))",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "0.75rem",
|
|
fontWeight: 700,
|
|
color: "#fff",
|
|
flexShrink: 0,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{user?.image ? (
|
|
<Image
|
|
src={user.image}
|
|
alt={`${displayName} avatar`}
|
|
width={30}
|
|
height={30}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" }}
|
|
/>
|
|
) : (
|
|
<span aria-hidden="true">{initials}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Name and role — hidden when collapsed */}
|
|
{!collapsed && (
|
|
<>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div
|
|
style={{
|
|
fontSize: "0.83rem",
|
|
fontWeight: 600,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
color: "var(--text)",
|
|
}}
|
|
>
|
|
{displayName}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "0.72rem",
|
|
color: "var(--muted)",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{role}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Online status dot */}
|
|
<div
|
|
style={{
|
|
marginLeft: "auto",
|
|
width: "7px",
|
|
height: "7px",
|
|
borderRadius: "50%",
|
|
background: "var(--success)",
|
|
boxShadow: "0 0 6px var(--success)",
|
|
flexShrink: 0,
|
|
}}
|
|
aria-label="Online"
|
|
role="img"
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// CollapseToggle component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface CollapseToggleProps {
|
|
collapsed: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
function CollapseToggle({ collapsed, onToggle }: CollapseToggleProps): React.JSX.Element {
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "4px 10px 8px",
|
|
display: "flex",
|
|
justifyContent: collapsed ? "center" : "flex-end",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
|
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "26px",
|
|
height: "26px",
|
|
borderRadius: "6px",
|
|
color: "var(--muted)",
|
|
transition: "background 0.12s ease, color 0.12s ease",
|
|
cursor: "pointer",
|
|
flexShrink: 0,
|
|
}}
|
|
onMouseEnter={(e): void => {
|
|
(e.currentTarget as HTMLElement).style.background = "var(--surface)";
|
|
(e.currentTarget as HTMLElement).style.color = "var(--text-2)";
|
|
}}
|
|
onMouseLeave={(e): void => {
|
|
(e.currentTarget as HTMLElement).style.background = "transparent";
|
|
(e.currentTarget as HTMLElement).style.color = "var(--muted)";
|
|
}}
|
|
>
|
|
{collapsed ? <IconChevronRight /> : <IconChevronLeft />}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main AppSidebar component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
/**
|
|
* Application sidebar — navigation groups, collapse toggle, and user card.
|
|
* Logo lives in AppHeader per MS15 design spec.
|
|
*/
|
|
export function AppSidebar(): React.JSX.Element {
|
|
const pathname = usePathname();
|
|
const { collapsed, toggleCollapsed, mobileOpen, setMobileOpen, isMobile } = useSidebar();
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile backdrop — rendered behind the sidebar when open on mobile */}
|
|
{isMobile && mobileOpen && (
|
|
<div
|
|
aria-hidden="true"
|
|
onClick={() => {
|
|
setMobileOpen(false);
|
|
}}
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
top: "var(--topbar-h)",
|
|
background: "rgba(0,0,0,0.5)",
|
|
zIndex: 140,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<aside
|
|
id="app-sidebar"
|
|
className="app-sidebar"
|
|
data-collapsed={collapsed ? "true" : undefined}
|
|
data-mobile-open={mobileOpen ? "true" : undefined}
|
|
aria-label="Application navigation"
|
|
>
|
|
{/* Sidebar body — scrollable nav area */}
|
|
<nav
|
|
style={{
|
|
flex: 1,
|
|
overflowY: "auto",
|
|
overflowX: "hidden",
|
|
padding: "10px 10px",
|
|
}}
|
|
aria-label="Main navigation"
|
|
>
|
|
{NAV_GROUPS.map((group) => (
|
|
<div key={group.label} style={{ marginBottom: "18px" }}>
|
|
{/* Group label — hidden when collapsed */}
|
|
{!collapsed && (
|
|
<p
|
|
style={{
|
|
fontSize: "0.67rem",
|
|
fontWeight: 600,
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.09em",
|
|
color: "var(--muted)",
|
|
padding: "0 10px",
|
|
marginBottom: "4px",
|
|
userSelect: "none",
|
|
}}
|
|
>
|
|
{group.label}
|
|
</p>
|
|
)}
|
|
|
|
{/* Nav items */}
|
|
<ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
|
|
{group.items.map((item) => {
|
|
const isActive =
|
|
item.href === "/"
|
|
? pathname === "/"
|
|
: item.href.startsWith("#")
|
|
? false
|
|
: pathname === item.href || pathname.startsWith(item.href + "/");
|
|
|
|
return (
|
|
<li key={item.href}>
|
|
<NavItem item={item} isActive={isActive} collapsed={collapsed} />
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
|
|
{/* Collapse toggle — anchored at bottom of nav */}
|
|
<CollapseToggle collapsed={collapsed} onToggle={toggleCollapsed} />
|
|
</nav>
|
|
|
|
{/* User card footer */}
|
|
<UserCard collapsed={collapsed} />
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|