Overview
Currently, the mobile dashboard layout in src/pages-mobile/dashboard/_layout.tsx hardcodes the bottom navigation bar items:
- Pinned Dock Items: "Home" (
/dashboard) and "Timetable" (/dashboard/timetable) plus the "More" drawer trigger.
- Drawer Grid Items: All remaining 12 feature links (Attendance, Marks, Grades, Courses, Curriculum, Exams, etc.) are fixed inside the "Explore Features" bottom sheet drawer.
Because different students prioritize different features (e.g. checking Attendance or Marks more frequently than Timetable), providing customizable bottom dock icons will allow mobile users to choose which shortcuts appear directly on their primary navigation dock.
Current State Analysis
- Fixed Dock Definition: In src/pages-mobile/dashboard/_layout.tsx,
coreNavItems is statically defined with "Home" and "Timetable".
- Drawer Overlay: Unpinned items are derived via
allNavItems.filter(...) and displayed in a static 3-column grid inside the bottom sheet drawer.
- No Storage Persistence for Layout: Mobile navigation arrangement cannot be altered by the user.
Proposed Solution
1. Customizable Bottom Dock Slots
- Allow mobile users to select which 2 or 3 feature shortcuts are pinned directly to the bottom navigation bar.
- For example, users can swap "Timetable" for "Attendance" or "Marks".
2. Dock Items Manager in Mobile Settings
- Add a "Customize Dock Icons" section in src/pages-mobile/dashboard/settings.tsx.
- Provide an intuitive interface (icon selection chips or drag-to-reorder list) to choose dock shortcuts.
- Include a "Reset to Default Dock" button to restore stock navigation at any time.
3. Automatic Grid Re-indexing
- Any feature removed from the bottom dock automatically moves back to the top of the "Explore Features" drawer grid, keeping all features accessible.
4. Persistence via Local Storage
- Store custom mobile dock item paths in
localStorage under deskly::mobile_dock_items.
- Fall back gracefully to standard defaults (
/dashboard and /dashboard/timetable) if no custom preference is stored.
Technical Implementation Plan
-
State & Storage:
- Define custom hook
useMobileDock() or manage dock path array in layout state.
- Default state:
["/dashboard", "/dashboard/timetable"].
-
Mobile Layout Refactor (src/pages-mobile/dashboard/_layout.tsx):
- Dynamically compute
coreNavItems based on active dock paths.
- Filter
moreGridItems to contain all unpinned navigation options.
-
Mobile Settings Integration (src/pages-mobile/dashboard/settings.tsx):
- Add a configuration card allowing users to pick 2-3 active dock icons.
-
Verification:
- Verify smooth navigation between customized dock icons.
- Ensure bottom sheet drawer correctly updates available features when dock shortcuts change.
Verification Criteria
Overview
Currently, the mobile dashboard layout in src/pages-mobile/dashboard/_layout.tsx hardcodes the bottom navigation bar items:
/dashboard) and "Timetable" (/dashboard/timetable) plus the "More" drawer trigger.Because different students prioritize different features (e.g. checking Attendance or Marks more frequently than Timetable), providing customizable bottom dock icons will allow mobile users to choose which shortcuts appear directly on their primary navigation dock.
Current State Analysis
coreNavItemsis statically defined with "Home" and "Timetable".allNavItems.filter(...)and displayed in a static 3-column grid inside the bottom sheet drawer.Proposed Solution
1. Customizable Bottom Dock Slots
2. Dock Items Manager in Mobile Settings
3. Automatic Grid Re-indexing
4. Persistence via Local Storage
localStorageunderdeskly::mobile_dock_items./dashboardand/dashboard/timetable) if no custom preference is stored.Technical Implementation Plan
State & Storage:
useMobileDock()or manage dock path array in layout state.["/dashboard", "/dashboard/timetable"].Mobile Layout Refactor (src/pages-mobile/dashboard/_layout.tsx):
coreNavItemsbased on active dock paths.moreGridItemsto contain all unpinned navigation options.Mobile Settings Integration (src/pages-mobile/dashboard/settings.tsx):
Verification:
Verification Criteria