[Vertex] Implement responsive navigation for tablet and mobile

[Codebmk]

Problem
The application's main navigation sidebar (secondary sidebar) is currently hidden on screen sizes below 1024px, providing a poor user experience on tablet and mobile devices.

Task
Update the application's responsive layout to ensure the existing secondary sidebar is visible and functional on tablet-sized screens. Additionally, introduce a new bottom navigation bar for mobile screens.

Project Setup

1. Ensure you have Node.js version 18 or higher installed.

2. Fork and clone the AirQo Frontend repository: git clone git@github.com:airqo-platform/AirQo-frontend.git

3. Navigate to the project directory: cd AirQo-frontend/src/vertex

4. Install the necessary dependencies: npm install

Acceptance Criteria:

• Tablet View (< 1024px):

  • The existing secondary sidebar must be made visible and functional on screen sizes below 1024px.

  • When toggled, it must appear from the right side of the screen.

• Mobile View (< 760px):

  • A new bottom navigation bar must be visible.

  • The UI and layout of this bottom navigation bar must be an exact copy of the one used on https://analytics.airqo.net.

  • The bottom navigation bar must be created as a new component located in /components/layout/.

  • The links displayed must be context-aware:

    • Private Context: Show "Home", "My Devices", "Claim Device".

    • External/Internal Context: Show "Home", "Devices" (linking to /devices/overview), and "Sites".

  • The right-side sidebar must still be functional, but any features/links that are now displayed in the bottom navigation bar must be removed from it to avoid duplication.

• Code Quality: The solution must not introduce any new TypeScript or ESLint errors.

Additional Context:

• The existing secondary sidebar component is located at /components/layout/secondary-sidebar.tsx.

[AKATWIJUKA-ELIA]

hello i would lilke to give it a try

[Codebmk]

Go for it @AKATWIJUKA-ELIA