search

Fermain / -mollify

9 stars 9 forks source link

Implement improved navigation behavior on mobile screens #156

Closed Ousman37 closed 10 months ago

Ousman37 commented 11 months ago

  1. Improved Navigation Behavior on Mobile Screens:

    • Updated the EntityNav component to handle navigation behavior on mobile screens.
    • Added logic to automatically close the navigation menu after an item is clicked.
    • Implemented conditional display of navigation children based on the 'open' state.

  2. Updated +layout.svelte:

    • Integrated the new navigation behavior into the layout component.
    • Ensured a seamless user experience on both desktop and mobile screens.
Ousman37 commented 10 months ago

Hello, @pretzL, could you please take a look after I delete the project and re-clone it. Let me know if there is anything else I should do. Thank you!

image Screenshot 2023-09-06 at 11 04 08
Ousman37 commented 10 months ago

The change made

After reviewing the feedback and testing, the following changes have been made to improve the behavior of the mobile navigation menu:

The isMobile variable now correctly reflects the mobile viewport width based on window.innerWidth.

An event listener has been added to the resize event of the window to update the isMobile variable when the viewport width changes. If the viewport width exceeds 768 pixels, the navigation menu (Drawer) is set to be closed (isNavVisible = false).

These changes ensure that the navigation menu behaves correctly on mobile screens and when resizing the browser window to wider screens. The mobile menu now closes when a navigation item is clicked, and it remains responsive to changes in the viewport width.

Thank you for your review, and please let me know if any further adjustments are needed.

Ousman37 commented 10 months ago

Hello, @pretzL, I've resolved the conflicts. Please let me know if any additional adjustments are required.

Lysaker-git commented 10 months ago

This might just be me - but i am getting a window is not defined when loading your branch compared to master - and i am getting undefined on the entity.id

Look at comments from Anclagen and Pretzl for window error The entities objects does not seem to have an id?

Correct me if i'm wrong.

`Object { type: "Lesson", title: "Understanding Climate Change", tags: (3) […], previous: undefined, slug: "sub-lesson", address: "src\routes\content\Lesson-two\sub-lesson\+page.md", foldername: "sub-lesson", browserPath: "/content/Lesson-two/sub-lesson/", children: [] } ​ address: "src\routes\content\Lesson-two\sub-lesson\+page.md"

browserPath: "/content/Lesson-two/sub-lesson/"

children: Array []

foldername: "sub-lesson"

previous: undefined

slug: "sub-lesson"

tags: Array(3) [ "Science", "Environment", "Climate Change" ]

title: "Understanding Climate Change"

type: "Lesson"

: Object { … }`
Ousman37 commented 10 months ago

Updated changes based on your feedback. Improved the mobile user experience by adding a sliding animation for side navigation closure. Watch the video demo: Video Link.

Fermain commented 10 months ago

I'm taking a look at this now

Lysaker-git commented 10 months ago

@Ousman37 Can we have a short meeting? I think because of our collaboration yesterday and looking for solutions - we might be working a bit parallel on the tasks and they might create some merge conflicts. I think we need to gather our findings and possibly push everything from one branch?

Ousman37 commented 10 months ago

@Lysaker-git, I can't at the moment. I have a doctor appointment. I maybe later.

Lysaker-git commented 10 months ago

After cooperation we combined this and #153 and merged #153 into master. This branch is closed.