/* ============================================================ SIDEBAR & TOP HEADER — SHARED STYLE Dipakai bersama oleh lib/header.php (User Panel) dan lib/header_admin.php (Admin Panel). Warna aksen beda antara user & admin diatur lewat CSS variable di bawah, di-override oleh class "theme-admin" pada . Tidak perlu lagi duplikasi ~390 baris CSS di 2 file terpisah. ============================================================ */ :root { --sidebar-accent: #2563eb; --sidebar-accent-rgb: 37, 99, 235; } /* Body Admin Panel pakai class ini agar aksen berubah jadi merah */ body.theme-admin { --sidebar-accent: #dc2626; --sidebar-accent-rgb: 220, 38, 38; } /* Reset & Base Styling */ html, body { overflow-x: hidden; } body { font-family: 'Inter', sans-serif; background-color: #f8fafc !important; } .hide { display: none !important } .show { display: block !important } .border-custom { border-color: var(--sidebar-accent) !important; } .bg-custom { background-color: var(--sidebar-accent) !important; } /* Overlay loading (dipakai di Admin Panel) */ .block { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); z-index: 9999; } /* Menyembunyikan panah bawaan Bootstrap agar tidak ganda di kanan atas */ .nav-user.dropdown-toggle::after { display: none !important; } /* ============================================================ SIDEBAR STYLING (Gaya SaaS) ============================================================ */ .app-sidebar { width: 260px; height: 100vh; position: fixed; top: 0; left: 0; background: #ffffff; border-right: 1px solid rgba(15, 23, 42, 0.055); box-shadow: 1px 0 0 rgba(15,23,42,.03), 4px 0 16px -8px rgba(15,23,42,.15); z-index: 1050; display: flex; flex-direction: column; overflow: hidden; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .sidebar-brand { height: 70px; padding: 0 24px; display: flex; align-items: center; } .sidebar-brand .logo { font-size: 18px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 10px; text-decoration: none !important; transition: opacity 0.2s ease; } .sidebar-brand .logo:hover { opacity: 0.75; } .sidebar-brand .logo i { color: var(--sidebar-accent); font-size: 20px; } /* Profile Card di Sidebar */ .sidebar-profile { padding: 16px; background: linear-gradient(155deg, #f8fafc 0%, #eef2ff 130%); margin: 8px 15px 10px 15px; border-radius: 14px; } .profile-info-flex { display: flex; align-items: center; gap: 12px; } .profile-avatar-wrap { position: relative; flex-shrink: 0; } .profile-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); display: block; } .profile-status-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; background: #22c55e; border: 2px solid #fff; border-radius: 50%; } .profile-details { display: flex; flex-direction: column; } .profile-details .username { font-weight: 700; font-size: 13.5px; color: #0f172a; } .profile-details .role-badge { align-self: flex-start; background: rgba(var(--sidebar-accent-rgb), 0.1); color: var(--sidebar-accent); font-size: 9.5px; font-weight: 800; padding: 1.5px 8px; border-radius: 20px; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; } /* List Menu Sidebar */ .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 15px; } .sidebar-scroll::-webkit-scrollbar { width: 5px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .menu-title { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; margin: 18px 10px 8px 10px; } .menu-title::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; } .sidebar-menu-list { list-style: none; padding: 0; margin: 0; } .sidebar-menu-list li { margin-bottom: 3px; } .sidebar-menu-list li a { position: relative; display: flex; align-items: center; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: #475569; border-radius: 12px; transition: background 0.25s ease, color 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none !important; } .sidebar-menu-list li a::before { content: ''; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--sidebar-accent); border-radius: 0 4px 4px 0; transition: height 0.25s ease; } .sidebar-menu-list li a i:first-child { font-size: 18px; margin-right: 12px; width: 20px; text-align: center; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .sidebar-menu-list li a:hover { background: #f1f5f9; color: var(--sidebar-accent); } .sidebar-menu-list li a:hover i:first-child { transform: scale(1.1); } /* Dropdown Arrow */ .submenu-arrow { margin-left: auto; font-size: 10px !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .has-submenu.open .submenu-arrow { transform: rotate(180deg); } /* Submenu Styling */ .sidebar-menu-list .submenu { position: relative; list-style: none; padding: 4px 0 4px 34px; margin: 2px 0 0; display: none; /* Tertutup secara default */ } .sidebar-menu-list .submenu::before { content: ''; position: absolute; left: 22px; top: 4px; bottom: 12px; width: 1px; background: rgba(15, 23, 42, 0.08); } .sidebar-menu-list .submenu li a { padding: 8px 14px; font-size: 13px; font-weight: 500; color: #64748b; border-radius: 8px; } .sidebar-menu-list .submenu li a::before { display: none; } .sidebar-menu-list .submenu li a:hover { color: var(--sidebar-accent); background: #f8fafc; } /* Menu Aktif */ .sidebar-menu-list li.active > a { background: rgba(var(--sidebar-accent-rgb), 0.08) !important; color: var(--sidebar-accent) !important; } .sidebar-menu-list li.active > a::before { height: 60%; } .sidebar-menu-list li.active .submenu li.active > a { color: var(--sidebar-accent) !important; font-weight: 700; } /* ============================================================ TOP HEADER BAR STYLING ============================================================ */ .app-header { height: 70px; position: fixed; top: 0; left: 260px; right: 0; background: rgba(248, 250, 252, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .header-left { display: flex; align-items: center; gap: 15px; } .header-toggle-btn { border: none; background: none; color: #475569; font-size: 20px; cursor: pointer; padding: 5px 8px; border-radius: 8px; display: flex; align-items: center; transition: background 0.2s ease, color 0.2s ease; } .header-toggle-btn:hover { background: #f1f5f9; color: var(--sidebar-accent); } .hamburger-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .hamburger-lines span { display: block; height: 2px; border-radius: 2px; background: currentColor; } .hamburger-lines span:nth-child(1) { width: 14px; } .hamburger-lines span:nth-child(2) { width: 19px; } .hamburger-lines span:nth-child(3) { width: 10px; } .header-toggle-btn:active .hamburger-lines { transform: scale(0.85); } .header-right .nav-user img { width: 36px; height: 36px; border: 1px solid rgba(15, 23, 42, 0.06); transition: box-shadow 0.2s ease; } .header-right .nav-user:hover img { box-shadow: 0 0 0 3px rgba(var(--sidebar-accent-rgb), 0.12); } .header-right .nav-user { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; border-radius: 999px; transition: background 0.2s ease; outline: none !important; box-shadow: none !important; } .header-right .nav-user:hover, .header-right .nav-user:focus, .header-right .nav-user:active, .header-right .nav-user.show { background: transparent; outline: none !important; box-shadow: none !important; } /* Shift content area ke kanan di Desktop */ body .wrapper { margin-left: 260px !important; padding-top: 85px !important; /* Spasi agar tidak tertutup top-header */ min-height: 100vh; background-color: #f8fafc !important; transition: all 0.3s ease; } /* Overlay Mobile */ .sidebar-overlay { visibility: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.3); z-index: 1040; opacity: 0; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } /* ============================================================ RESPONSIVE (MOBILE) ============================================================ */ @media (max-width: 991px) { .app-sidebar { transform: translateX(-100%); } .app-header { left: 0; padding: 0 20px; } body .wrapper { margin-left: 0 !important; } /* Sidebar meluncur keluar saat aktif */ body.sidebar-enable .app-sidebar { transform: translateX(0); box-shadow: 0 10px 20px -4px rgba(0,0,0,0.12); } body.sidebar-enable .sidebar-overlay { visibility: visible; opacity: 1; transition: opacity 0.25s ease, visibility 0s linear 0s; } } /* Tombol toggle hanya relevan di mobile (drawer), disembunyikan di desktop karena sidebar collapsed mode sudah dihilangkan */ @media (min-width: 992px) { .header-toggle-btn { display: none; } } /* ============================================================ PROFILE DROPDOWN (menu akun di pojok kanan atas) ============================================================ */ .profile-dropdown { width: auto; min-width: 300px; padding: 0; overflow: hidden; border-radius: 16px; border: 1px solid #eaeaea; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); } .profile-dropdown-head { padding: 14px 22px; } .profile-dropdown-name { font-weight: 700; font-size: 15px; color: #0f172a; } .profile-dropdown-email { font-size: 12.5px; color: #64748b; margin-top: 5px; } .profile-dropdown-balance { padding: 12px 22px; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: #475569; } .profile-dropdown-balance b { color: #0f172a; } .profile-dropdown-item { padding: 12px 22px !important; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: #475569; transition: background 0.15s ease; } .profile-dropdown-item:hover, .profile-dropdown-item:focus { background: #f8fafc; color: #475569; } .profile-dropdown-item-danger { color: #dc2626 !important; } .profile-dropdown-item-danger:hover, .profile-dropdown-item-danger:focus { background: #fef2f2; color: #dc2626 !important; } .profile-dropdown-balance i, .profile-dropdown-item i { width: 16px; text-align: center; margin-right: 0; color: #94a3b8; } .profile-dropdown-item-danger i { color: #dc2626; } /* ============================================================ PROFILE DROPDOWN — DESKTOP: jarak ke icon toggle Root cause "mepet": style.css punya ".show > .dropdown-menu { margin-top: 0 !important }" (dibuat untuk animasi dropdown lain, lihat .dropdown-menu-animated) yang ikut menimpa dropdown ini juga, jadi nempel pas di bawah avatar tanpa jarak. Selector di bawah sengaja dibuat lebih spesifik (3 class) supaya menang, dan dibatasi ke desktop saja supaya tidak bentrok dengan versi mobile di bawah. ============================================================ */ @media (min-width: 992px) { .header-right .dropdown-menu.profile-dropdown { margin-top: 10px !important; } } /* ============================================================ PROFILE DROPDOWN — MOBILE: dibuat selebar layar (gaya Medanpedia) Menimpa posisi absolute/transform bawaan Bootstrap+Popper dengan !important ============================================================ */ @media (max-width: 991px) { .header-right .dropdown-menu.profile-dropdown { position: fixed !important; top: 70px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 !important; transform: none !important; will-change: auto !important; border-radius: 0 0 20px 20px !important; border-left: none !important; border-right: none !important; border-top: none !important; box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12) !important; z-index: 1051; max-height: calc(100vh - 70px); overflow-y: auto; } }