# Sidebar Integration

## Purpose

`Sidebar` renders app-shell navigation, module access, campus branding, and the current role badge through the three-layer frontend architecture.

```text
View -> Business Logic -> API/Data Access -> Backend
```

Sidebar does not own product content records. It reads module metadata from shared app constants and uses backend-owned campus branding received from the app shell.

## Frontend Layers

View:

- `frontend/src/components/frameworks/Sidebar.tsx`
- `frontend/src/components/sidebar/SidebarView.tsx`
- `frontend/src/components/sidebar/SidebarBrand.tsx`
- `frontend/src/components/sidebar/SidebarNavigation.tsx`
- `frontend/src/components/sidebar/SidebarCampusRolePanel.tsx`
- `frontend/src/components/sidebar/SidebarIcons.tsx`

Business logic:

- `frontend/src/business/app-shell/hooks.ts`
- `frontend/src/business/app-shell/selectors.ts`
- `frontend/src/business/app-shell/types.ts`

Shared config:

- `frontend/src/shared/constants/appData.ts`

## Behavior

- `Sidebar.tsx` is a thin wrapper that prepares the page model through `useSidebarPage`.
- `AppLayout` receives prepared `sidebarProps` from `useAppShell` and does not assemble sidebar contracts inline.
- `useSidebarPage` filters available modules by role and prepares role/campus display values.
- `useAppShell` resolves backend-owned campus branding into `campusInfo` before passing it to Sidebar.
- Selectors handle module access, role labels, and campus initials outside JSX.
- Sidebar navigation calls the app-shell module navigation action, which navigates to the selected module route path.
- The active sidebar item and sidebar list are derived from the current URL route and the app-shell scoped module set. The same scoped module set is reused by top-bar search, footer links, dashboard quick actions, and scope-change route normalization so navigation surfaces stay consistent.
- Classroom Support is scoped to organization, school, campus, and class effective tiers. Behavior Management is scoped to organization, campus, and class effective tiers. Both still require their module permissions through the app-shell scoped module selector.
- View components receive a prepared page model and do not call API/data access modules.
- Sidebar navigation uses the local `Button` primitive instead of raw controls.

## Data Ownership Rules

- Do not add seeded campus records or module content to Sidebar components.
- Campus branding is backend-owned data and should keep flowing through `campusInfo`.
- Module IDs, route paths, and permission metadata stay centralized in `frontend/src/shared/constants/appData.ts`; scope-tier visibility is owned by the app-shell business selectors until backend-owned module configuration is introduced.
