Desktop Navigation Specification¶
This document defines the unified navigation model for desktop users (viewport >= 768px).
Principles¶
- Sidebar as Primary Navigation: The sidebar is the only source of truth for navigation. Sub-navigation is handled via flyout (secondary) menus or accordion groups.
- No Launcher Grid: The "Menu Utama" or PWA-style launcher grid MUST NOT render on desktop. This prevents navigation drift and reduces visual noise.
- Mandatory Tooltips: All primary sidebar icons must display a tooltip on hover, specifically in the collapsed state.
- Logical Grouping: All roles (Student, Teacher, Parent) use a grouped menu structure to maintain a manageable sidebar length.
Components¶
AppSidebar¶
- Handles top-level groups.
- Displays flyout for items with children.
- Integrates
SidebarTooltip.
SidebarTooltip¶
- Lightweight wrapper for hover tooltips.
- 300ms delay to prevent flickering.
- Positioned to the right of the icon.
Implementation Guidelines¶
Hiding Redundant Menus¶
Use the isMobile guard or CSS hidden classes (md:hidden) to ensure mobile-only components like MobileLauncherGrid do not render on desktop.
Grouping in menuRegistry¶
Groups should be declared using the children property in src/config/menuRegistry.js. Avoid hardcoding component-level mappings.