




<style>
    .header {
    grid-column: 2;
    height: 70px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
</style>



  <header class="header">
            <button class="toggle" id="sidebarToggle" aria-label="Toggle sidebar"><i
                    class="fa-solid fa-bars"></i></button>
            <div class="title-wrap">
                <div class="title" id="pageTitle">Customer Dashboard</div>
                <div class="muted" id="headerInfo">Customer insights and management</div>
            </div>

            <div class="pill" id="clock"><i class="fa-regular fa-clock"></i> <span>--:--</span></div>
            <div class="search">
                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                <input type="text" placeholder="Search customers…" aria-label="Search customers">
                <kbd style="opacity:.6">/</kbd>
            </div>
            <button class="toggle" id="collapseToggle" aria-label="Collapse sidebar"><i
                    class="fa-solid fa-grip-lines"></i></button>
            <div style="width:1px;height:28px;background:rgba(255,255,255,0.12);"></div>
            <i class="fa-regular fa-bell" style="font-size:20px;opacity:.9"></i>
            <div class="avatar" title="You" 
     style="width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: var(--gradient);">
    <i class="fa-solid fa-user-tie" style="font-size:18px; color:#fcf7f7;"></i>
</div>

        </header>


        <script>
            const clock = document.querySelector('#clock span');
    const headerInfo = document.getElementById('headerInfo');
    function pad(n){ return (n<10? '0':'') + n }
    function tick(){
      const d = new Date();
      const h = pad(d.getHours());
      const m = pad(d.getMinutes());
      clock.textContent = `${h}:${m}`;
    }
    setInterval(tick, 1000); tick();
    headerInfo.textContent = 'Customer insights and management dashboard';
    document.getElementById('year').textContent = new Date().getFullYear();

    // ===== Sidebar: dropdowns =====
    const dropdownTriggers = [...document.querySelectorAll('[data-toggle="submenu"]')];
    dropdownTriggers.forEach(btn => {
      const item = btn.closest('.nav-item');
      const pane = item.querySelector('.submenu');
      btn.addEventListener('click', () => {
        const expanded = btn.getAttribute('aria-expanded') === 'true';
        btn.setAttribute('aria-expanded', String(!expanded));
        btn.classList.toggle('active', !expanded);
        pane.style.height = !expanded ? (pane.scrollHeight + 'px') : '0px';
        btn.querySelector('.chev').style.transform = !expanded ? 'rotate(180deg)' : 'rotate(0)';
      });
    });

        </script>