Collapsible Vertical Sidebar Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Sidebar Navbar</title>
    <style>
        :root {
            --sidebar-width: 260px; --sidebar-width-collapsed: 90px;
            --header-height-mobile: 60px; --color-primary: #0d6efd; --color-sidebar-bg: #fff;
            --color-sidebar-text: #344767; --color-sidebar-link-active-bg: rgba(0, 0, 0, 0.06);
            --color-page-bg: #f8f9fa; --color-text-primary: #333; --color-border: #e9ecef;
            --font-family-sans-serif: "Poppins", system-ui, -apple-system, sans-serif;
            --transition-speed: 0.3s;
        }
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
        
        *, *::before, *::after { box-sizing: border-box; }
        html, body { height: 100%; margin: 0; }
        body { font-family: var(--font-family-sans-serif); background-color: var(--color-page-bg); color: var(--color-text-primary); }

.app-layout { display: flex; min-height: 100vh; }

/* --- Vertical Sidebar --- */
        .sidebar {
            position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh;
            background-color: var(--color-sidebar-bg); border-right: 1px solid var(--color-border);
            display: flex; flex-direction: column; z-index: 1000;
            transform: translateX(-100%); transition: transform var(--transition-speed) ease;
        }
        .sidebar.is-open { transform: translateX(0); }
        .sidebar__header { padding: 1.5rem; flex-shrink: 0; border-bottom: 1px solid var(--color-border); }
        .sidebar__brand { font-size: 1.5rem; font-weight: 600; text-decoration: none; color: var(--color-text-primary); display: flex; align-items: center; gap: 0.75rem; }
        .sidebar__menu { list-style: none; margin: 0; padding: 1rem; flex-grow: 1; }
        .sidebar-link {
            display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem;
            border-radius: 8px; margin-bottom: 0.5rem; color: var(--color-sidebar-text); text-decoration: none;
            transition: background-color 0.2s, color 0.2s;
        }
        .sidebar-link__icon { width: 24px; height: 24px; flex-shrink: 0; }
        .sidebar-link__text { white-space: nowrap; transition: opacity var(--transition-speed) ease, width var(--transition-speed) ease; }
        .sidebar-link:hover { background-color: var(--color-sidebar-link-active-bg); }
        .sidebar-link.is-active { background-color: var(--color-primary); color: #fff; }

.sidebar__footer { padding: 1.5rem; flex-shrink: 0; border-top: 1px solid var(--color-border); }
        #sidebar-collapse-btn { display: none; } /* Hidden on mobile */
        
        /* --- Mobile Header & Content --- */
        .mobile-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-height-mobile); padding: 0 1rem; background: #fff; border-bottom: 1px solid var(--color-border); }
        .page-content-wrapper { width: 100%; }
        .main-content { padding: 1.5rem; }
        .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; }
        
        /* --- Desktop Styles --- */
        @media (min-width: 992px) {
            .mobile-header, .sidebar-overlay { display: none; }
            .sidebar { position: sticky; transform: translateX(0); transition: width var(--transition-speed) ease; }
            .page-content-wrapper { flex-grow: 1; margin-left: var(--sidebar-width); transition: margin-left var(--transition-speed) ease; }
            
            #sidebar-collapse-btn { display: flex; }

/* --- Collapsed State --- */
            .sidebar.is-collapsed { width: var(--sidebar-width-collapsed); }
            .sidebar.is-collapsed .sidebar-link { justify-content: center; }
            .sidebar.is-collapsed .sidebar-brand { justify-content: center; }

/* Hide all text spans when collapsed */
            .sidebar.is-collapsed .sidebar-link__text,
            .sidebar.is-collapsed .sidebar__brand span {
                opacity: 0; width: 0; padding: 0; margin: 0; overflow: hidden;
            }
            .sidebar.is-collapsed + .page-content-wrapper { margin-left: var(--sidebar-width-collapsed); }

/* Logic for swapping collapse/expand icons */
            .icon-expand { display: none; }
            .sidebar.is-collapsed .icon-collapse { display: none; }
            .sidebar.is-collapsed .icon-expand { display: block; }
        }
    </style>
