Dashboard Shell

Component AreaProtected shellShared dashboard framing

The dashboard shell is centered around src/features/dashboard/dashboard-layout.tsx and the sidebar component in src/features/dashboard/sidebar.tsx.

This shell is the shared frame for the protected app area, which means it owns access boundaries, persistent navigation, and the high-level layout that the dashboard page depends on.

Related docs

For the feature-level overview, see Dashboard. If you want to add a new section, continue with Add a Dashboard Page.

What this component area includes

Shared layout framing

The shell wraps the dashboard page in a common structure so sections do not have to rebuild the same layout repeatedly.

Navigation model

Sidebar navigation is defined directly in the sidebar component, keeping navigation entries close to the rendering logic.

Protection boundary

Authentication and layout-level boundaries stay close to the dashboard layout rather than being duplicated across sections.

Responsibilities

The shell is responsible for:

  • checking the authenticated session
  • redirecting unauthenticated users
  • rendering persistent navigation
  • framing dashboard sections inside a shared layout

These responsibilities make the shell one of the main ownership points for the protected app experience.

The sidebar manages its own navigation model directly in src/features/dashboard/sidebar.tsx.

Navigation entries, icons, and section identifiers are defined within the sidebar component itself rather than in a separate config file.

Current capabilities

Current shell features

  • responsive mobile/desktop navigation behavior
  • locale-aware dashboard navigation
  • active section highlighting
  • session-aware user summary

This gives the dashboard an application-like structure with a consistent frame around all sections.

Extension rule

If a change affects how every dashboard section is framed or navigated, it usually belongs in the shell layout or in src/features/dashboard/sidebar.tsx, not in an individual section component.

Shell boundary

If the change affects every dashboard section, start in the layout or sidebar before editing a single section implementation.