/* ===================================================== SIDEBAR.CSS Style sidebar bersama, dipakai di semua halaman supaya tampilan sidebar konsisten (diambil dari admin_dashboard.php). Cara pakai: 1. Simpan file ini satu folder dengan file .php lain. 2. Di bagian tiap halaman, tambahkan: 3. Pastikan tiap halaman punya variabel warna --navy dan --navy-2 (biasanya sudah ada di :root halaman itu). Kalau belum ada, biarkan saja variabel di bawah ini yang dipakai sebagai cadangan (fallback). 4. Struktur HTML sidebar harus sama seperti di admin_dashboard.php (lihat sidebar-template.html). ===================================================== */ /* Font "Public Sans" dipakai di admin_dashboard.php — di-import di sini juga supaya sidebar tetap pakai font yang sama walau halaman lain belum memuat font ini sendiri. */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); :root { --navy: #0f172a; --navy-2: #111827; } /* ---------- Sidebar utama ---------- */ .sidebar { width: 260px; height: 100vh; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: #ffffff; padding: 26px 20px; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; overflow-y: auto; transition: width 0.25s ease, padding 0.25s ease; z-index: 1000; font-family: 'Public Sans', Arial, sans-serif; } .content { margin-left: 260px; transition: margin-left 0.25s ease; } /* ---------- Brand / logo instansi ---------- */ .sidebar-brand { margin-bottom: 28px; } .sidebar-brand h1 { margin: 0 0 8px; color: #ffffff; font-size: 18px; line-height: 1.15; font-weight: 800; } .sidebar-brand p { margin: 0; color: #9fb0cc; font-size: 12px; line-height: 1.45; } .agency { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .agency img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .agency strong, .agency span { display: block; color: #ffffff; line-height: 1.15; } .agency strong { font-size: 14px; font-weight: 800; } .agency span { font-size: 12px; font-weight: 700; } /* ---------- Label section menu ---------- */ .menu-section-label { color: #64748b; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin: 18px 14px 8px; } .menu-section-label:first-of-type { margin-top: 0; } /* ---------- Menu & link ---------- */ .menu a { display: flex; align-items: center; gap: 12px; color: #9fb0cc; background: transparent; text-decoration: none; padding: 13px 14px; margin-bottom: 8px; border-radius: 12px; font-size: 15px; font-weight: 500; transition: 0.2s; box-shadow: none; } .menu a i { width: 20px; text-align: center; font-size: 15px; } .menu a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; box-shadow: none; } .menu a.active { background: linear-gradient(135deg, #4f46e5, #6d5dfc); color: #ffffff; box-shadow: 0 14px 26px rgba(79, 70, 229, 0.32); } .menu-group { margin-bottom: 8px; } .menu-toggle { width: 100%; display: flex; align-items: center; gap: 12px; color: #9fb0cc; background: transparent; border: none; text-align: left; padding: 13px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; transition: 0.2s; } .menu-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .menu-toggle.active { background: linear-gradient(135deg, #4f46e5, #6d5dfc); color: #ffffff; box-shadow: 0 14px 26px rgba(79, 70, 229, 0.32); } .menu-toggle i:first-child { width: 20px; text-align: center; font-size: 15px; } .menu-toggle span { flex: 1; } .menu-arrow { font-size: 11px !important; width: auto !important; transition: transform 0.2s ease; } .menu-toggle.open .menu-arrow { transform: rotate(180deg); } /* ---------- Submenu ---------- */ .submenu { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding-left: 14px; } .submenu.show { max-height: 200px; } .submenu-link { display: flex; align-items: center; gap: 12px; color: #9fb0cc; text-decoration: none; padding: 11px 14px; margin-top: 4px; border-radius: 10px; font-size: 14px; transition: 0.2s; } .submenu-link i { width: 18px; text-align: center; font-size: 13px; } .submenu-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .submenu-link.active { background: rgba(79, 70, 229, 0.28); color: #ffffff; font-weight: 700; } /* ---------- Footer sidebar ---------- */ .sidebar-footer { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #64748b; font-size: 11px; text-align: center; line-height: 1.5; } /* ---------- Overlay khusus mobile ---------- */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; } .mobile-overlay.show { display: block; } /* ===================================================== Mode collapse (icon-only) untuk laptop/desktop saat tombol garis 3 (topbar-menu) ditekan ===================================================== */ @media (min-width: 901px) { .sidebar.collapsed { width: 84px; padding: 26px 12px; } .sidebar.collapsed~.content { margin-left: 84px; } .sidebar.collapsed .sidebar-brand h1, .sidebar.collapsed .sidebar-brand p, .sidebar.collapsed .agency strong, .sidebar.collapsed .agency span, .sidebar.collapsed .menu-section-label, .sidebar.collapsed .menu a span, .sidebar.collapsed .menu-toggle span, .sidebar.collapsed .menu-arrow, .sidebar.collapsed .submenu, .sidebar.collapsed .sidebar-footer { display: none; } .sidebar.collapsed .agency { justify-content: center; margin-bottom: 0; } .sidebar.collapsed .menu a, .sidebar.collapsed .menu-toggle { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar.collapsed .menu a i, .sidebar.collapsed .menu-toggle i:first-child { width: auto; font-size: 17px; } } /* ===================================================== Tampilan mobile / HP (sidebar jadi drawer/slide-in) ===================================================== */ @media (max-width: 900px) { body { overflow-x: hidden; } .sidebar { position: fixed; top: 0; left: -280px; width: 260px; height: 100vh; padding: 26px 20px; z-index: 1000; transition: left 0.25s ease; } .sidebar.show { left: 0; } .content { margin-left: 0; width: 100%; } }