</head>
<body>
    <div class="app-layout">
        <nav class="sidebar" id="app-sidebar">
            <div class="sidebar__header">
                <a href="#" class="sidebar__brand">
                    <svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M12,2L3,7.5V16.5L12,22L21,16.5V7.5L12,2Z" /></svg>
                    <span>AppPanel</span>
                </a>
            </div>
            <ul class="sidebar__menu">
                <li><a href="#" class="sidebar-link is-active"><svg class="sidebar-link__icon" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span class="sidebar-link__text">Dashboard</span></a></li>
                <li><a href="#" class="sidebar-link"><svg class="sidebar-link__icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12,16A2,2 0 0,0 14,14A2,2 0 0,0 12,12A2,2 0 0,0 10,14A2,2 0 0,0 12,16M12,8A2,2 0 0,0 14,6A2,2 0 0,0 12,4A2,2 0 0,0 10,6A2,2 0 0,0 12,8Z" /></svg><span class="sidebar-link__text">Reports</span></a></li>
                <li><a href="#" class="sidebar-link"><svg class="sidebar-link__icon" viewBox="0 0 24 24"><path fill="currentColor" d="M16,11.75V10.25L12,11L8,10.25V11.75L12,12.5L16,11.75M12,2L1,9L12,16L23,9L12,2M6,10.05V13L12,14.6L18,13V10.05L12,11.6L6,10.05Z" /></svg><span class="sidebar-link__text">Users</span></a></li>
            </ul>
            <div class="sidebar__footer">
                <a href="#" class="sidebar-link" id="sidebar-collapse-btn">
                    
                    <svg class="sidebar-link__icon icon-collapse" viewBox="0 0 24 24"><path fill="currentColor" d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>
                    
                    <svg class="sidebar-link__icon icon-expand" viewBox="0 0 24 24"><path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>
                    <span class="sidebar-link__text">Collapse</span>
                </a>
            </div>
        </nav>
        <div class="page-content-wrapper">
            <header class="mobile-header">
                <button id="mobile-menu-open-btn" aria-label="Open menu" aria-controls="app-sidebar" aria-expanded="false">&#x2630;</button>
                <a href="#" class="sidebar__brand"><span>App</span>Panel</a>
            </header>
            <main class="main-content">
                <h1>Dashboard</h1>
                <p>Content goes here. This version has corrected alignment and mobile behavior.</p>
            </main>
        </div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const sidebar = document.getElementById('app-sidebar');
        const collapseBtn = document.getElementById('sidebar-collapse-btn');
        const mobileOpenBtn = document.getElementById('mobile-menu-open-btn');
        const isCollapsedKey = 'sidebarIsCollapsed';

if (collapseBtn && sidebar) {
            if (localStorage.getItem(isCollapsedKey) === 'true') sidebar.classList.add('is-collapsed');
            collapseBtn.addEventListener('click', (e) => {
                e.preventDefault();
                sidebar.classList.toggle('is-collapsed');
                localStorage.setItem(isCollapsedKey, sidebar.classList.contains('is-collapsed'));
            });
        }
        
        if (mobileOpenBtn && sidebar) {
            mobileOpenBtn.addEventListener('click', () => {
                sidebar.classList.add('is-open');
                mobileOpenBtn.setAttribute('aria-expanded', 'true');
                const overlay = document.createElement('div');
                overlay.className = 'sidebar-overlay';
                document.body.appendChild(overlay);
                overlay.addEventListener('click', closeMobileMenu);
            });
        }
        
        function closeMobileMenu() {
            sidebar.classList.remove('is-open');
            mobileOpenBtn.setAttribute('aria-expanded', 'false');
            const overlay = document.querySelector('.sidebar-overlay');
            if (overlay) overlay.remove();
        }
    });
    </script>
</body>
</html>