#3 navigation bar component

[kodaicoder]

Side menu is completed may bee need some improvement in class arrangement to made it easy to read or may be grouping up into reusable class

*this side menu not supported on theme changed

please tell me if you want anything to change , I'm willing to do that :)

[kodaicoder]

conflicting in +layout.svelte is adding NavigationBar component and wrap <slot /> with div of style margin-top:56px; (mt-14) to prevent NavigationBar component overlap on main content

[Th1nkK1D]

conflicting in +layout.svelte is adding NavigationBar component and wrap <slot /> with div of style margin-top:56px; (mt-14) to prevent NavigationBar component overlap on main content

I checked it. Don't worry, I can fix it when you finish before merging.

[kodaicoder]

Main menu is nearly complete only need to deactivate each component if one other component is on active may be I considering to using Module Context

[Th1nkK1D]

Main menu is nearly complete only need to deactivate each component if one other component is on active may be I considering to using [Module Context] (https://learn.svelte.dev/tutorial/module-exports)

Huge progress! Just giving you an alternative approach. Add a state to the navbar to keep the open menu value, then pass the isOpened props to each menu. So each menu doesn't need to be concerned about the other menu but we let the parent navbar tell them which one to open.

[kodaicoder]

Main menu is completed 🎉🎉🎉

https://github.com/wevisdemo/parliament-watch/assets/110652592/eaa1ce37-bb51-4f7f-89f3-fcf973b59021

Next will be a last component in Navigation Bar , a searching input box. A question is what it searching for ? I need to dispatching some event out of a component ? While searching box open it will always closing main menu in every page size ?

[kodaicoder]

searching input is finish 🎉🎉 please feel free to giving a feedback.

https://github.com/wevisdemo/parliament-watch/assets/110652592/dec3b2a9-65f5-43ea-9e92-81454cb9996b

[kodaicoder]

All fixed 🎉 feel free to review that again and I will fix it ASAP

Thank you 🙏

[Th1nkK1D]

Oh my god. I'm so obsessed with the navbar transition. Everything is so smooth.

I added a logic to prevent the navbar from closing if the user scrolls while the side nav is active.

function scrollEventHandler() {
  if (sideNavActive) return; // <-- here

  const currentFromTop = window.scrollY;
  showHeader = currentFromTop <= previousFromTop;
  previousFromTop = currentFromTop;
  sideNavActive = false;
}

[kodaicoder]

I forget to mention about Announcement component it has one extra prop call hideOnScroll default is set to true that mean it will hide along with top nav while user scrolling down and shown after user scrolling up but if you set it to false it will sticky at the top of the screen all the time (if user didn't close it)

[Th1nkK1D]

Thank you for the Hacktoberfest participation! Please fill up the form before 6 November 2023 to receive our limited-edition stickers.