hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech
Apache License 2.0
205 stars 264 forks source link

[FIX]: [FE KIMIKO] Implement a Fixed Side Navigation Bar with Scrollable Content Section on the Mobile #1286

Open B-Beth opened 3 weeks ago

B-Beth commented 3 weeks ago

Description

Implement a layout where the main content or surrounding interface of the website remains static while the Content section within each icon allows users to scroll up and down. and keep the highlight on the icon at the sidebar or navbar when the scrolling is happening.

In the mobile view the highlight removes when scrolling down and when scrolling up user can be lost on what icon is picked

Acceptance Criteria

The main content page (The side nav bar) remains fixed and highlighted when the Content section within the icons are scrolled.

The implementation does not interfere with the overall user experience, ensuring smooth scrolling and usability.

The design should ensure no overlap or clipping of content between the fixed and scrollable sections.

Ensure that the layout adapts to various screen sizes and orientations.

Links

| LIVE LINK https://kimiko-golang.teams.hng.tech/dashboard/admin/settings/data-and-privacy

Images

image

https://github.com/user-attachments/assets/ad205588-cc2a-4b80-94d9-43230bf1eb34

abdulmalikyusuf commented 2 weeks ago

On this!!!