Nav Shell Rules

This document defines the unified rules for mobile navigation and layout behavior.

Breakpoint

• Mobile: < 768px (Screen width).
• Desktop: >= 768px.

Mobile Bottom Bar Visibility

The MobileBottomBar visibility is controlled by a single rule in AppLayout.vue:

shouldShowBottomBar = isMobile && isAuthenticated && !route.meta.hideBottomBar

• isMobile: Viewport width < 768px.
• isAuthenticated: User is logged in.
• !route.meta.hideBottomBar: Route does NOT explicitly request hiding.

Usage Examples

Full Screen Flow (Hiding Nav)

Use hideBottomBar: true in route meta for immersive experiences.

{
  path: "/exam/runner/:id",
  name: "ExamRunner",
  component: ExamRunner,
  meta: {
    requiresAuth: true,
    hideBottomBar: true, // Hides bottom bar on mobile
    noSidebar: true      // Hides sidebar on desktop
  }
}

Standard Dashboard

Standard meta usually only needs requiresAuth.

{
  path: "/student/dashboard",
  name: "StudentDashboard",
  component: StudentDashboard,
  meta: {
    requiresAuth: true
  }
}

Deprecated Meta Flags

The following flags are ignored for mobile navigation but may still exist for legacy desktop sidebar logic (to be phased out): - showBottomTabBar - showSidebar - showTopbar