admin/40227-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
40227-vm/frontend/docs/sidebar-integration.md

2.7 KiB
Raw Blame History

Sidebar Integration

Purpose

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

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.