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?
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 @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}}]