/** * Seller portal shell — responsive off-canvas sidebar. * * Desktop (>= 1024px): the sidebar is a fixed 260px column and the content area * (.seller-app-right) is offset by 260px (rule shipped in the compiled theme CSS). * * Below 1024px: the sidebar slides off-canvas and is revealed by the hamburger * (templates/layout2/page/nav-toggle.phtml), which toggles `seller-nav-open` on * . The content area then reclaims the full viewport width. * * The backdrop's visibility is driven entirely by Alpine (x-show) so we do NOT * set its `display` here — a CSS `display:none` would win over Alpine's cleared * inline style and keep it permanently hidden. On desktop the toggle is hidden * and the resize handler forces `open=false`, so the backdrop stays collapsed. */ /* Hamburger is desktop-hidden; shown only in the mobile media query below. */ .wk-seller-nav-toggle { display: none; } /* Backdrop sits above the sticky header (z-40) and content, but below the sliding sidebar (z-50). Set here (not via a Tailwind z-[45] utility, which is not in the precompiled theme CSS). Its show/hide is driven by Alpine x-show. */ .wk-seller-nav-backdrop { z-index: 45; } @media (max-width: 1023px) { /* Content spans full width once the sidebar leaves the flow. The base rule (navigation.phtml inline style) sets margin-left:260px AND width:calc(100% - 260px); both must be reset or the content stays a narrow 130px column on phones. */ .seller-app-right { margin-left: 0 !important; width: 100% !important; } /* Off-canvas drawer. */ .wk-seller-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); } body.seller-nav-open .wk-seller-sidebar { transform: translateX(0); } /* Reveal the hamburger. */ .wk-seller-nav-toggle { display: inline-flex; } /* Lock background scroll while the drawer is open. */ body.seller-nav-open { overflow: hidden; } }