LayoutSideNav

LayoutSideNav

LayoutSideNav is the shell's navigation component. It renders the side navigation projected from route metadata by useNavEntries — label, icon, and order come from each route's staticData.nav, and visibility adapts to connectivity, feature flags, and user roles — plus a provider-specific help link at the bottom of the navigation.

Rationale

Use LayoutSideNav to keep route availability, active-state logic, and help-link behavior centralized instead of duplicating navigation rules across shell or page components.

Source References

• Source: frontend/src/components/Layout/LayoutSideNav/index.tsx
• Tests: frontend/src/components/Layout/LayoutSideNav/index.unit.test.tsx

Props

This component does not accept props.

Behavior

• Reads isSideNavExpanded from useLayout() to control Carbon SideNav expansion and persistence.
• Reads the current pathname from TanStack Router useRouterState().
• Calls useNavEntries() to project the visible navigation entries from route staticData.nav metadata (label, icon, order, typed NavTarget), with gate metadata (roles, featureFlag, offline flags) inherited along each route's ancestor chain.
• Renders every projected entry as a flat SideNavLink using TanStack Link with the typed to target — no casts, no hand-built menu tree.
• Always renders a Need Help? link that targets env.VITE_IDIR_HELP for IDIR users and env.VITE_BCEID_HELP for everyone else.

Examples

Happy path: shell navigation inside the header

import { LayoutSideNav } from '@/components/Layout/LayoutSideNav';

<LayoutSideNav />;

Adding a nav entry: declare it on the route

// src/routes/_authenticated/_admin/configuration.tsx
staticData: {
  featureFlag: 'configuration-enabled',
  nav: { label: 'Configuration', icon: ToolKit, order: 40, to: '/configuration' },
}

The menu entry appears (and disappears with the flag) with no change to LayoutSideNav — the nav is data on routes, not code in a menu registry.

Dependencies

LayoutSideNav depends on:

• LayoutProvider
• AuthProvider
• RouterProvider
• useNavEntries() from src/routing/nav/useNavEntries.ts (which reads route staticData through collectRouteGates)
• env.VITE_IDIR_HELP and env.VITE_BCEID_HELP

Active-State Rules

• A link is active when entry.to === pathname (exact match).

Known Constraints

• Entries are flat: nested SideNavMenu groups no longer exist — section grouping is handled by nav.order and labels.
• A route must declare staticData.nav with a literal NavTarget member to appear in the nav; NavTarget is a closed union, so a new destination requires extending it in src/routing/staticData.ts.
• When user?.idpProvider is missing, the help link falls back to the BCeID help URL.

Testing Notes

Current unit coverage verifies:

• nav rendering from projected useNavEntries output
• active state for the current pathname
• icon rendering
• provider-specific help-link targets

Change Impact

• codes/frontend/Components.md — catalog entry points to this page.
• codes/frontend/Layout/Layout.md — parent shell documentation references this nav.
• codes/frontend/Layout/LayoutHeader.md — embeds this navigation in the header shell.

See Also

• Layout
• LayoutHeader
• Components