/** * Nelson Dashboard — Mobile Drawer Navigation (Experimental) * * TO REVERT: Delete this file, delete assets/js/nd-mobile-drawer.js, * and remove the nd-mobile-drawer enqueue block in functions/enqueue.php. * * What this does: * - Hides the sidebar off-screen on mobile (≤968px) * - Injects a hamburger button (via nd-mobile-drawer.js) that slides it in as a drawer * - Adds a semi-transparent backdrop that closes the drawer on tap * - Leaves desktop layout completely untouched */ /* ─── Hamburger button ─────────────────────────────────────── */ /* Hidden on desktop; JS injects it into */ .nd-drawer-toggle { display: none; } /* ─── Backdrop ─────────────────────────────────────────────── */ .nd-drawer-backdrop { display: none; } /* ─── Mobile overrides (≤968px matches existing breakpoint) ── */ @media (max-width: 968px) { /* Show hamburger — flows inside the content area, below the theme header */ .nd-drawer-toggle { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; padding: 0; margin-bottom: var(--nd-space-md, 1rem); border: none; border-radius: var(--nd-radius-md, 6px); background: var(--nelson-sidebar-bg, var(--nd-gray-dark, #495057)); cursor: pointer; box-shadow: var(--nd-shadow-md, 0 4px 8px rgba(0,0,0,.15)); /* No position: fixed — sits naturally at the top of the content column */ } .nd-drawer-toggle span { display: block; width: 22px; height: 2px; background: var(--nelson-sidebar-text, var(--nd-white, #fff)); border-radius: 2px; transition: transform var(--nd-transition-base, 0.2s ease), opacity var(--nd-transition-base, 0.2s ease); } /* Animate hamburger → X when drawer is open */ body.nd-drawer-open .nd-drawer-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nd-drawer-open .nd-drawer-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); } body.nd-drawer-open .nd-drawer-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Backdrop — covers only the content area to the RIGHT of the drawer. * This keeps the drawer itself fully interactive (no pointer-event interception). */ .nd-drawer-backdrop { display: block; position: fixed; top: 0; left: 280px; /* matches drawer width — only covers content area */ right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 99999; /* just below the drawer (100000) but above the theme header */ opacity: 0; pointer-events: none; transition: opacity var(--nd-transition-base, 0.2s ease); cursor: pointer; } body.nd-drawer-open .nd-drawer-backdrop { opacity: 1; pointer-events: auto; } /* Container: keep column flow (hamburger is now inside the content, not fixed) */ .nd-dashboard-container { padding-top: var(--nd-space-md, 1rem) !important; } /* Sidebar slides off-screen left, becomes a fixed overlay drawer. * z-index must beat the Divi fixed header (9999) and similar theme headers. */ .nd-dashboard-sidebar { position: fixed !important; top: var(--nd-adminbar-offset, 0px) !important; left: -300px !important; width: 280px !important; min-width: 280px !important; max-width: 280px !important; height: calc(100vh - var(--nd-adminbar-offset, 0px)) !important; height: calc(100dvh - var(--nd-adminbar-offset, 0px)) !important; overflow-y: auto !important; z-index: 100000 !important; transition: left var(--nd-transition-slow, 0.3s ease) !important; margin-bottom: 0 !important; box-shadow: var(--nd-shadow-lg, 0 10px 40px rgba(0,0,0,.3)) !important; } body.nd-drawer-open .nd-dashboard-sidebar { left: 0 !important; } /* Content takes full width without the sidebar stealing space */ .nd-dashboard-content { width: 100% !important; max-width: 100% !important; } }