Join the Webstudio community

Updated 6 months ago

Help closing the navbar

At a glance
Hi all,

I'm developing this landing page:
https://angel-e3vqs.wstd.io/

On mobile I'm using the Sheet component, and because the links are anchor links the Sheet is not closed after clicking on one of the links (it scroll to the anchor).
How can I make the Sheet to close after clicking?

Thanks!
J
H
5 comments
Hey appologies for the late response but looks like you got it worked out
Thanks for the replay @John Siciliano!

In the end, I made it different with a little bit of Javascript.
Clicking on a button opens a simple div with all the nav content, and clicking on any elements inside closes it.

I wanted to use the native Sheet component but I'm it a stressful time πŸ™‚

That is the JS code I'm using:
Plain Text
<script type="module">
let open = false;
const menuButton = document.querySelector('.mobile-navbar-trigger');
const mobileNavWrapper = document.querySelector('.mobile-nav-wrapper');
const closeElements = document.querySelectorAll(
  '.mobile-nav-bg, .mobile-nav-x, .nav-link'
);

const openNavbar = () => {
  open = true;
  if (open) mobileNavWrapper.classList.add('navbar-open');
};
const closeNavbar = () => {
  open = false;
  if (!open) mobileNavWrapper.classList.remove('navbar-open');
};

closeElements.forEach(element =>
  element.addEventListener('click', closeNavbar)
);
menuButton?.addEventListener('click', openNavbar);
</script>
thanks for sharing. so there is an issue with the sheet closing if you use jump links? I'll double check this and create an issue
Thanks @John Siciliano, I appreciate your help πŸ™‚
Add a reply
Sign up and join the conversation on Discord
","dateCreated":"2024-08-20T17:17:19.893Z","dateModified":"2024-08-20T17:17:19.893Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/43ee2132-f97a-43d5-b93f-078f2d8c6f23","name":"Harel","identifier":"43ee2132-f97a-43d5-b93f-078f2d8c6f23","image":"https://cdn.discordapp.com/avatars/1061357128251605102/f53da1894b5cc200d93fcbc07d33fb5d.webp?size=256"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"thanks for sharing. so there is an issue with the sheet closing if you use jump links? I'll double check this and create an issue","dateCreated":"2024-08-20T17:18:43.833Z","dateModified":"2024-08-20T17:18:43.833Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"jfyi https://github.com/webstudio-is/webstudio/issues/3974","dateCreated":"2024-08-20T17:26:05.578Z","dateModified":"2024-08-20T17:26:05.578Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"Thanks @John Siciliano, I appreciate your help πŸ™‚","dateCreated":"2024-08-20T21:34:04.357Z","dateModified":"2024-08-20T21:34:04.357Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/43ee2132-f97a-43d5-b93f-078f2d8c6f23","name":"Harel","identifier":"43ee2132-f97a-43d5-b93f-078f2d8c6f23","image":"https://cdn.discordapp.com/avatars/1061357128251605102/f53da1894b5cc200d93fcbc07d33fb5d.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/43ee2132-f97a-43d5-b93f-078f2d8c6f23","name":"Harel","identifier":"43ee2132-f97a-43d5-b93f-078f2d8c6f23","image":"https://cdn.discordapp.com/avatars/1061357128251605102/f53da1894b5cc200d93fcbc07d33fb5d.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]