Lewati ke isi

Scola Navigation & Layout

Dokumentasi navigasi, sidebar, mobile nav, dan breadcrumb.

Sub-docs

  • Sidebar — Desktop sidebar: structure, menu registry, role-based visibility
  • Mobile Nav — Mobile bottom bar, placement, dashboard layout
  • Breadcrumbs — Breadcrumb behavior & best practices
  • Access Control — Capability model, tier guards, route/menu sync

Breakpoints

Mode Width Layout
Desktop ≥ 768px Sidebar (collapsible) + main content
Mobile < 768px Bottom bar + hamburger menu

Mobile Bottom Bar Visibility

shouldShowBottomBar = isMobile && isAuthenticated && !route.meta.hideBottomBar
  • isMobile: viewport width < 768px
  • isAuthenticated: user is logged in
  • !route.meta.hideBottomBar: route does NOT explicitly hide it

Full-Screen Mode (CBT Runner, etc.)

{
  meta: {
    hideBottomBar: true,  // Hides mobile bottom bar
    noSidebar: true       // Hides desktop sidebar
  }
}

Key Files

File Purpose
src/config/menuRegistry.js Menu structure definition per role
src/config/roleCapabilities.js Capability → menu mapping
src/layouts/AppLayout.vue Main layout (sidebar + bottom bar logic)
src/components/layout/NSidebar3.vue Desktop sidebar component
src/components/layout/MobileBottomBar.vue Mobile navigation