/** * БИТ.WMS Child Theme — js/sidebar-nav.js * * Sidebar navigation toggle behaviour. * Placeholder for Task 3 — full sidebar implementation will extend this file. * * Behaviour: * - Clicking the hamburger button toggles `.sidebar-nav--open` on the sidebar. * - Simultaneously toggles `.sidebar-overlay` on to show the dim overlay. * - Clicking the overlay closes the sidebar. */ document.addEventListener( 'DOMContentLoaded', function () { 'use strict'; // Guard: abort if there is no sidebar on this page. var sidebar = document.querySelector( '.sidebar-nav' ); if ( ! sidebar ) { return; } var hamburger = document.querySelector( '.sidebar-nav__toggle' ); var body = document.body; /** * Open the sidebar and show the overlay. */ function openSidebar() { sidebar.classList.add( 'sidebar-nav--open' ); body.classList.add( 'sidebar-overlay' ); } /** * Close the sidebar and hide the overlay. */ function closeSidebar() { sidebar.classList.remove( 'sidebar-nav--open' ); body.classList.remove( 'sidebar-overlay' ); } /** * Toggle sidebar state. */ function toggleSidebar() { if ( sidebar.classList.contains( 'sidebar-nav--open' ) ) { closeSidebar(); } else { openSidebar(); } } // Attach toggle to hamburger button (if present). if ( hamburger ) { hamburger.addEventListener( 'click', function ( e ) { e.preventDefault(); toggleSidebar(); } ); } // Close sidebar when the overlay (body::after pseudo-element area) is clicked. // We detect clicks on that land outside the sidebar itself. body.addEventListener( 'click', function ( e ) { if ( body.classList.contains( 'sidebar-overlay' ) && ! sidebar.contains( e.target ) && ( ! hamburger || ! hamburger.contains( e.target ) ) ) { closeSidebar(); } } ); } );