search

Fermain / -mollify

9 stars 9 forks source link

UX Improvement for Navigation Bar on Mobile #142

Closed Ousman37 closed 10 months ago

Ousman37 commented 11 months ago

This pull request tackles a UX problem regarding the navigation bar's behavior on mobile screens. Presently, the navigation bar fails to close after selecting an item, necessitating additional clicks to access the desired content.

Changes Made:

Implemented distinct open states for each navigation item.
Fine-tuned the toggle function to manage individual open states.
Revised the Svelte template to leverage entity-specific open states.
Enforced closure of entity children upon link clicks.

Issue Resolved:

Addressed the persistent navigation bar issue following clicks on mobile screens. Now, the navigation bar collapses its children upon link selection, thereby enriching the user experience.

Testing:

Thoroughly tested across devices to ensure consistent and improved behavior.

Fermain commented 11 months ago

I'm testing this, and unable to open the dropdown submenu on the navigation

Ousman37 commented 11 months ago

I'll look into the matter and provide you with an update once I've examined the issue. I also encountered the same problem after cloning the project. I made changes to the "packages/lms/src/lib/components/navigation/EntityNav.svelte". Could this be the source of the problem?

Ousman37 commented 11 months ago

I might have been editing the incorrect file initially—possibly "EntityNav.svelte." After realizing my mistake, I went back to the right file and restored the code changes I had made to "EntityNav.svelte."

To recap the main modifications, here's a summary of what I did in the "+layout.svelte" file:

Introduced a new variable named "isMobile" to determine whether the current screen is in a mobile view.
Created functions to consistently monitor and update the "isMobile" variable based on the width of the screen.
Utilized conditional rendering with {#if isMobile} to exclusively display the navigation drawer component on mobile screens.
Adjusted the behavior of the navigation drawer to automatically close after selecting an item on mobile screens, while preserving its open state on desktop screens.
Fine-tuned the threshold value for screen width (originally set at 768) that defines mobile screens, allowing for flexible adjustments.