@fairmint/ui 0.3.27 → 0.3.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layout/SideNav/SideNav.cjs +8 -1
- package/dist/components/layout/SideNav/SideNav.cjs.map +1 -1
- package/dist/components/layout/SideNav/SideNav.d.ts.map +1 -1
- package/dist/components/layout/SideNav/SideNav.js +8 -1
- package/dist/components/layout/SideNav/SideNav.js.map +1 -1
- package/package.json +1 -1
|
@@ -17,6 +17,7 @@ const Menu = require("../../../node_modules/@mantine/core/esm/components/Menu/Me
|
|
|
17
17
|
const NavLink = require("../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.cjs");
|
|
18
18
|
const SIDE_NAV_WIDTH = 260;
|
|
19
19
|
const SIDE_NAV_COLLAPSED_WIDTH = 80;
|
|
20
|
+
const SIDE_NAV_FLOATING_Z_INDEX = 1300;
|
|
20
21
|
function hasActiveDescendant(item) {
|
|
21
22
|
return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;
|
|
22
23
|
}
|
|
@@ -103,6 +104,8 @@ function CollapseToggle({
|
|
|
103
104
|
label,
|
|
104
105
|
position: "right",
|
|
105
106
|
withArrow: true,
|
|
107
|
+
withinPortal: true,
|
|
108
|
+
zIndex: SIDE_NAV_FLOATING_Z_INDEX,
|
|
106
109
|
events: { hover: true, focus: true, touch: true },
|
|
107
110
|
disabled: !visible,
|
|
108
111
|
children: button
|
|
@@ -248,13 +251,15 @@ function CollapsedSideNavNode({ color, item, onItemClick }) {
|
|
|
248
251
|
children: leftSection
|
|
249
252
|
}
|
|
250
253
|
);
|
|
251
|
-
const control = hasChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { position: "right-start", offset: 8, withinPortal: true, children: [
|
|
254
|
+
const control = hasChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { position: "right-start", offset: 8, withinPortal: true, zIndex: SIDE_NAV_FLOATING_Z_INDEX, children: [
|
|
252
255
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
253
256
|
Tooltip.Tooltip,
|
|
254
257
|
{
|
|
255
258
|
label: labelText,
|
|
256
259
|
position: "right",
|
|
257
260
|
withArrow: true,
|
|
261
|
+
withinPortal: true,
|
|
262
|
+
zIndex: SIDE_NAV_FLOATING_Z_INDEX,
|
|
258
263
|
events: { hover: true, focus: true, touch: true },
|
|
259
264
|
children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Target, { children: link })
|
|
260
265
|
}
|
|
@@ -273,6 +278,8 @@ function CollapsedSideNavNode({ color, item, onItemClick }) {
|
|
|
273
278
|
label: labelText,
|
|
274
279
|
position: "right",
|
|
275
280
|
withArrow: true,
|
|
281
|
+
withinPortal: true,
|
|
282
|
+
zIndex: SIDE_NAV_FLOATING_Z_INDEX,
|
|
276
283
|
events: { hover: true, focus: true, touch: true },
|
|
277
284
|
children: link
|
|
278
285
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import {\n ActionIcon,\n Box,\n Divider,\n Group,\n Menu,\n NavLink,\n type NavLinkProps,\n Stack,\n Tooltip,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { useUncontrolled } from \"@mantine/hooks\";\nimport { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from \"@tabler/icons-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\n/** Expanded product side-nav width (Brand System shell metric). */\nexport const SIDE_NAV_WIDTH = 260;\n\n/**\n * Collapsed icon-rail width.\n * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.\n */\nexport const SIDE_NAV_COLLAPSED_WIDTH = 80;\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). */\n id: string;\n /** Display label. */\n label: ReactNode;\n /**\n * Accessible name when `label` is not a plain string.\n * Also used for collapsed tooltips and letter-fallback derivation.\n */\n ariaLabel?: string;\n /** Icon element. */\n icon?: ReactNode;\n /** Optional content rendered at the end of the item, such as a badge. */\n rightSection?: ReactNode;\n /** Whether this item is currently active. */\n active?: boolean;\n /** Whether the item is unavailable. */\n disabled?: boolean;\n /** Nested navigation items. */\n children?: SideNavItem[];\n /** Controlled expanded state for items with children. */\n open?: boolean;\n}\n\nexport interface SideNavSection {\n /** Unique identifier for the section. */\n id: string;\n /** Navigation items in this section. */\n items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n /** Navigation items to render when section headings are not needed. */\n items?: SideNavItem[];\n /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */\n sections?: SideNavSection[];\n /** Callback when a nav item is clicked. Receives the item's `id`. */\n onItemClick: (id: string) => void;\n /** Active color. @default colors.primary */\n color?: string;\n /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n ariaLabel?: string;\n /** Render a light right border when the parent shell does not already own the divider. @default false */\n withBorder?: boolean;\n /**\n * Logo or other chrome above the nav list.\n * Consumers own expanded wordmark vs collapsed mark switching.\n */\n header?: ReactNode;\n /**\n * Primary nav CTA pinned above the profile (Investor \"Add Investment\", Studio \"New\").\n * Prefer this over stuffing the CTA into `items`.\n */\n cta?: ReactNode;\n /**\n * Account / profile control pinned to the bottom of the rail.\n * Product shells keep profile here — not in the scrollable destination list or AppHeader.\n */\n profile?: ReactNode;\n /**\n * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.\n */\n footer?: ReactNode;\n /** Controlled collapsed (icon-rail) state. */\n collapsed?: boolean;\n /** Uncontrolled initial collapsed state. @default false */\n defaultCollapsed?: boolean;\n /** Called when the user toggles collapse. */\n onCollapsedChange?: (collapsed: boolean) => void;\n /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */\n collapsible?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\n/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */\nexport function getSideNavItemLabelText(item: Pick<SideNavItem, \"label\" | \"ariaLabel\">): string {\n if (item.ariaLabel) {\n return item.ariaLabel;\n }\n if (typeof item.label === \"string\") {\n return item.label;\n }\n if (typeof item.label === \"number\") {\n return String(item.label);\n }\n return \"Item\";\n}\n\n/** First letter/number monogram for icon-less items in the collapsed rail. */\nexport function getSideNavLetterFallback(labelText: string): string {\n const match = labelText.match(/[\\p{L}\\p{N}]/u);\n return match ? match[0].toUpperCase() : \"?\";\n}\n\nfunction LetterFallback({ letter, active = false }: { letter: string; active?: boolean }) {\n return (\n <Box\n component=\"span\"\n aria-hidden\n data-active={active || undefined}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: 20,\n height: 20,\n flexShrink: 0,\n fontSize: 12,\n fontWeight: active ? 700 : 600,\n lineHeight: 1,\n // Selected chrome lives on the parent control — glyph matches icon sizing.\n color: active ? fairmintVars.colorIconOnSurfaceSelected : \"inherit\",\n }}\n >\n {letter}\n </Box>\n );\n}\n\nfunction CollapseToggle({\n collapsed,\n onToggle,\n visible,\n}: {\n collapsed: boolean;\n onToggle: () => void;\n /** When false, hide visually but keep focusable for keyboard users via opacity/focus styles. */\n visible: boolean;\n}) {\n const label = collapsed ? \"Expand navigation\" : \"Collapse navigation\";\n const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;\n\n const button = (\n <UnstyledButton\n data-sidenav-collapse\n aria-label={label}\n aria-expanded={!collapsed}\n onClick={onToggle}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: 32,\n flexShrink: 0,\n borderRadius: radii.md,\n color: fairmintVars.colorIconTertiary,\n opacity: visible ? 1 : 0,\n pointerEvents: visible ? \"auto\" : \"none\",\n transition: \"opacity 120ms ease\",\n // Keep a layout slot when expanded so the wordmark does not shift on hover.\n // Collapsed: always a fixed control below the logo.\n width: 32,\n overflow: \"hidden\",\n padding: 0,\n }}\n >\n <Icon size={20} stroke={1.5} aria-hidden />\n </UnstyledButton>\n );\n\n if (!collapsed) {\n return button;\n }\n\n return (\n <Tooltip\n label={label}\n position=\"right\"\n withArrow\n events={{ hover: true, focus: true, touch: true }}\n disabled={!visible}\n >\n {button}\n </Tooltip>\n );\n}\n\nfunction resolveLeftSection(\n item: SideNavItem,\n labelText: string,\n { requireIcon, active }: { requireIcon: boolean; active?: boolean },\n): ReactNode {\n if (item.icon) {\n return item.icon;\n }\n if (requireIcon) {\n return <LetterFallback letter={getSideNavLetterFallback(labelText)} active={Boolean(active)} />;\n }\n return undefined;\n}\n\n/** Collapsed rail control size — matches square CTA chrome. */\nconst COLLAPSED_ITEM_SIZE = 36;\n\nconst navLinkStyles = (active: boolean | undefined): NavLinkProps[\"styles\"] => ({\n root: {\n color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n fontWeight: active ? 500 : 400,\n borderRadius: radii.md,\n // Prefer Fairmint selected surface over Mantine defaults for active chrome.\n ...(active\n ? {\n \"--nl-bg\": fairmintVars.colorSurfaceSelected,\n \"--nl-hover\": fairmintVars.colorSurfaceSelected,\n \"--nl-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n }\n : {}),\n },\n section: {\n color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary,\n },\n});\n\ninterface SideNavNodeProps {\n color: string;\n item: SideNavItem;\n onItemClick: (id: string) => void;\n collapsed: boolean;\n}\n\nfunction ExpandedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const containsActiveItem = hasActiveDescendant(item);\n const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n const labelText = getSideNavItemLabelText(item);\n\n useEffect(() => {\n if (item.open !== undefined) {\n setOpened(item.open);\n } else if (containsActiveItem) {\n setOpened(true);\n }\n }, [containsActiveItem, item.open]);\n\n const hasChildren = Boolean(item.children?.length);\n\n return (\n <NavLink\n component=\"button\"\n type=\"button\"\n label={item.label}\n leftSection={resolveLeftSection(item, labelText, {\n requireIcon: false,\n active: item.active,\n })}\n rightSection={item.rightSection}\n active={item.active}\n disabled={item.disabled}\n color={color}\n variant=\"light\"\n childrenOffset={16}\n opened={hasChildren ? opened : undefined}\n aria-label={item.ariaLabel}\n onClick={\n hasChildren\n ? () => setOpened((currentOpened) => !currentOpened)\n : () => onItemClick(item.id)\n }\n styles={navLinkStyles(item.active)}\n >\n {item.children?.map((child) => (\n <ExpandedSideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n ))}\n </NavLink>\n );\n}\n\n/** Flatten nested groups to leaves for the collapsed flyout (one actionable list). */\nfunction collectCollapsedMenuLeaves(items: SideNavItem[]): SideNavItem[] {\n return items.flatMap((item) =>\n item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item],\n );\n}\n\nfunction CollapsedNestedMenuItems({\n items,\n onItemClick,\n color,\n}: {\n items: SideNavItem[];\n onItemClick: (id: string) => void;\n color: string;\n}) {\n return collectCollapsedMenuLeaves(items).map((child) => {\n const childLabel = getSideNavItemLabelText(child);\n const isActive = Boolean(child.active);\n return (\n <Menu.Item\n key={child.id}\n disabled={child.disabled}\n leftSection={resolveLeftSection(child, childLabel, {\n requireIcon: true,\n active: isActive,\n })}\n onClick={() => onItemClick(child.id)}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n color={isActive ? color : undefined}\n style={\n isActive\n ? {\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n fontWeight: 600,\n }\n : undefined\n }\n >\n {child.label}\n </Menu.Item>\n );\n });\n}\n\nfunction CollapsedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const labelText = getSideNavItemLabelText(item);\n const hasChildren = Boolean(item.children?.length);\n const isActive = Boolean(item.active || hasActiveDescendant(item));\n const leftSection = resolveLeftSection(item, labelText, {\n requireIcon: true,\n active: isActive,\n });\n\n // ActionIcon (not NavLink): NavLink.css forces `width: 100%` and asymmetric\n // horizontal padding, which makes selected/hover chrome a wide pill.\n // Selected fill uses Fairmint surface/selected — Mantine `light` is too dim in dark mode.\n const link = (\n <ActionIcon\n type=\"button\"\n variant=\"subtle\"\n color={color}\n size={COLLAPSED_ITEM_SIZE}\n radius=\"md\"\n disabled={item.disabled}\n aria-label={labelText}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n onClick={hasChildren ? undefined : () => onItemClick(item.id)}\n style={{\n width: COLLAPSED_ITEM_SIZE,\n height: COLLAPSED_ITEM_SIZE,\n minWidth: COLLAPSED_ITEM_SIZE,\n minHeight: COLLAPSED_ITEM_SIZE,\n ...(isActive\n ? {\n \"--ai-bg\": fairmintVars.colorSurfaceSelected,\n \"--ai-hover\": fairmintVars.colorSurfaceSelected,\n \"--ai-color\": fairmintVars.colorIconOnSurfaceSelected,\n \"--ai-hover-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n }\n : {\n color: fairmintVars.colorIconTertiary,\n }),\n }}\n >\n {leftSection}\n </ActionIcon>\n );\n\n const control = hasChildren ? (\n <Menu position=\"right-start\" offset={8} withinPortal>\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n events={{ hover: true, focus: true, touch: true }}\n >\n <Menu.Target>{link}</Menu.Target>\n </Tooltip>\n <Menu.Dropdown>\n <CollapsedNestedMenuItems\n items={item.children ?? []}\n onItemClick={onItemClick}\n color={color}\n />\n </Menu.Dropdown>\n </Menu>\n ) : (\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n events={{ hover: true, focus: true, touch: true }}\n >\n {link}\n </Tooltip>\n );\n\n // Uniform Stack child so Menu vs Tooltip wrappers cannot skew item gaps.\n return <Box style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>{control}</Box>;\n}\n\nfunction SideNavNode(props: SideNavNodeProps) {\n if (props.collapsed) {\n return <CollapsedSideNavNode {...props} />;\n }\n return <ExpandedSideNavNode {...props} />;\n}\n\nexport function SideNav({\n items = [],\n sections,\n onItemClick,\n color = \"indigo\",\n ariaLabel = \"Main navigation\",\n withBorder = false,\n header,\n cta,\n profile,\n footer,\n collapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapsible = false,\n}: SideNavProps) {\n const resolvedSections = sections ?? [{ id: \"main\", items }];\n const [collapsedState, setCollapsedState] = useUncontrolled({\n value: collapsed,\n defaultValue: defaultCollapsed,\n finalValue: false,\n onChange: onCollapsedChange,\n });\n\n const hasBottomChrome = Boolean(footer || cta || profile);\n const [headerHovered, setHeaderHovered] = useState(false);\n const showExpandedCollapseControl = headerHovered;\n const showHeaderChrome = Boolean(header) || collapsible;\n\n const collapseToggle = collapsible ? (\n <CollapseToggle\n collapsed={collapsedState}\n visible={collapsedState ? true : showExpandedCollapseControl}\n onToggle={() => setCollapsedState(!collapsedState)}\n />\n ) : null;\n\n return (\n <Stack\n component=\"nav\"\n gap=\"md\"\n h=\"100%\"\n p={collapsedState ? \"sm\" : \"md\"}\n aria-label={ariaLabel}\n data-collapsed={collapsedState || undefined}\n style={{\n borderRight: withBorder ? \"1px solid\" : undefined,\n borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n boxShadow: \"none\",\n }}\n >\n {showHeaderChrome ? (\n collapsedState ? (\n <Stack gap={6} align=\"center\">\n {header ? (\n <Box\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Stack>\n ) : (\n <Group\n justify=\"space-between\"\n wrap=\"nowrap\"\n gap=\"xs\"\n align=\"center\"\n style={{ minHeight: 32 }}\n onMouseEnter={() => setHeaderHovered(true)}\n onMouseLeave={() => setHeaderHovered(false)}\n onFocusCapture={() => setHeaderHovered(true)}\n onBlurCapture={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n setHeaderHovered(false);\n }\n }}\n >\n {header ? (\n <Box\n style={{\n flex: 1,\n minWidth: 0,\n overflow: \"hidden\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Group>\n )\n ) : null}\n\n <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n {resolvedSections.flatMap((section) =>\n section.items.map((item) => (\n <SideNavNode\n key={`${section.id}:${item.id}`}\n item={item}\n color={color}\n onItemClick={onItemClick}\n collapsed={collapsedState}\n />\n )),\n )}\n </Stack>\n\n {hasBottomChrome ? (\n <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n {footer ?? (\n <>\n {cta ? (\n <Box\n style={{\n width: \"100%\",\n display: \"flex\",\n justifyContent: collapsedState ? \"center\" : \"stretch\",\n }}\n >\n {cta}\n </Box>\n ) : null}\n {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n {profile ? <Box style={{ width: \"100%\" }}>{profile}</Box> : null}\n </>\n )}\n </Stack>\n ) : null}\n </Stack>\n );\n}\n"],"names":["jsx","Box","fairmintVars","IconLayoutSidebarLeftExpand","IconLayoutSidebarLeftCollapse","UnstyledButton","radii","Tooltip","useState","useEffect","NavLink","Menu","ActionIcon","jsxs","useUncontrolled","Stack","Group","Fragment","Divider"],"mappings":";;;;;;;;;;;;;;;;;AAkBO,MAAM,iBAAiB;AAMvB,MAAM,2BAA2B;AA2ExC,SAAS,oBAAoB,MAA4B;AACvD,SAAO,KAAK,UAAU,KAAK,CAAC,UAAU,MAAM,UAAU,oBAAoB,KAAK,CAAC,KAAK;AACvF;AAGO,SAAS,wBAAwB,MAAwD;AAC9F,MAAI,KAAK,WAAW;AAClB,WAAO,KAAK;AAAA,EACd;AACA,MAAI,OAAO,KAAK,UAAU,UAAU;AAClC,WAAO,KAAK;AAAA,EACd;AACA,MAAI,OAAO,KAAK,UAAU,UAAU;AAClC,WAAO,OAAO,KAAK,KAAK;AAAA,EAC1B;AACA,SAAO;AACT;AAGO,SAAS,yBAAyB,WAA2B;AAClE,QAAM,QAAQ,UAAU,MAAM,eAAe;AAC7C,SAAO,QAAQ,MAAM,CAAC,EAAE,gBAAgB;AAC1C;AAEA,SAAS,eAAe,EAAE,QAAQ,SAAS,SAA+C;AACxF,SACEA,2BAAAA;AAAAA,IAACC,IAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAW;AAAA,MACX,eAAa,UAAU;AAAA,MACvB,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY,SAAS,MAAM;AAAA,QAC3B,YAAY;AAAA;AAAA,QAEZ,OAAO,SAASC,MAAAA,aAAa,6BAA6B;AAAA,MAAA;AAAA,MAG3D,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQ,YAAY,sBAAsB;AAChD,QAAM,OAAO,YAAYC,4BAAAA,UAA8BC,8BAAAA;AAEvD,QAAM,SACJJ,2BAAAA;AAAAA,IAACK,eAAAA;AAAAA,IAAA;AAAA,MACC,yBAAqB;AAAA,MACrB,cAAY;AAAA,MACZ,iBAAe,CAAC;AAAA,MAChB,SAAS;AAAA,MACT,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,cAAcC,MAAAA,MAAM;AAAA,QACpB,OAAOJ,MAAAA,aAAa;AAAA,QACpB,SAAS,UAAU,IAAI;AAAA,QACvB,eAAe,UAAU,SAAS;AAAA,QAClC,YAAY;AAAA;AAAA;AAAA,QAGZ,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MAGX,yCAAC,MAAA,EAAK,MAAM,IAAI,QAAQ,KAAK,eAAW,KAAA,CAAC;AAAA,IAAA;AAAA,EAAA;AAI7C,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,SACEF,2BAAAA;AAAAA,IAACO,QAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAS;AAAA,MACT,WAAS;AAAA,MACT,QAAQ,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,KAAA;AAAA,MAC3C,UAAU,CAAC;AAAA,MAEV,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,mBACP,MACA,WACA,EAAE,aAAa,UACJ;AACX,MAAI,KAAK,MAAM;AACb,WAAO,KAAK;AAAA,EACd;AACA,MAAI,aAAa;AACf,WAAOP,+BAAC,kBAAe,QAAQ,yBAAyB,SAAS,GAAG,QAAQ,QAAQ,MAAM,GAAG;AAAA,EAC/F;AACA,SAAO;AACT;AAGA,MAAM,sBAAsB;AAE5B,MAAM,gBAAgB,CAAC,YAAyD;AAAA,EAC9E,MAAM;AAAA,IACJ,OAAO,SAASE,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,IAC7D,YAAY,SAAS,MAAM;AAAA,IAC3B,cAAcI,MAAAA,MAAM;AAAA;AAAA,IAEpB,GAAI,SACA;AAAA,MACE,WAAWJ,MAAAA,aAAa;AAAA,MACxB,cAAcA,MAAAA,aAAa;AAAA,MAC3B,cAAcA,MAAAA,aAAa;AAAA,MAC3B,iBAAiBA,MAAAA,aAAa;AAAA,IAAA,IAEhC,CAAA;AAAA,EAAC;AAAA,EAEP,SAAS;AAAA,IACP,OAAO,SAASA,mBAAa,6BAA6BA,MAAAA,aAAa;AAAA,EAAA;AAE3E;AASA,SAAS,oBAAoB,EAAE,OAAO,MAAM,eAAoD;AAC9F,QAAM,qBAAqB,oBAAoB,IAAI;AACnD,QAAM,CAAC,QAAQ,SAAS,IAAIM,MAAAA,SAAS,KAAK,QAAQ,kBAAkB;AACpE,QAAM,YAAY,wBAAwB,IAAI;AAE9CC,QAAAA,UAAU,MAAM;AACd,QAAI,KAAK,SAAS,QAAW;AAC3B,gBAAU,KAAK,IAAI;AAAA,IACrB,WAAW,oBAAoB;AAC7B,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,oBAAoB,KAAK,IAAI,CAAC;AAElC,QAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;AAEjD,SACET,2BAAAA;AAAAA,IAACU,QAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,aAAa,mBAAmB,MAAM,WAAW;AAAA,QAC/C,aAAa;AAAA,QACb,QAAQ,KAAK;AAAA,MAAA,CACd;AAAA,MACD,cAAc,KAAK;AAAA,MACnB,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,QAAQ,cAAc,SAAS;AAAA,MAC/B,cAAY,KAAK;AAAA,MACjB,SACE,cACI,MAAM,UAAU,CAAC,kBAAkB,CAAC,aAAa,IACjD,MAAM,YAAY,KAAK,EAAE;AAAA,MAE/B,QAAQ,cAAc,KAAK,MAAM;AAAA,MAEhC,UAAA,KAAK,UAAU,IAAI,CAAC,UACnBV,2BAAAA,IAAC,qBAAA,EAAmC,MAAM,OAAO,OAAc,YAAA,GAArC,MAAM,EAAyD,CAC1F;AAAA,IAAA;AAAA,EAAA;AAGP;AAGA,SAAS,2BAA2B,OAAqC;AACvE,SAAO,MAAM;AAAA,IAAQ,CAAC,SACpB,KAAK,UAAU,SAAS,2BAA2B,KAAK,QAAQ,IAAI,CAAC,IAAI;AAAA,EAAA;AAE7E;AAEA,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SAAO,2BAA2B,KAAK,EAAE,IAAI,CAAC,UAAU;AACtD,UAAM,aAAa,wBAAwB,KAAK;AAChD,UAAM,WAAW,QAAQ,MAAM,MAAM;AACrC,WACEA,2BAAAA;AAAAA,MAACW,KAAAA,KAAK;AAAA,MAAL;AAAA,QAEC,UAAU,MAAM;AAAA,QAChB,aAAa,mBAAmB,OAAO,YAAY;AAAA,UACjD,aAAa;AAAA,UACb,QAAQ;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAM,YAAY,MAAM,EAAE;AAAA,QACnC,gBAAc,WAAW,SAAS;AAAA,QAClC,eAAa,YAAY;AAAA,QACzB,OAAO,WAAW,QAAQ;AAAA,QAC1B,OACE,WACI;AAAA,UACE,iBAAiBT,MAAAA,aAAa;AAAA,UAC9B,OAAOA,MAAAA,aAAa;AAAA,UACpB,YAAY;AAAA,QAAA,IAEd;AAAA,QAGL,UAAA,MAAM;AAAA,MAAA;AAAA,MApBF,MAAM;AAAA,IAAA;AAAA,EAuBjB,CAAC;AACH;AAEA,SAAS,qBAAqB,EAAE,OAAO,MAAM,eAAoD;AAC/F,QAAM,YAAY,wBAAwB,IAAI;AAC9C,QAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;AACjD,QAAM,WAAW,QAAQ,KAAK,UAAU,oBAAoB,IAAI,CAAC;AACjE,QAAM,cAAc,mBAAmB,MAAM,WAAW;AAAA,IACtD,aAAa;AAAA,IACb,QAAQ;AAAA,EAAA,CACT;AAKD,QAAM,OACJF,2BAAAA;AAAAA,IAACY,WAAAA;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR;AAAA,MACA,MAAM;AAAA,MACN,QAAO;AAAA,MACP,UAAU,KAAK;AAAA,MACf,cAAY;AAAA,MACZ,gBAAc,WAAW,SAAS;AAAA,MAClC,eAAa,YAAY;AAAA,MACzB,SAAS,cAAc,SAAY,MAAM,YAAY,KAAK,EAAE;AAAA,MAC5D,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,WAAW;AAAA,QACX,GAAI,WACA;AAAA,UACE,WAAWV,MAAAA,aAAa;AAAA,UACxB,cAAcA,MAAAA,aAAa;AAAA,UAC3B,cAAcA,MAAAA,aAAa;AAAA,UAC3B,oBAAoBA,MAAAA,aAAa;AAAA,UACjC,iBAAiBA,MAAAA,aAAa;AAAA,UAC9B,OAAOA,MAAAA,aAAa;AAAA,QAAA,IAEtB;AAAA,UACE,OAAOA,MAAAA,aAAa;AAAA,QAAA;AAAA,MACtB;AAAA,MAGL,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL,QAAM,UAAU,cACdW,2BAAAA,KAACF,KAAAA,MAAA,EAAK,UAAS,eAAc,QAAQ,GAAG,cAAY,MAClD,UAAA;AAAA,IAAAX,2BAAAA;AAAAA,MAACO,QAAAA;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAS;AAAA,QACT,WAAS;AAAA,QACT,QAAQ,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,KAAA;AAAA,QAE3C,UAAAP,2BAAAA,IAACW,KAAAA,KAAK,QAAL,EAAa,UAAA,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAErBX,2BAAAA,IAACW,KAAAA,KAAK,UAAL,EACC,UAAAX,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,KAAK,YAAY,CAAA;AAAA,QACxB;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CACF,IAEAA,2BAAAA;AAAAA,IAACO,QAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAS;AAAA,MACT,WAAS;AAAA,MACT,QAAQ,EAAE,OAAO,MAAM,OAAO,MAAM,OAAO,KAAA;AAAA,MAE1C,UAAA;AAAA,IAAA;AAAA,EAAA;AAKL,SAAOP,2BAAAA,IAACC,IAAAA,KAAA,EAAI,OAAO,EAAE,OAAO,QAAQ,SAAS,QAAQ,gBAAgB,SAAA,GAAa,UAAA,QAAA,CAAQ;AAC5F;AAEA,SAAS,YAAY,OAAyB;AAC5C,MAAI,MAAM,WAAW;AACnB,WAAOD,+BAAC,sBAAA,EAAsB,GAAG,MAAA,CAAO;AAAA,EAC1C;AACA,SAAOA,+BAAC,qBAAA,EAAqB,GAAG,MAAA,CAAO;AACzC;AAEO,SAAS,QAAQ;AAAA,EACtB,QAAQ,CAAA;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,cAAc;AAChB,GAAiB;AACf,QAAM,mBAAmB,YAAY,CAAC,EAAE,IAAI,QAAQ,OAAO;AAC3D,QAAM,CAAC,gBAAgB,iBAAiB,IAAIc,gCAAgB;AAAA,IAC1D,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA,CACX;AAED,QAAM,kBAAkB,QAAQ,UAAU,OAAO,OAAO;AACxD,QAAM,CAAC,eAAe,gBAAgB,IAAIN,MAAAA,SAAS,KAAK;AACxD,QAAM,8BAA8B;AACpC,QAAM,mBAAmB,QAAQ,MAAM,KAAK;AAE5C,QAAM,iBAAiB,cACrBR,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS,iBAAiB,OAAO;AAAA,MACjC,UAAU,MAAM,kBAAkB,CAAC,cAAc;AAAA,IAAA;AAAA,EAAA,IAEjD;AAEJ,SACEa,2BAAAA;AAAAA,IAACE,MAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,GAAE;AAAA,MACF,GAAG,iBAAiB,OAAO;AAAA,MAC3B,cAAY;AAAA,MACZ,kBAAgB,kBAAkB;AAAA,MAClC,OAAO;AAAA,QACL,aAAa,aAAa,cAAc;AAAA,QACxC,kBAAkB,aAAab,mBAAa,qBAAqB;AAAA,QACjE,WAAW;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAA,mBACC,iBACEW,2BAAAA,KAACE,aAAA,EAAM,KAAK,GAAG,OAAM,UAClB,UAAA;AAAA,UAAA,SACCf,2BAAAA;AAAAA,YAACC,IAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,OAAO;AAAA,cAAA;AAAA,cAGR,UAAA;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACH;AAAA,QAAA,EAAA,CACH,IAEAY,2BAAAA;AAAAA,UAACG,MAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,OAAO,EAAE,WAAW,GAAA;AAAA,YACpB,cAAc,MAAM,iBAAiB,IAAI;AAAA,YACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,YAC1C,gBAAgB,MAAM,iBAAiB,IAAI;AAAA,YAC3C,eAAe,CAAC,UAAU;AACxB,kBAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAAG;AACrE,iCAAiB,KAAK;AAAA,cACxB;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAA,SACChB,2BAAAA;AAAAA,gBAACC,IAAAA;AAAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,MAAM;AAAA,oBACN,UAAU;AAAA,oBACV,UAAU;AAAA,oBACV,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,kBAAA;AAAA,kBAGjB,UAAA;AAAA,gBAAA;AAAA,cAAA,IAED;AAAA,cACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,IAGH;AAAA,QAEJD,2BAAAA,IAACe,MAAAA,OAAA,EAAM,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,OAAA,GACtD,UAAA,iBAAiB;AAAA,UAAQ,CAAC,YACzB,QAAQ,MAAM,IAAI,CAAC,SACjBf,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,YAAA;AAAA,YAJN,GAAG,QAAQ,EAAE,IAAI,KAAK,EAAE;AAAA,UAAA,CAMhC;AAAA,QAAA,GAEL;AAAA,QAEC,kBACCA,2BAAAA,IAACe,MAAAA,OAAA,EAAM,KAAI,MAAK,OAAO,EAAE,YAAY,EAAA,GAClC,UAAA,UACCF,2BAAAA,KAAAI,WAAAA,UAAA,EACG,UAAA;AAAA,UAAA,MACCjB,2BAAAA;AAAAA,YAACC,IAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,SAAS;AAAA,gBACT,gBAAgB,iBAAiB,WAAW;AAAA,cAAA;AAAA,cAG7C,UAAA;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACH,OAAO,UAAUD,2BAAAA,IAACkB,QAAAA,WAAQ,OAAOhB,MAAAA,aAAa,oBAAoB,IAAK;AAAA,UACvE,yCAAWD,SAAA,EAAI,OAAO,EAAE,OAAO,UAAW,UAAA,QAAA,CAAQ,IAAS;AAAA,QAAA,EAAA,CAC9D,GAEJ,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;;;;;;"}
|
|
1
|
+
{"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import {\n ActionIcon,\n Box,\n Divider,\n Group,\n Menu,\n NavLink,\n type NavLinkProps,\n Stack,\n Tooltip,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { useUncontrolled } from \"@mantine/hooks\";\nimport { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from \"@tabler/icons-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\n/** Expanded product side-nav width (Brand System shell metric). */\nexport const SIDE_NAV_WIDTH = 260;\n\n/**\n * Collapsed icon-rail width.\n * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.\n */\nexport const SIDE_NAV_COLLAPSED_WIDTH = 80;\n\n/**\n * Floating chrome (tooltips, nested flyouts) must clear Studio/Investor fixed\n * shell layers — side nav ≈1200, header ≈1201, menus ≥1300.\n */\nconst SIDE_NAV_FLOATING_Z_INDEX = 1300;\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). */\n id: string;\n /** Display label. */\n label: ReactNode;\n /**\n * Accessible name when `label` is not a plain string.\n * Also used for collapsed tooltips and letter-fallback derivation.\n */\n ariaLabel?: string;\n /** Icon element. */\n icon?: ReactNode;\n /** Optional content rendered at the end of the item, such as a badge. */\n rightSection?: ReactNode;\n /** Whether this item is currently active. */\n active?: boolean;\n /** Whether the item is unavailable. */\n disabled?: boolean;\n /** Nested navigation items. */\n children?: SideNavItem[];\n /** Controlled expanded state for items with children. */\n open?: boolean;\n}\n\nexport interface SideNavSection {\n /** Unique identifier for the section. */\n id: string;\n /** Navigation items in this section. */\n items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n /** Navigation items to render when section headings are not needed. */\n items?: SideNavItem[];\n /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */\n sections?: SideNavSection[];\n /** Callback when a nav item is clicked. Receives the item's `id`. */\n onItemClick: (id: string) => void;\n /** Active color. @default colors.primary */\n color?: string;\n /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n ariaLabel?: string;\n /** Render a light right border when the parent shell does not already own the divider. @default false */\n withBorder?: boolean;\n /**\n * Logo or other chrome above the nav list.\n * Consumers own expanded wordmark vs collapsed mark switching.\n */\n header?: ReactNode;\n /**\n * Primary nav CTA pinned above the profile (Investor \"Add Investment\", Studio \"New\").\n * Prefer this over stuffing the CTA into `items`.\n */\n cta?: ReactNode;\n /**\n * Account / profile control pinned to the bottom of the rail.\n * Product shells keep profile here — not in the scrollable destination list or AppHeader.\n */\n profile?: ReactNode;\n /**\n * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.\n */\n footer?: ReactNode;\n /** Controlled collapsed (icon-rail) state. */\n collapsed?: boolean;\n /** Uncontrolled initial collapsed state. @default false */\n defaultCollapsed?: boolean;\n /** Called when the user toggles collapse. */\n onCollapsedChange?: (collapsed: boolean) => void;\n /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */\n collapsible?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\n/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */\nexport function getSideNavItemLabelText(item: Pick<SideNavItem, \"label\" | \"ariaLabel\">): string {\n if (item.ariaLabel) {\n return item.ariaLabel;\n }\n if (typeof item.label === \"string\") {\n return item.label;\n }\n if (typeof item.label === \"number\") {\n return String(item.label);\n }\n return \"Item\";\n}\n\n/** First letter/number monogram for icon-less items in the collapsed rail. */\nexport function getSideNavLetterFallback(labelText: string): string {\n const match = labelText.match(/[\\p{L}\\p{N}]/u);\n return match ? match[0].toUpperCase() : \"?\";\n}\n\nfunction LetterFallback({ letter, active = false }: { letter: string; active?: boolean }) {\n return (\n <Box\n component=\"span\"\n aria-hidden\n data-active={active || undefined}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: 20,\n height: 20,\n flexShrink: 0,\n fontSize: 12,\n fontWeight: active ? 700 : 600,\n lineHeight: 1,\n // Selected chrome lives on the parent control — glyph matches icon sizing.\n color: active ? fairmintVars.colorIconOnSurfaceSelected : \"inherit\",\n }}\n >\n {letter}\n </Box>\n );\n}\n\nfunction CollapseToggle({\n collapsed,\n onToggle,\n visible,\n}: {\n collapsed: boolean;\n onToggle: () => void;\n /** When false, hide visually but keep focusable for keyboard users via opacity/focus styles. */\n visible: boolean;\n}) {\n const label = collapsed ? \"Expand navigation\" : \"Collapse navigation\";\n const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;\n\n const button = (\n <UnstyledButton\n data-sidenav-collapse\n aria-label={label}\n aria-expanded={!collapsed}\n onClick={onToggle}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: 32,\n flexShrink: 0,\n borderRadius: radii.md,\n color: fairmintVars.colorIconTertiary,\n opacity: visible ? 1 : 0,\n pointerEvents: visible ? \"auto\" : \"none\",\n transition: \"opacity 120ms ease\",\n // Keep a layout slot when expanded so the wordmark does not shift on hover.\n // Collapsed: always a fixed control below the logo.\n width: 32,\n overflow: \"hidden\",\n padding: 0,\n }}\n >\n <Icon size={20} stroke={1.5} aria-hidden />\n </UnstyledButton>\n );\n\n if (!collapsed) {\n return button;\n }\n\n return (\n <Tooltip\n label={label}\n position=\"right\"\n withArrow\n withinPortal\n zIndex={SIDE_NAV_FLOATING_Z_INDEX}\n events={{ hover: true, focus: true, touch: true }}\n disabled={!visible}\n >\n {button}\n </Tooltip>\n );\n}\n\nfunction resolveLeftSection(\n item: SideNavItem,\n labelText: string,\n { requireIcon, active }: { requireIcon: boolean; active?: boolean },\n): ReactNode {\n if (item.icon) {\n return item.icon;\n }\n if (requireIcon) {\n return <LetterFallback letter={getSideNavLetterFallback(labelText)} active={Boolean(active)} />;\n }\n return undefined;\n}\n\n/** Collapsed rail control size — matches square CTA chrome. */\nconst COLLAPSED_ITEM_SIZE = 36;\n\nconst navLinkStyles = (active: boolean | undefined): NavLinkProps[\"styles\"] => ({\n root: {\n color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n fontWeight: active ? 500 : 400,\n borderRadius: radii.md,\n // Prefer Fairmint selected surface over Mantine defaults for active chrome.\n ...(active\n ? {\n \"--nl-bg\": fairmintVars.colorSurfaceSelected,\n \"--nl-hover\": fairmintVars.colorSurfaceSelected,\n \"--nl-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n }\n : {}),\n },\n section: {\n color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary,\n },\n});\n\ninterface SideNavNodeProps {\n color: string;\n item: SideNavItem;\n onItemClick: (id: string) => void;\n collapsed: boolean;\n}\n\nfunction ExpandedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const containsActiveItem = hasActiveDescendant(item);\n const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n const labelText = getSideNavItemLabelText(item);\n\n useEffect(() => {\n if (item.open !== undefined) {\n setOpened(item.open);\n } else if (containsActiveItem) {\n setOpened(true);\n }\n }, [containsActiveItem, item.open]);\n\n const hasChildren = Boolean(item.children?.length);\n\n return (\n <NavLink\n component=\"button\"\n type=\"button\"\n label={item.label}\n leftSection={resolveLeftSection(item, labelText, {\n requireIcon: false,\n active: item.active,\n })}\n rightSection={item.rightSection}\n active={item.active}\n disabled={item.disabled}\n color={color}\n variant=\"light\"\n childrenOffset={16}\n opened={hasChildren ? opened : undefined}\n aria-label={item.ariaLabel}\n onClick={\n hasChildren\n ? () => setOpened((currentOpened) => !currentOpened)\n : () => onItemClick(item.id)\n }\n styles={navLinkStyles(item.active)}\n >\n {item.children?.map((child) => (\n <ExpandedSideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n ))}\n </NavLink>\n );\n}\n\n/** Flatten nested groups to leaves for the collapsed flyout (one actionable list). */\nfunction collectCollapsedMenuLeaves(items: SideNavItem[]): SideNavItem[] {\n return items.flatMap((item) =>\n item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item],\n );\n}\n\nfunction CollapsedNestedMenuItems({\n items,\n onItemClick,\n color,\n}: {\n items: SideNavItem[];\n onItemClick: (id: string) => void;\n color: string;\n}) {\n return collectCollapsedMenuLeaves(items).map((child) => {\n const childLabel = getSideNavItemLabelText(child);\n const isActive = Boolean(child.active);\n return (\n <Menu.Item\n key={child.id}\n disabled={child.disabled}\n leftSection={resolveLeftSection(child, childLabel, {\n requireIcon: true,\n active: isActive,\n })}\n onClick={() => onItemClick(child.id)}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n color={isActive ? color : undefined}\n style={\n isActive\n ? {\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n fontWeight: 600,\n }\n : undefined\n }\n >\n {child.label}\n </Menu.Item>\n );\n });\n}\n\nfunction CollapsedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const labelText = getSideNavItemLabelText(item);\n const hasChildren = Boolean(item.children?.length);\n const isActive = Boolean(item.active || hasActiveDescendant(item));\n const leftSection = resolveLeftSection(item, labelText, {\n requireIcon: true,\n active: isActive,\n });\n\n // ActionIcon (not NavLink): NavLink.css forces `width: 100%` and asymmetric\n // horizontal padding, which makes selected/hover chrome a wide pill.\n // Selected fill uses Fairmint surface/selected — Mantine `light` is too dim in dark mode.\n const link = (\n <ActionIcon\n type=\"button\"\n variant=\"subtle\"\n color={color}\n size={COLLAPSED_ITEM_SIZE}\n radius=\"md\"\n disabled={item.disabled}\n aria-label={labelText}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n onClick={hasChildren ? undefined : () => onItemClick(item.id)}\n style={{\n width: COLLAPSED_ITEM_SIZE,\n height: COLLAPSED_ITEM_SIZE,\n minWidth: COLLAPSED_ITEM_SIZE,\n minHeight: COLLAPSED_ITEM_SIZE,\n ...(isActive\n ? {\n \"--ai-bg\": fairmintVars.colorSurfaceSelected,\n \"--ai-hover\": fairmintVars.colorSurfaceSelected,\n \"--ai-color\": fairmintVars.colorIconOnSurfaceSelected,\n \"--ai-hover-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n }\n : {\n color: fairmintVars.colorIconTertiary,\n }),\n }}\n >\n {leftSection}\n </ActionIcon>\n );\n\n const control = hasChildren ? (\n <Menu position=\"right-start\" offset={8} withinPortal zIndex={SIDE_NAV_FLOATING_Z_INDEX}>\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n withinPortal\n zIndex={SIDE_NAV_FLOATING_Z_INDEX}\n events={{ hover: true, focus: true, touch: true }}\n >\n <Menu.Target>{link}</Menu.Target>\n </Tooltip>\n <Menu.Dropdown>\n <CollapsedNestedMenuItems\n items={item.children ?? []}\n onItemClick={onItemClick}\n color={color}\n />\n </Menu.Dropdown>\n </Menu>\n ) : (\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n withinPortal\n zIndex={SIDE_NAV_FLOATING_Z_INDEX}\n events={{ hover: true, focus: true, touch: true }}\n >\n {link}\n </Tooltip>\n );\n\n // Uniform Stack child so Menu vs Tooltip wrappers cannot skew item gaps.\n return <Box style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>{control}</Box>;\n}\n\nfunction SideNavNode(props: SideNavNodeProps) {\n if (props.collapsed) {\n return <CollapsedSideNavNode {...props} />;\n }\n return <ExpandedSideNavNode {...props} />;\n}\n\nexport function SideNav({\n items = [],\n sections,\n onItemClick,\n color = \"indigo\",\n ariaLabel = \"Main navigation\",\n withBorder = false,\n header,\n cta,\n profile,\n footer,\n collapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapsible = false,\n}: SideNavProps) {\n const resolvedSections = sections ?? [{ id: \"main\", items }];\n const [collapsedState, setCollapsedState] = useUncontrolled({\n value: collapsed,\n defaultValue: defaultCollapsed,\n finalValue: false,\n onChange: onCollapsedChange,\n });\n\n const hasBottomChrome = Boolean(footer || cta || profile);\n const [headerHovered, setHeaderHovered] = useState(false);\n const showExpandedCollapseControl = headerHovered;\n const showHeaderChrome = Boolean(header) || collapsible;\n\n const collapseToggle = collapsible ? (\n <CollapseToggle\n collapsed={collapsedState}\n visible={collapsedState ? true : showExpandedCollapseControl}\n onToggle={() => setCollapsedState(!collapsedState)}\n />\n ) : null;\n\n return (\n <Stack\n component=\"nav\"\n gap=\"md\"\n h=\"100%\"\n p={collapsedState ? \"sm\" : \"md\"}\n aria-label={ariaLabel}\n data-collapsed={collapsedState || undefined}\n style={{\n borderRight: withBorder ? \"1px solid\" : undefined,\n borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n boxShadow: \"none\",\n }}\n >\n {showHeaderChrome ? (\n collapsedState ? (\n <Stack gap={6} align=\"center\">\n {header ? (\n <Box\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Stack>\n ) : (\n <Group\n justify=\"space-between\"\n wrap=\"nowrap\"\n gap=\"xs\"\n align=\"center\"\n style={{ minHeight: 32 }}\n onMouseEnter={() => setHeaderHovered(true)}\n onMouseLeave={() => setHeaderHovered(false)}\n onFocusCapture={() => setHeaderHovered(true)}\n onBlurCapture={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n setHeaderHovered(false);\n }\n }}\n >\n {header ? (\n <Box\n style={{\n flex: 1,\n minWidth: 0,\n overflow: \"hidden\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Group>\n )\n ) : null}\n\n <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n {resolvedSections.flatMap((section) =>\n section.items.map((item) => (\n <SideNavNode\n key={`${section.id}:${item.id}`}\n item={item}\n color={color}\n onItemClick={onItemClick}\n collapsed={collapsedState}\n />\n )),\n )}\n </Stack>\n\n {hasBottomChrome ? (\n <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n {footer ?? (\n <>\n {cta ? (\n <Box\n style={{\n width: \"100%\",\n display: \"flex\",\n justifyContent: collapsedState ? \"center\" : \"stretch\",\n }}\n >\n {cta}\n </Box>\n ) : null}\n {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n {profile ? <Box style={{ width: \"100%\" }}>{profile}</Box> : null}\n </>\n )}\n </Stack>\n ) : null}\n </Stack>\n );\n}\n"],"names":["jsx","Box","fairmintVars","IconLayoutSidebarLeftExpand","IconLayoutSidebarLeftCollapse","UnstyledButton","radii","Tooltip","useState","useEffect","NavLink","Menu","ActionIcon","jsxs","useUncontrolled","Stack","Group","Fragment","Divider"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,mEAAmE;AACnE,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,mEAAmE;AACnE,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAQ3C,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,4GAA4G;IAC5G,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAMD,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,MAAM,CAW9F;AAED,8EAA8E;AAC9E,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAGlE;AA2TD,wBAAgB,OAAO,CAAC,EACtB,KAAU,EACV,QAAQ,EACR,WAAW,EACX,KAAgB,EAChB,SAA6B,EAC7B,UAAkB,EAClB,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,WAAmB,GACpB,EAAE,YAAY,2CA6Hd"}
|
|
@@ -15,6 +15,7 @@ import { Menu } from "../../../node_modules/@mantine/core/esm/components/Menu/Me
|
|
|
15
15
|
import { NavLink } from "../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.js";
|
|
16
16
|
const SIDE_NAV_WIDTH = 260;
|
|
17
17
|
const SIDE_NAV_COLLAPSED_WIDTH = 80;
|
|
18
|
+
const SIDE_NAV_FLOATING_Z_INDEX = 1300;
|
|
18
19
|
function hasActiveDescendant(item) {
|
|
19
20
|
return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;
|
|
20
21
|
}
|
|
@@ -101,6 +102,8 @@ function CollapseToggle({
|
|
|
101
102
|
label,
|
|
102
103
|
position: "right",
|
|
103
104
|
withArrow: true,
|
|
105
|
+
withinPortal: true,
|
|
106
|
+
zIndex: SIDE_NAV_FLOATING_Z_INDEX,
|
|
104
107
|
events: { hover: true, focus: true, touch: true },
|
|
105
108
|
disabled: !visible,
|
|
106
109
|
children: button
|
|
@@ -246,13 +249,15 @@ function CollapsedSideNavNode({ color, item, onItemClick }) {
|
|
|
246
249
|
children: leftSection
|
|
247
250
|
}
|
|
248
251
|
);
|
|
249
|
-
const control = hasChildren ? /* @__PURE__ */ jsxs(Menu, { position: "right-start", offset: 8, withinPortal: true, children: [
|
|
252
|
+
const control = hasChildren ? /* @__PURE__ */ jsxs(Menu, { position: "right-start", offset: 8, withinPortal: true, zIndex: SIDE_NAV_FLOATING_Z_INDEX, children: [
|
|
250
253
|
/* @__PURE__ */ jsx(
|
|
251
254
|
Tooltip,
|
|
252
255
|
{
|
|
253
256
|
label: labelText,
|
|
254
257
|
position: "right",
|
|
255
258
|
withArrow: true,
|
|
259
|
+
withinPortal: true,
|
|
260
|
+
zIndex: SIDE_NAV_FLOATING_Z_INDEX,
|
|
256
261
|
events: { hover: true, focus: true, touch: true },
|
|
257
262
|
children: /* @__PURE__ */ jsx(Menu.Target, { children: link })
|
|
258
263
|
}
|
|
@@ -271,6 +276,8 @@ function CollapsedSideNavNode({ color, item, onItemClick }) {
|
|
|
271
276
|
label: labelText,
|
|
272
277
|
position: "right",
|
|
273
278
|
withArrow: true,
|
|
279
|
+
withinPortal: true,
|
|
280
|
+
zIndex: SIDE_NAV_FLOATING_Z_INDEX,
|
|
274
281
|
events: { hover: true, focus: true, touch: true },
|
|
275
282
|
children: link
|
|
276
283
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.js","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import {\n ActionIcon,\n Box,\n Divider,\n Group,\n Menu,\n NavLink,\n type NavLinkProps,\n Stack,\n Tooltip,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { useUncontrolled } from \"@mantine/hooks\";\nimport { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from \"@tabler/icons-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\n/** Expanded product side-nav width (Brand System shell metric). */\nexport const SIDE_NAV_WIDTH = 260;\n\n/**\n * Collapsed icon-rail width.\n * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.\n */\nexport const SIDE_NAV_COLLAPSED_WIDTH = 80;\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). */\n id: string;\n /** Display label. */\n label: ReactNode;\n /**\n * Accessible name when `label` is not a plain string.\n * Also used for collapsed tooltips and letter-fallback derivation.\n */\n ariaLabel?: string;\n /** Icon element. */\n icon?: ReactNode;\n /** Optional content rendered at the end of the item, such as a badge. */\n rightSection?: ReactNode;\n /** Whether this item is currently active. */\n active?: boolean;\n /** Whether the item is unavailable. */\n disabled?: boolean;\n /** Nested navigation items. */\n children?: SideNavItem[];\n /** Controlled expanded state for items with children. */\n open?: boolean;\n}\n\nexport interface SideNavSection {\n /** Unique identifier for the section. */\n id: string;\n /** Navigation items in this section. */\n items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n /** Navigation items to render when section headings are not needed. */\n items?: SideNavItem[];\n /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */\n sections?: SideNavSection[];\n /** Callback when a nav item is clicked. Receives the item's `id`. */\n onItemClick: (id: string) => void;\n /** Active color. @default colors.primary */\n color?: string;\n /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n ariaLabel?: string;\n /** Render a light right border when the parent shell does not already own the divider. @default false */\n withBorder?: boolean;\n /**\n * Logo or other chrome above the nav list.\n * Consumers own expanded wordmark vs collapsed mark switching.\n */\n header?: ReactNode;\n /**\n * Primary nav CTA pinned above the profile (Investor \"Add Investment\", Studio \"New\").\n * Prefer this over stuffing the CTA into `items`.\n */\n cta?: ReactNode;\n /**\n * Account / profile control pinned to the bottom of the rail.\n * Product shells keep profile here — not in the scrollable destination list or AppHeader.\n */\n profile?: ReactNode;\n /**\n * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.\n */\n footer?: ReactNode;\n /** Controlled collapsed (icon-rail) state. */\n collapsed?: boolean;\n /** Uncontrolled initial collapsed state. @default false */\n defaultCollapsed?: boolean;\n /** Called when the user toggles collapse. */\n onCollapsedChange?: (collapsed: boolean) => void;\n /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */\n collapsible?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\n/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */\nexport function getSideNavItemLabelText(item: Pick<SideNavItem, \"label\" | \"ariaLabel\">): string {\n if (item.ariaLabel) {\n return item.ariaLabel;\n }\n if (typeof item.label === \"string\") {\n return item.label;\n }\n if (typeof item.label === \"number\") {\n return String(item.label);\n }\n return \"Item\";\n}\n\n/** First letter/number monogram for icon-less items in the collapsed rail. */\nexport function getSideNavLetterFallback(labelText: string): string {\n const match = labelText.match(/[\\p{L}\\p{N}]/u);\n return match ? match[0].toUpperCase() : \"?\";\n}\n\nfunction LetterFallback({ letter, active = false }: { letter: string; active?: boolean }) {\n return (\n <Box\n component=\"span\"\n aria-hidden\n data-active={active || undefined}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: 20,\n height: 20,\n flexShrink: 0,\n fontSize: 12,\n fontWeight: active ? 700 : 600,\n lineHeight: 1,\n // Selected chrome lives on the parent control — glyph matches icon sizing.\n color: active ? fairmintVars.colorIconOnSurfaceSelected : \"inherit\",\n }}\n >\n {letter}\n </Box>\n );\n}\n\nfunction CollapseToggle({\n collapsed,\n onToggle,\n visible,\n}: {\n collapsed: boolean;\n onToggle: () => void;\n /** When false, hide visually but keep focusable for keyboard users via opacity/focus styles. */\n visible: boolean;\n}) {\n const label = collapsed ? \"Expand navigation\" : \"Collapse navigation\";\n const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;\n\n const button = (\n <UnstyledButton\n data-sidenav-collapse\n aria-label={label}\n aria-expanded={!collapsed}\n onClick={onToggle}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: 32,\n flexShrink: 0,\n borderRadius: radii.md,\n color: fairmintVars.colorIconTertiary,\n opacity: visible ? 1 : 0,\n pointerEvents: visible ? \"auto\" : \"none\",\n transition: \"opacity 120ms ease\",\n // Keep a layout slot when expanded so the wordmark does not shift on hover.\n // Collapsed: always a fixed control below the logo.\n width: 32,\n overflow: \"hidden\",\n padding: 0,\n }}\n >\n <Icon size={20} stroke={1.5} aria-hidden />\n </UnstyledButton>\n );\n\n if (!collapsed) {\n return button;\n }\n\n return (\n <Tooltip\n label={label}\n position=\"right\"\n withArrow\n events={{ hover: true, focus: true, touch: true }}\n disabled={!visible}\n >\n {button}\n </Tooltip>\n );\n}\n\nfunction resolveLeftSection(\n item: SideNavItem,\n labelText: string,\n { requireIcon, active }: { requireIcon: boolean; active?: boolean },\n): ReactNode {\n if (item.icon) {\n return item.icon;\n }\n if (requireIcon) {\n return <LetterFallback letter={getSideNavLetterFallback(labelText)} active={Boolean(active)} />;\n }\n return undefined;\n}\n\n/** Collapsed rail control size — matches square CTA chrome. */\nconst COLLAPSED_ITEM_SIZE = 36;\n\nconst navLinkStyles = (active: boolean | undefined): NavLinkProps[\"styles\"] => ({\n root: {\n color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n fontWeight: active ? 500 : 400,\n borderRadius: radii.md,\n // Prefer Fairmint selected surface over Mantine defaults for active chrome.\n ...(active\n ? {\n \"--nl-bg\": fairmintVars.colorSurfaceSelected,\n \"--nl-hover\": fairmintVars.colorSurfaceSelected,\n \"--nl-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n }\n : {}),\n },\n section: {\n color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary,\n },\n});\n\ninterface SideNavNodeProps {\n color: string;\n item: SideNavItem;\n onItemClick: (id: string) => void;\n collapsed: boolean;\n}\n\nfunction ExpandedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const containsActiveItem = hasActiveDescendant(item);\n const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n const labelText = getSideNavItemLabelText(item);\n\n useEffect(() => {\n if (item.open !== undefined) {\n setOpened(item.open);\n } else if (containsActiveItem) {\n setOpened(true);\n }\n }, [containsActiveItem, item.open]);\n\n const hasChildren = Boolean(item.children?.length);\n\n return (\n <NavLink\n component=\"button\"\n type=\"button\"\n label={item.label}\n leftSection={resolveLeftSection(item, labelText, {\n requireIcon: false,\n active: item.active,\n })}\n rightSection={item.rightSection}\n active={item.active}\n disabled={item.disabled}\n color={color}\n variant=\"light\"\n childrenOffset={16}\n opened={hasChildren ? opened : undefined}\n aria-label={item.ariaLabel}\n onClick={\n hasChildren\n ? () => setOpened((currentOpened) => !currentOpened)\n : () => onItemClick(item.id)\n }\n styles={navLinkStyles(item.active)}\n >\n {item.children?.map((child) => (\n <ExpandedSideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n ))}\n </NavLink>\n );\n}\n\n/** Flatten nested groups to leaves for the collapsed flyout (one actionable list). */\nfunction collectCollapsedMenuLeaves(items: SideNavItem[]): SideNavItem[] {\n return items.flatMap((item) =>\n item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item],\n );\n}\n\nfunction CollapsedNestedMenuItems({\n items,\n onItemClick,\n color,\n}: {\n items: SideNavItem[];\n onItemClick: (id: string) => void;\n color: string;\n}) {\n return collectCollapsedMenuLeaves(items).map((child) => {\n const childLabel = getSideNavItemLabelText(child);\n const isActive = Boolean(child.active);\n return (\n <Menu.Item\n key={child.id}\n disabled={child.disabled}\n leftSection={resolveLeftSection(child, childLabel, {\n requireIcon: true,\n active: isActive,\n })}\n onClick={() => onItemClick(child.id)}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n color={isActive ? color : undefined}\n style={\n isActive\n ? {\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n fontWeight: 600,\n }\n : undefined\n }\n >\n {child.label}\n </Menu.Item>\n );\n });\n}\n\nfunction CollapsedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const labelText = getSideNavItemLabelText(item);\n const hasChildren = Boolean(item.children?.length);\n const isActive = Boolean(item.active || hasActiveDescendant(item));\n const leftSection = resolveLeftSection(item, labelText, {\n requireIcon: true,\n active: isActive,\n });\n\n // ActionIcon (not NavLink): NavLink.css forces `width: 100%` and asymmetric\n // horizontal padding, which makes selected/hover chrome a wide pill.\n // Selected fill uses Fairmint surface/selected — Mantine `light` is too dim in dark mode.\n const link = (\n <ActionIcon\n type=\"button\"\n variant=\"subtle\"\n color={color}\n size={COLLAPSED_ITEM_SIZE}\n radius=\"md\"\n disabled={item.disabled}\n aria-label={labelText}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n onClick={hasChildren ? undefined : () => onItemClick(item.id)}\n style={{\n width: COLLAPSED_ITEM_SIZE,\n height: COLLAPSED_ITEM_SIZE,\n minWidth: COLLAPSED_ITEM_SIZE,\n minHeight: COLLAPSED_ITEM_SIZE,\n ...(isActive\n ? {\n \"--ai-bg\": fairmintVars.colorSurfaceSelected,\n \"--ai-hover\": fairmintVars.colorSurfaceSelected,\n \"--ai-color\": fairmintVars.colorIconOnSurfaceSelected,\n \"--ai-hover-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n }\n : {\n color: fairmintVars.colorIconTertiary,\n }),\n }}\n >\n {leftSection}\n </ActionIcon>\n );\n\n const control = hasChildren ? (\n <Menu position=\"right-start\" offset={8} withinPortal>\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n events={{ hover: true, focus: true, touch: true }}\n >\n <Menu.Target>{link}</Menu.Target>\n </Tooltip>\n <Menu.Dropdown>\n <CollapsedNestedMenuItems\n items={item.children ?? []}\n onItemClick={onItemClick}\n color={color}\n />\n </Menu.Dropdown>\n </Menu>\n ) : (\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n events={{ hover: true, focus: true, touch: true }}\n >\n {link}\n </Tooltip>\n );\n\n // Uniform Stack child so Menu vs Tooltip wrappers cannot skew item gaps.\n return <Box style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>{control}</Box>;\n}\n\nfunction SideNavNode(props: SideNavNodeProps) {\n if (props.collapsed) {\n return <CollapsedSideNavNode {...props} />;\n }\n return <ExpandedSideNavNode {...props} />;\n}\n\nexport function SideNav({\n items = [],\n sections,\n onItemClick,\n color = \"indigo\",\n ariaLabel = \"Main navigation\",\n withBorder = false,\n header,\n cta,\n profile,\n footer,\n collapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapsible = false,\n}: SideNavProps) {\n const resolvedSections = sections ?? [{ id: \"main\", items }];\n const [collapsedState, setCollapsedState] = useUncontrolled({\n value: collapsed,\n defaultValue: defaultCollapsed,\n finalValue: false,\n onChange: onCollapsedChange,\n });\n\n const hasBottomChrome = Boolean(footer || cta || profile);\n const [headerHovered, setHeaderHovered] = useState(false);\n const showExpandedCollapseControl = headerHovered;\n const showHeaderChrome = Boolean(header) || collapsible;\n\n const collapseToggle = collapsible ? (\n <CollapseToggle\n collapsed={collapsedState}\n visible={collapsedState ? true : showExpandedCollapseControl}\n onToggle={() => setCollapsedState(!collapsedState)}\n />\n ) : null;\n\n return (\n <Stack\n component=\"nav\"\n gap=\"md\"\n h=\"100%\"\n p={collapsedState ? \"sm\" : \"md\"}\n aria-label={ariaLabel}\n data-collapsed={collapsedState || undefined}\n style={{\n borderRight: withBorder ? \"1px solid\" : undefined,\n borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n boxShadow: \"none\",\n }}\n >\n {showHeaderChrome ? (\n collapsedState ? (\n <Stack gap={6} align=\"center\">\n {header ? (\n <Box\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Stack>\n ) : (\n <Group\n justify=\"space-between\"\n wrap=\"nowrap\"\n gap=\"xs\"\n align=\"center\"\n style={{ minHeight: 32 }}\n onMouseEnter={() => setHeaderHovered(true)}\n onMouseLeave={() => setHeaderHovered(false)}\n onFocusCapture={() => setHeaderHovered(true)}\n onBlurCapture={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n setHeaderHovered(false);\n }\n }}\n >\n {header ? (\n <Box\n style={{\n flex: 1,\n minWidth: 0,\n overflow: \"hidden\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Group>\n )\n ) : null}\n\n <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n {resolvedSections.flatMap((section) =>\n section.items.map((item) => (\n <SideNavNode\n key={`${section.id}:${item.id}`}\n item={item}\n color={color}\n onItemClick={onItemClick}\n collapsed={collapsedState}\n />\n )),\n )}\n </Stack>\n\n {hasBottomChrome ? (\n <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n {footer ?? (\n <>\n {cta ? (\n <Box\n style={{\n width: \"100%\",\n display: \"flex\",\n justifyContent: collapsedState ? \"center\" : \"stretch\",\n }}\n >\n {cta}\n </Box>\n ) : null}\n {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n {profile ? <Box style={{ width: \"100%\" }}>{profile}</Box> : null}\n </>\n )}\n </Stack>\n ) : null}\n </Stack>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SideNav.js","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import {\n ActionIcon,\n Box,\n Divider,\n Group,\n Menu,\n NavLink,\n type NavLinkProps,\n Stack,\n Tooltip,\n UnstyledButton,\n} from \"@mantine/core\";\nimport { useUncontrolled } from \"@mantine/hooks\";\nimport { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from \"@tabler/icons-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\n/** Expanded product side-nav width (Brand System shell metric). */\nexport const SIDE_NAV_WIDTH = 260;\n\n/**\n * Collapsed icon-rail width.\n * Proposed shell metric for Dylan / Brand System review — not yet in Brand System v3.4.\n */\nexport const SIDE_NAV_COLLAPSED_WIDTH = 80;\n\n/**\n * Floating chrome (tooltips, nested flyouts) must clear Studio/Investor fixed\n * shell layers — side nav ≈1200, header ≈1201, menus ≥1300.\n */\nconst SIDE_NAV_FLOATING_Z_INDEX = 1300;\n\nexport interface SideNavItem {\n /** Unique identifier for this nav item (e.g., route path or slug). */\n id: string;\n /** Display label. */\n label: ReactNode;\n /**\n * Accessible name when `label` is not a plain string.\n * Also used for collapsed tooltips and letter-fallback derivation.\n */\n ariaLabel?: string;\n /** Icon element. */\n icon?: ReactNode;\n /** Optional content rendered at the end of the item, such as a badge. */\n rightSection?: ReactNode;\n /** Whether this item is currently active. */\n active?: boolean;\n /** Whether the item is unavailable. */\n disabled?: boolean;\n /** Nested navigation items. */\n children?: SideNavItem[];\n /** Controlled expanded state for items with children. */\n open?: boolean;\n}\n\nexport interface SideNavSection {\n /** Unique identifier for the section. */\n id: string;\n /** Navigation items in this section. */\n items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n /** Navigation items to render when section headings are not needed. */\n items?: SideNavItem[];\n /** Grouped navigation items. Sections are data-only — Fairmint product nav does not render section titles. */\n sections?: SideNavSection[];\n /** Callback when a nav item is clicked. Receives the item's `id`. */\n onItemClick: (id: string) => void;\n /** Active color. @default colors.primary */\n color?: string;\n /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n ariaLabel?: string;\n /** Render a light right border when the parent shell does not already own the divider. @default false */\n withBorder?: boolean;\n /**\n * Logo or other chrome above the nav list.\n * Consumers own expanded wordmark vs collapsed mark switching.\n */\n header?: ReactNode;\n /**\n * Primary nav CTA pinned above the profile (Investor \"Add Investment\", Studio \"New\").\n * Prefer this over stuffing the CTA into `items`.\n */\n cta?: ReactNode;\n /**\n * Account / profile control pinned to the bottom of the rail.\n * Product shells keep profile here — not in the scrollable destination list or AppHeader.\n */\n profile?: ReactNode;\n /**\n * Custom bottom chrome. When set, replaces the standard `cta` + divider + `profile` composition.\n */\n footer?: ReactNode;\n /** Controlled collapsed (icon-rail) state. */\n collapsed?: boolean;\n /** Uncontrolled initial collapsed state. @default false */\n defaultCollapsed?: boolean;\n /** Called when the user toggles collapse. */\n onCollapsedChange?: (collapsed: boolean) => void;\n /** When true, render a collapse/expand control beside the logo (visible on header hover). @default false */\n collapsible?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\n/** Resolve a plain-text name for tooltips, aria-label, and letter fallback. */\nexport function getSideNavItemLabelText(item: Pick<SideNavItem, \"label\" | \"ariaLabel\">): string {\n if (item.ariaLabel) {\n return item.ariaLabel;\n }\n if (typeof item.label === \"string\") {\n return item.label;\n }\n if (typeof item.label === \"number\") {\n return String(item.label);\n }\n return \"Item\";\n}\n\n/** First letter/number monogram for icon-less items in the collapsed rail. */\nexport function getSideNavLetterFallback(labelText: string): string {\n const match = labelText.match(/[\\p{L}\\p{N}]/u);\n return match ? match[0].toUpperCase() : \"?\";\n}\n\nfunction LetterFallback({ letter, active = false }: { letter: string; active?: boolean }) {\n return (\n <Box\n component=\"span\"\n aria-hidden\n data-active={active || undefined}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: 20,\n height: 20,\n flexShrink: 0,\n fontSize: 12,\n fontWeight: active ? 700 : 600,\n lineHeight: 1,\n // Selected chrome lives on the parent control — glyph matches icon sizing.\n color: active ? fairmintVars.colorIconOnSurfaceSelected : \"inherit\",\n }}\n >\n {letter}\n </Box>\n );\n}\n\nfunction CollapseToggle({\n collapsed,\n onToggle,\n visible,\n}: {\n collapsed: boolean;\n onToggle: () => void;\n /** When false, hide visually but keep focusable for keyboard users via opacity/focus styles. */\n visible: boolean;\n}) {\n const label = collapsed ? \"Expand navigation\" : \"Collapse navigation\";\n const Icon = collapsed ? IconLayoutSidebarLeftExpand : IconLayoutSidebarLeftCollapse;\n\n const button = (\n <UnstyledButton\n data-sidenav-collapse\n aria-label={label}\n aria-expanded={!collapsed}\n onClick={onToggle}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n height: 32,\n flexShrink: 0,\n borderRadius: radii.md,\n color: fairmintVars.colorIconTertiary,\n opacity: visible ? 1 : 0,\n pointerEvents: visible ? \"auto\" : \"none\",\n transition: \"opacity 120ms ease\",\n // Keep a layout slot when expanded so the wordmark does not shift on hover.\n // Collapsed: always a fixed control below the logo.\n width: 32,\n overflow: \"hidden\",\n padding: 0,\n }}\n >\n <Icon size={20} stroke={1.5} aria-hidden />\n </UnstyledButton>\n );\n\n if (!collapsed) {\n return button;\n }\n\n return (\n <Tooltip\n label={label}\n position=\"right\"\n withArrow\n withinPortal\n zIndex={SIDE_NAV_FLOATING_Z_INDEX}\n events={{ hover: true, focus: true, touch: true }}\n disabled={!visible}\n >\n {button}\n </Tooltip>\n );\n}\n\nfunction resolveLeftSection(\n item: SideNavItem,\n labelText: string,\n { requireIcon, active }: { requireIcon: boolean; active?: boolean },\n): ReactNode {\n if (item.icon) {\n return item.icon;\n }\n if (requireIcon) {\n return <LetterFallback letter={getSideNavLetterFallback(labelText)} active={Boolean(active)} />;\n }\n return undefined;\n}\n\n/** Collapsed rail control size — matches square CTA chrome. */\nconst COLLAPSED_ITEM_SIZE = 36;\n\nconst navLinkStyles = (active: boolean | undefined): NavLinkProps[\"styles\"] => ({\n root: {\n color: active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n fontWeight: active ? 500 : 400,\n borderRadius: radii.md,\n // Prefer Fairmint selected surface over Mantine defaults for active chrome.\n ...(active\n ? {\n \"--nl-bg\": fairmintVars.colorSurfaceSelected,\n \"--nl-hover\": fairmintVars.colorSurfaceSelected,\n \"--nl-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n }\n : {}),\n },\n section: {\n color: active ? fairmintVars.colorIconOnSurfaceSelected : fairmintVars.colorIconTertiary,\n },\n});\n\ninterface SideNavNodeProps {\n color: string;\n item: SideNavItem;\n onItemClick: (id: string) => void;\n collapsed: boolean;\n}\n\nfunction ExpandedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const containsActiveItem = hasActiveDescendant(item);\n const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n const labelText = getSideNavItemLabelText(item);\n\n useEffect(() => {\n if (item.open !== undefined) {\n setOpened(item.open);\n } else if (containsActiveItem) {\n setOpened(true);\n }\n }, [containsActiveItem, item.open]);\n\n const hasChildren = Boolean(item.children?.length);\n\n return (\n <NavLink\n component=\"button\"\n type=\"button\"\n label={item.label}\n leftSection={resolveLeftSection(item, labelText, {\n requireIcon: false,\n active: item.active,\n })}\n rightSection={item.rightSection}\n active={item.active}\n disabled={item.disabled}\n color={color}\n variant=\"light\"\n childrenOffset={16}\n opened={hasChildren ? opened : undefined}\n aria-label={item.ariaLabel}\n onClick={\n hasChildren\n ? () => setOpened((currentOpened) => !currentOpened)\n : () => onItemClick(item.id)\n }\n styles={navLinkStyles(item.active)}\n >\n {item.children?.map((child) => (\n <ExpandedSideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n ))}\n </NavLink>\n );\n}\n\n/** Flatten nested groups to leaves for the collapsed flyout (one actionable list). */\nfunction collectCollapsedMenuLeaves(items: SideNavItem[]): SideNavItem[] {\n return items.flatMap((item) =>\n item.children?.length ? collectCollapsedMenuLeaves(item.children) : [item],\n );\n}\n\nfunction CollapsedNestedMenuItems({\n items,\n onItemClick,\n color,\n}: {\n items: SideNavItem[];\n onItemClick: (id: string) => void;\n color: string;\n}) {\n return collectCollapsedMenuLeaves(items).map((child) => {\n const childLabel = getSideNavItemLabelText(child);\n const isActive = Boolean(child.active);\n return (\n <Menu.Item\n key={child.id}\n disabled={child.disabled}\n leftSection={resolveLeftSection(child, childLabel, {\n requireIcon: true,\n active: isActive,\n })}\n onClick={() => onItemClick(child.id)}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n color={isActive ? color : undefined}\n style={\n isActive\n ? {\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n fontWeight: 600,\n }\n : undefined\n }\n >\n {child.label}\n </Menu.Item>\n );\n });\n}\n\nfunction CollapsedSideNavNode({ color, item, onItemClick }: Omit<SideNavNodeProps, \"collapsed\">) {\n const labelText = getSideNavItemLabelText(item);\n const hasChildren = Boolean(item.children?.length);\n const isActive = Boolean(item.active || hasActiveDescendant(item));\n const leftSection = resolveLeftSection(item, labelText, {\n requireIcon: true,\n active: isActive,\n });\n\n // ActionIcon (not NavLink): NavLink.css forces `width: 100%` and asymmetric\n // horizontal padding, which makes selected/hover chrome a wide pill.\n // Selected fill uses Fairmint surface/selected — Mantine `light` is too dim in dark mode.\n const link = (\n <ActionIcon\n type=\"button\"\n variant=\"subtle\"\n color={color}\n size={COLLAPSED_ITEM_SIZE}\n radius=\"md\"\n disabled={item.disabled}\n aria-label={labelText}\n aria-current={isActive ? \"page\" : undefined}\n data-active={isActive || undefined}\n onClick={hasChildren ? undefined : () => onItemClick(item.id)}\n style={{\n width: COLLAPSED_ITEM_SIZE,\n height: COLLAPSED_ITEM_SIZE,\n minWidth: COLLAPSED_ITEM_SIZE,\n minHeight: COLLAPSED_ITEM_SIZE,\n ...(isActive\n ? {\n \"--ai-bg\": fairmintVars.colorSurfaceSelected,\n \"--ai-hover\": fairmintVars.colorSurfaceSelected,\n \"--ai-color\": fairmintVars.colorIconOnSurfaceSelected,\n \"--ai-hover-color\": fairmintVars.colorIconOnSurfaceSelected,\n backgroundColor: fairmintVars.colorSurfaceSelected,\n color: fairmintVars.colorIconOnSurfaceSelected,\n }\n : {\n color: fairmintVars.colorIconTertiary,\n }),\n }}\n >\n {leftSection}\n </ActionIcon>\n );\n\n const control = hasChildren ? (\n <Menu position=\"right-start\" offset={8} withinPortal zIndex={SIDE_NAV_FLOATING_Z_INDEX}>\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n withinPortal\n zIndex={SIDE_NAV_FLOATING_Z_INDEX}\n events={{ hover: true, focus: true, touch: true }}\n >\n <Menu.Target>{link}</Menu.Target>\n </Tooltip>\n <Menu.Dropdown>\n <CollapsedNestedMenuItems\n items={item.children ?? []}\n onItemClick={onItemClick}\n color={color}\n />\n </Menu.Dropdown>\n </Menu>\n ) : (\n <Tooltip\n label={labelText}\n position=\"right\"\n withArrow\n withinPortal\n zIndex={SIDE_NAV_FLOATING_Z_INDEX}\n events={{ hover: true, focus: true, touch: true }}\n >\n {link}\n </Tooltip>\n );\n\n // Uniform Stack child so Menu vs Tooltip wrappers cannot skew item gaps.\n return <Box style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>{control}</Box>;\n}\n\nfunction SideNavNode(props: SideNavNodeProps) {\n if (props.collapsed) {\n return <CollapsedSideNavNode {...props} />;\n }\n return <ExpandedSideNavNode {...props} />;\n}\n\nexport function SideNav({\n items = [],\n sections,\n onItemClick,\n color = \"indigo\",\n ariaLabel = \"Main navigation\",\n withBorder = false,\n header,\n cta,\n profile,\n footer,\n collapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapsible = false,\n}: SideNavProps) {\n const resolvedSections = sections ?? [{ id: \"main\", items }];\n const [collapsedState, setCollapsedState] = useUncontrolled({\n value: collapsed,\n defaultValue: defaultCollapsed,\n finalValue: false,\n onChange: onCollapsedChange,\n });\n\n const hasBottomChrome = Boolean(footer || cta || profile);\n const [headerHovered, setHeaderHovered] = useState(false);\n const showExpandedCollapseControl = headerHovered;\n const showHeaderChrome = Boolean(header) || collapsible;\n\n const collapseToggle = collapsible ? (\n <CollapseToggle\n collapsed={collapsedState}\n visible={collapsedState ? true : showExpandedCollapseControl}\n onToggle={() => setCollapsedState(!collapsedState)}\n />\n ) : null;\n\n return (\n <Stack\n component=\"nav\"\n gap=\"md\"\n h=\"100%\"\n p={collapsedState ? \"sm\" : \"md\"}\n aria-label={ariaLabel}\n data-collapsed={collapsedState || undefined}\n style={{\n borderRight: withBorder ? \"1px solid\" : undefined,\n borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n boxShadow: \"none\",\n }}\n >\n {showHeaderChrome ? (\n collapsedState ? (\n <Stack gap={6} align=\"center\">\n {header ? (\n <Box\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Stack>\n ) : (\n <Group\n justify=\"space-between\"\n wrap=\"nowrap\"\n gap=\"xs\"\n align=\"center\"\n style={{ minHeight: 32 }}\n onMouseEnter={() => setHeaderHovered(true)}\n onMouseLeave={() => setHeaderHovered(false)}\n onFocusCapture={() => setHeaderHovered(true)}\n onBlurCapture={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n setHeaderHovered(false);\n }\n }}\n >\n {header ? (\n <Box\n style={{\n flex: 1,\n minWidth: 0,\n overflow: \"hidden\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n }}\n >\n {header}\n </Box>\n ) : null}\n {collapseToggle}\n </Group>\n )\n ) : null}\n\n <Stack gap={4} style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n {resolvedSections.flatMap((section) =>\n section.items.map((item) => (\n <SideNavNode\n key={`${section.id}:${item.id}`}\n item={item}\n color={color}\n onItemClick={onItemClick}\n collapsed={collapsedState}\n />\n )),\n )}\n </Stack>\n\n {hasBottomChrome ? (\n <Stack gap=\"sm\" style={{ flexShrink: 0 }}>\n {footer ?? (\n <>\n {cta ? (\n <Box\n style={{\n width: \"100%\",\n display: \"flex\",\n justifyContent: collapsedState ? \"center\" : \"stretch\",\n }}\n >\n {cta}\n </Box>\n ) : null}\n {cta && profile ? <Divider color={fairmintVars.colorBorderDefault} /> : null}\n {profile ? <Box style={{ width: \"100%\" }}>{profile}</Box> : null}\n </>\n )}\n </Stack>\n ) : null}\n </Stack>\n );\n}\n"],"names":[],"mappings":"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"}
|