Level 73
just add hidden to the sidebars classList.
Jan 2, 2026
5
Level 20
How to close the sidebar for mobile with the inertia ja link?
I have a sidebar containing links for the pages. Build the my portfolio with Laravel vue and inertia, while using inertia link the request works as a ajax for the spa.
Navigation works without page reloading but how could I close the sidebar on the mobile after a successful navigation on the mobile screens ?
Level 20
that the programatic way of doing but for each link on click i have to add it.
Level 73
not really, you only have to define it once.
<nav>
<a href="#" >Link 1</a>
<a href="#" >Link 2</a>
</nav>
<script>
let navs = document.querySelectorAll('nav a');
navs.forEach((nav) => {
nav.addEventListener('click', (event) => {
event.target.parentNode.classList.add('hidden');
});
});
</script>
Level 50
Direct DOM manipulation like that doesn't work in Vue, since it uses a virtual DOM. Those changes may get overwritten on the next render.
Hiding the sidebar is probably really easy in a Vue layout, but @shivamyadav didn't say how the sidebar is implemented. Typically it's just a matter of setting some state variable like showSidebar to false.
Level 50
You can listen to router events and do what's needed when a navigation event starts.
Please or to participate in this conversation.