Sass modules & Vanilla js Blogr Landing page

@christopher-adolphe Thank you so much for the feedback and great comments!

I totally agree on ignoring the drop-down menus as you say and I wanted to do it but I'm running out of ideas on the logic to write to do it, do you have any advice? I was thinking of putting a listen event on the entire DOM but I find it quite over the top and punchy for performance as well.

I use img when putting an image without special needs, while I use picture if I need more features such as in this case changing the image when a certain resolution is reached. By doing so I write a clean and essential code.

Happy coding!

Hi @denielden.

This picture technique looks very interesting, I will give it a try.

Adding an event listener to the entire body would definitely be costly. I've checkout your solution's git repo and tried the following which seem to do the job of dismissing the dropdown.

• Added an id to the ul element:

<nav  id="navbar" data-visible="false">
  <ul id="menu"></ul>
</nav>

• Refactored the JavaScript logic for the navbar:

const navToggle = document.querySelector('.mobile-nav-toggle'),
nav = document.querySelector('#navbar'),
menu = document.querySelector('#menu');

const openSubmenu = (event) => {
  const { target } = event;
  const parentMenu = target.parentNode;
  
  if (parentMenu.classList.contains('open')) {
    parentMenu.classList.remove('open');
    return;
  }

  const activeParentMenu = document.querySelector('li.has-submenu.open');

  if (activeParentMenu) {
    activeParentMenu.classList.remove('open');
  }

  parentMenu.classList.add('open');
};

const dismissSubMenu = () => {
  const viewportWidth = window.innerWidth;
  const activeParentMenu = document.querySelector('li.has-submenu.open');

  if (activeParentMenu && viewportWidth > 879) {
    activeParentMenu.classList.remove('open');
  }
};

navToggle.addEventListener('click', () => {
  const visible = nav.getAttribute('data-visible');

  if (visible === 'false') {
    nav.setAttribute('data-visible', true);
    navToggle.setAttribute('aria-expanded', true);
  } else {
    nav.setAttribute('data-visible', false);
    navToggle.setAttribute('aria-expanded', false);

    const activeParentMenu = document.querySelector('li.has-submenu.open');

    if (activeParentMenu) {
      activeParentMenu.classList.remove('open');
    }
  }
});

menu.addEventListener('click', openSubmenu);
menu.addEventListener('focusout', dismissSubMenu);

Instead of adding a click event listener to each li, you can leverage on the event delegation technique and extract the logic to the #menu element.

While I was checking when the mobile navigation kicks in, I noticed that on a viewport width of 880px, the navigation is getting a kind of in-between style of mobile and desktop.

@christopher-adolphe Wow! Great solution and refactoring, I have already made the change :) This feature had bothered me for some time and I couldn't find a solution.

I used an 880px viewport because I prefer to create as few breakpoints as possible and only when the design breaks.

Thanks again! And happy coding :)

Hi @denielden,

I'm happy to help and glad that those feedback were helpful 🤜🤛

I use the same approach regarding breakpoints; the fewer, the better 😎 Nowadays, there are so many devices, we just can't add breakpoints for each of them.

Best regards

@FluffyKas Thank you so much, I'm very glad you like it :)

I just did as you feedback me and you were right! I haven't thought about it at all and now as you can see it doesn't do it anymore, thanks again :)

Happy coding!

@NAZIRwill29 Thank you! I'm very glad you mulch :)

In the way you recommend the animation would be very nice!

But why do you think it is better to write all that code instead of using the image?

@denielden well, I just like the smooth animation change shape rather than drastically change the shape. Well, it just my opinion 😊

@NAZIRwill29 Of course, I am not saying that your approach is wrong, on the contrary I agree that the animation is beautiful 😁

But I find that it is a lot of code to write compared to how it can be solved with far fewer lines.

Thanks for the feedback! And happy coding 😊

@denielden yeah, I agree with you, the code is really long.

I don't know if there is another way to make it. it would be nice if we can make smooth animation with images only.

@besttlookk Thank you very much, I'm glad it inspires you!

The scroll bar styles it in the CSS using these properties:

html
    scrollbar-width: thin
    scrollbar-color: $light-red $dark
    scroll-behavior: smooth

and for webkit support:

::-webkit-scrollbar
     width: .7rem
::-webkit-scrollbar-track
     background: $dark
::-webkit-scrollbar-thumb
     background: $light-red
     border-radius: 1rem

To activate the visibility on "go to the top button" just write a little javascript logic: if window scrooldown by 200px then change the button style to display: block

I hope it helps you ;)

@denielden Thank you Daniel. I am going to apply this my presest challenge im doing.

Keep Inspiring.

#happyCoding

@satrop Hi Steven, sure I'm aware of the deprecation. In my development environment at the time of the project it was not yet supported so I used @import.

I haven't updated sass because my attention falls on other more important projects.

Thanks for looking at my code :)

All the best and happy coding!