admin
311f702da3
GeneratePress child theme bitwms-child with full brandbook CSS (corporate pink #E50071, Suisse Int'l typography, utility classes), PHP bootstrap, and sidebar navigation JS placeholder ready for Task 3. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
/**
|
|
* БИТ.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 <body> 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 <body> 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();
|
|
}
|
|
} );
|
|
} );
|