<style>
    :root {
        --sidebar-width: 260px;
        --primary-color: #2c3e50;
        --accent-color: #198754;
        --header-height: 60px;
    }

    /* Header atas yang menggantung */
    .top-navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: var(--header-height);
        background: white;
        display: flex;
        align-items: center;
        padding: 0 20px;
        z-index: 1030;
        border-bottom: 1px solid #e3e6f0;
    }

    .sidebar {
        width: var(--sidebar-width);
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: var(--primary-color);
        color: white;
        z-index: 1040;
        transition: all 0.3s;
        overflow-y: auto;
    }

    /* Padding utama agar konten tidak tertutup header */
    .main-content {
        margin-left: var(--sidebar-width);
        padding-top: calc(var(--header-height) + 20px);
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
        min-height: 100vh;
        background: #f8f9fa;
        transition: all 0.3s;
    }

    /* Responsif Mobile */
    @media (max-width: 992px) {
        .sidebar { left: -100%; }
        .sidebar.show { left: 0; }
        .main-content { margin-left: 0; }
        .top-navbar { left: 0; width: 100%; }
    }

    /* Style Navigasi */
    .nav-link { color: #bdc3c7; padding: 12px 20px; display: flex; align-items: center; text-decoration: none; font-size: 0.9rem; }
    .nav-link:hover { background: #34495e; color: white; }
    .nav-link.active { background: var(--accent-color); color: white; border-radius: 0 25px 25px 0; margin-right: 15px; }
    .nav-link i { width: 30px; }
    .nav-label { font-size: 0.7rem; text-transform: uppercase; padding: 15px 20px 5px; color: #7f8c8d; font-weight: bold; }
</style>

<div class="top-navbar shadow-sm">
    <button class="btn btn-dark btn-sm me-3" onclick="toggleSidebar()">
        <i class="fa fa-bars"></i> Menu
    </button>
    <span class="fw-bold text-dark">POSYANDU DESA</span>
</div>

<div class="sidebar shadow" id="mySidebar">
    <div class="p-3 text-center border-bottom border-secondary mb-2">
        <h5 class="fw-bold mb-0 text-white">POSYANDU</h5>
        <small class="text-secondary small"><?= strtoupper($_SESSION['role'] ?? 'Admin') ?></small>
    </div>

    <a href="dashboard.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'dashboard') ? 'active' : '' ?>">
        <i class="fa fa-home"></i> Dashboard
    </a>

    <div class="nav-label">Data Kesehatan</div>
    <a href="rekap_balita.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'balita') ? 'active' : '' ?>">
        <i class="fa fa-baby"></i> Pemeriksaan Balita
    </a>
    <a href="rekap_bumil.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'bumil') ? 'active' : '' ?>">
        <i class="fa fa-person-pregnant"></i> Pemeriksaan Bumil
    </a>
    <a href="rekap_lansia.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'lansia') ? 'active' : '' ?>">
        <i class="fa fa-person-cane"></i> Pemeriksaan Lansia
    </a>

    <div class="nav-label">Manajemen Sistem</div>
    <a href="manage_users.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'users') ? 'active' : '' ?>">
        <i class="fa fa-users-cog"></i> Master User

    </a>

    <div class="nav-label">Konten Website</div>
    <a href="manage_berita.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'berita') ? 'active' : '' ?>">
        <i class="fa fa-newspaper"></i> Berita & Artikel
    </a>
    <a href="manage_pages.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'pages') ? 'active' : '' ?>">
        <i class="fa fa-file-lines"></i> Halaman Statis
    </a>
    <a href="manage_slider.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'slider') ? 'active' : '' ?>">
        <i class="fa fa-images"></i> Slider Foto
    </a>
    <a href="manage_agenda.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'agenda') ? 'active' : '' ?>">
        <i class="fa fa-calendar-alt"></i> Jadwal Posyandu
    </a>
    <a href="manage_grafik_publik.php" class="nav-link <?= strpos($_SERVER['PHP_SELF'], 'grafik') ? 'active' : '' ?>">
        <i class="fa fa-chart-pie"></i> Pengaturan Grafik
    </a>

    <div style="margin-top: 50px; padding-bottom: 20px;">
        <a href="../logout.php" class="nav-link text-danger" onclick="return confirm('Keluar?')">
            <i class="fa fa-sign-out-alt"></i> Logout
        </a>
    </div>
</div>

<script>
    function toggleSidebar() {
        document.getElementById('mySidebar').classList.toggle('show');
    }
    
    document.addEventListener('click', function(event) {
        var sidebar = document.getElementById('mySidebar');
        var btn = document.querySelector('.top-navbar .btn');
        if (window.innerWidth <= 992 && !sidebar.contains(event.target) && !btn.contains(event.target)) {
            sidebar.classList.remove('show');
        }
    });
</script>