Skip to content

[FEATURE]: feat(mobile): Customizable bottom navigation dock icons and feature grid #2

Description

@Vishal-770

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

  1. Fixed Dock Definition: In src/pages-mobile/dashboard/_layout.tsx, coreNavItems is statically defined with "Home" and "Timetable".
  2. Drawer Overlay: Unpinned items are derived via allNavItems.filter(...) and displayed in a static 3-column grid inside the bottom sheet drawer.
  3. 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

  1. State & Storage:

    • Define custom hook useMobileDock() or manage dock path array in layout state.
    • Default state: ["/dashboard", "/dashboard/timetable"].
  2. 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.
  3. Mobile Settings Integration (src/pages-mobile/dashboard/settings.tsx):

    • Add a configuration card allowing users to pick 2-3 active dock icons.
  4. Verification:

    • Verify smooth navigation between customized dock icons.
    • Ensure bottom sheet drawer correctly updates available features when dock shortcuts change.

Verification Criteria

  • Users can change which shortcuts appear on the mobile bottom navigation bar.
  • Unpinned shortcuts seamlessly move to the "Explore Features" drawer grid.
  • Custom dock choices persist across app restarts via local storage.
  • "Reset to Default" restores original dock shortcuts ("Home" and "Timetable").

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions