di luar navbar-inner.
========================================================================== */
/* --------------------------------------------------------------------------
CUSTOM PROPERTIES — navbar scope
-------------------------------------------------------------------------- */
:root {
--navbar-pill-max-width : var(--container-xl); /* lebar maksimum pill navbar */
--navbar-pill-height : 52px; /* tinggi pill (desktop) */
--navbar-pill-height-sm : 48px; /* tinggi pill (mobile) */
/* --navbar-top-offset : 16px; jarak dari atas layar */
--navbar-side-padding : var(--size-400); /* 16px — ruang kiri-kanan pill */
--navbar-pad-block : var(--size-400);
/* Glass surface */
--navbar-glass-bg-light: hsla(0, 0%, 100%, 0.72);
--navbar-glass-bg-dark: hsla(0, 0%, 8%, 0.70);
--navbar-glass-blur: 16px;
--navbar-glass-border-light: hsla(0, 0%, 100%, 0.45);
--navbar-glass-border-dark: hsla(0, 0%, 100%, 0.10);
--navbar-glass-shadow-light:
0 4px 24px -4px hsla(0, 0%, 0%, 0.10),
0 1px 4px -1px hsla(0, 0%, 0%, 0.06),
inset 0 1px 0 hsla(0, 0%, 100%, 0.60);
--navbar-glass-shadow-dark:
0 4px 24px -4px hsla(0, 0%, 0%, 0.50),
0 1px 4px -1px hsla(0, 0%, 0%, 0.30),
inset 0 1px 0 hsla(0, 0%, 100%, 0.06);
/* Transition timings */
--navbar-transition-appear: var(--duration-expand) var(--ease-out);
--navbar-transition-hide: var(--duration-sluggish) var(--ease-in);
--navbar-transition-glass: var(--duration-sluggish) var(--ease-default);
}
/* --------------------------------------------------------------------------
WRAPPER — fixed di viewport, full-width, pointer-events: none agar
konten di bawah tetap bisa diklik di area kosong
-------------------------------------------------------------------------- */
.navbar {
position : fixed;
top : 0;
left : 0;
right : 0;
z-index : var(--z-sticky);
transition:
transform var(--navbar-transition-appear),
opacity var(--navbar-transition-appear);
/* Reset background dari design-system — glassmorphism di .navbar-inner */
background-color: transparent;
padding-block : var(--size-400);
/* Transisi saat muncul / sembunyi */
transform: translateY(0);
border-bottom: none; /* reset border-bottom juga */
box-shadow: none; /* reset transition target */
}
.navbar.is-scrolled {
box-shadow: none;
}
/* State: navbar tersembunyi (scroll ke bawah cukup jauh) */
.navbar--hidden {
transform: translateY(calc(-100% - var(--navbar-pad-block) - 8px));
transition:
transform var(--navbar-transition-hide),
opacity var(--navbar-transition-hide);
}
/* --------------------------------------------------------------------------
INNER PILL — layout container (brand · nav · actions · hamburger)
Catatan: container ini TIDAK lagi membawa glass surface. Glass
background/blur/border/shadow sekarang nempel di .navbar-main saja
(lihat section DESKTOP NAVIGATION di bawah).
-------------------------------------------------------------------------- */
.navbar-inner {
display : grid;
grid-template-columns : 1fr auto 1fr;
align-items : center;
gap : var(--size-400);
height : var(--navbar-pill-height);
max-width : var(--navbar-pill-max-width);
margin-inline : auto;
padding-inline : var(--size-500); /* 20px — padding dalam pill */
pointer-events : auto; /* interaksi aktif di dalam pill */
}
/* --------------------------------------------------------------------------
BRAND / LOGO
-------------------------------------------------------------------------- */
.navbar-brand {
justify-self : start;
gap : var(--size-200);
color : var(--color-text-primary);
}
.navbar-logo {
height : 28px;
width : auto;
display : block;
}
.navbar-brand-name {
font-size : var(--text-heading-xs-size);
font-weight : var(--font-weight-bold);
color : var(--color-text-primary);
white-space : nowrap;
letter-spacing : -0.01em;
}
/* --------------------------------------------------------------------------
DESKTOP NAVIGATION — terpusat di dalam pill
-------------------------------------------------------------------------- */
.navbar-main {
justify-self : center;
align-items : center;
border-radius : var(--radius-full);
display : flex;
gap: var(--size-50);
/* Fit-content: background pill cuma selebar link di dalamnya,
bukan ikut melebar mengisi flex:1 seperti sebelumnya. */
width: max-content;
/* Center absolute terhadap .navbar-inner, independen dari lebar
.navbar-brand & .navbar-actions di kiri-kanannya. */
padding: var(--size-200) var(--size-200); /* 4px 8px — jarak link ke tepi pill glass */
/* pill shape */
/* --- INITIAL STATE: transparan, tanpa background --- */
background-color: transparent;
border: 1px solid transparent;
box-shadow: none;
/* Transisi glass effect */
transition:
background-color var(--navbar-transition-glass),
backdrop-filter var(--navbar-transition-glass),
-webkit-backdrop-filter var(--navbar-transition-glass),
border-color var(--navbar-transition-glass),
box-shadow var(--navbar-transition-glass);
}
/* --- GLASS STATE: aktif saat .navbar--glass, hanya bungkus nav link --- */
.navbar--glass .navbar-main {
background-color: var(--navbar-glass-bg-light);
backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
-webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
border-color: var(--navbar-glass-border-light);
box-shadow: var(--navbar-glass-shadow-light);
}
/* Dark mode glass */
[data-theme="dark"] .navbar--glass .navbar-main {
background-color: var(--navbar-glass-bg-dark);
border-color: var(--navbar-glass-border-dark);
box-shadow: var(--navbar-glass-shadow-dark);
}
/* justify-center: nav item rata tengah */
.navbar-main.justify-center {
justify-content: center;
}
.navbar-link {
display: inline-flex;
align-items: center;
gap: var(--size-100);
padding: var(--size-150) var(--size-350); /* 6px 14px */
font-size: var(--text-label-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-full);
white-space: nowrap;
transition: var(--transition-base);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.navbar-link:hover {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.06);
}
[data-theme="dark"] .navbar-link:hover {
background-color: hsla(0, 0%, 100%, 0.10);
}
.navbar-link-active,
.navbar-link[aria-current="page"] {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.08);
font-weight: var(--font-weight-semibold);
}
[data-theme="dark"] .navbar-link-active,
[data-theme="dark"] .navbar-link[aria-current="page"] {
background-color: hsla(0, 0%, 100%, 0.12);
}
.navbar-link:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
ACTIONS (kanan)
-------------------------------------------------------------------------- */
.navbar-actions {
justify-self : end;
display : flex;
align-items : center;
gap : var(--size-200);
}
/* Theme toggle button */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
color: var(--color-text-secondary);
transition: var(--transition-base);
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.06);
}
[data-theme="dark"] .theme-toggle:hover {
background-color: hsla(0, 0%, 100%, 0.10);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
.theme-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle-icon svg {
width: var(--size-icon-sm); /* 16px */
height: var(--size-icon-sm);
}
/* User trigger button */
.navbar-user-trigger {
background: none;
border: none;
cursor: pointer;
padding: var(--size-100);
border-radius: var(--radius-full);
transition: box-shadow var(--duration-fast) var(--ease-default);
display: flex;
}
.navbar-user-trigger:hover {
box-shadow: 0 0 0 3px var(--color-border-default);
}
.navbar-user-trigger:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
.navbar-user-link {
display: inline-flex;
align-items: center;
/* gap: var(--size-100); */
padding: var(--size-150) var(--size-250); /* 6px 10px */
font-size: var(--text-label-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-full);
white-space: nowrap;
transition: var(--transition-base);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
/* --------------------------------------------------------------------------
HAMBURGER BUTTON (mobile only)
-------------------------------------------------------------------------- */
.navbar-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
padding: var(--size-200);
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
margin-left: auto;
flex-shrink: 0;
}
.navbar-hamburger:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
.navbar-hamburger-bar {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-text-primary);
border-radius: var(--radius-full);
transition:
transform var(--duration-normal) var(--ease-in-out),
opacity var(--duration-normal) var(--ease-in-out);
transform-origin: center;
}
/* Hamburger → X */
.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* --------------------------------------------------------------------------
MOBILE MENU — muncul di bawah pill
-------------------------------------------------------------------------- */
.navbar-mobile-menu {
max-width: var(--navbar-pill-max-width);
margin-inline: auto;
margin-top: var(--size-200);
border-radius: var(--radius-2xl);
overflow: hidden;
pointer-events: auto;
/* Glass background */
background-color: var(--navbar-glass-bg-light);
backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
-webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
border: 1px solid var(--navbar-glass-border-light);
box-shadow: var(--navbar-glass-shadow-light);
padding: var(--size-300) var(--size-400) var(--size-400);
animation: ds-slide-down var(--duration-moderate) var(--ease-out) both;
}
[data-theme="dark"] .navbar-mobile-menu {
background-color: var(--navbar-glass-bg-dark);
border-color: var(--navbar-glass-border-dark);
box-shadow: var(--navbar-glass-shadow-dark);
}
.navbar-mobile-link {
display: block;
padding: var(--size-300) var(--size-400);
font-size: var(--text-body-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-lg);
transition: var(--transition-base);
}
.navbar-mobile-link:hover {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.05);
}
[data-theme="dark"] .navbar-mobile-link:hover {
background-color: hsla(0, 0%, 100%, 0.08);
}
.navbar-mobile-link-active {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.07);
font-weight: var(--font-weight-semibold);
}
.navbar-mobile-menu .container,
.navbar-mobile-menu nav {
display: flex;
flex-direction: column;
gap: var(--size-50);
}
/* --------------------------------------------------------------------------
RESPONSIVE BREAKPOINTS
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.navbar-inner {
height: var(--navbar-pill-height-sm);
padding-inline: var(--size-400); /* 16px pada mobile */
}
.navbar-main,
.navbar-actions {
display: none;
}
.navbar-hamburger {
display: flex;
grid-column: 3;
justify-self: end;
}
.navbar-mobile-menu {
margin-inline: var(--navbar-side-padding);
}
}
@media (min-width: 768px) {
.navbar-mobile-menu {
display: none !important;
}
}
/* Tablet: sedikit lebih compact */
@media (min-width: 768px) and (max-width: 1023px) {
.navbar-inner {
padding-inline: var(--size-400);
}
.navbar-link {
padding: var(--size-150) var(--size-300);
}
}
/* ==========================================================================
MEGA MENU
--------------------------------------------------------------------------
Mega menu melebar full-width viewport, tapi konten di dalamnya
dibatasi lebar --navbar-pill-max-width agar tetap sejajar dengan pill.
Strategi posisi:
- .navbar-mega-wrapper → relative, inline-flex (sebagai nav item)
- .mega-menu → fixed (agar bisa melebar full viewport)
posisi Y dihitung via JS (top = bawah navbar)
STATE:
- [data-open="true"] pada .navbar-mega-wrapper → menu tampil
HTML PATTERN:
========================================================================== */
/* ── Custom properties untuk mega menu ── */
:root {
--mega-menu-gap-top: var(--size-300); /* jarak pill → mega menu */
--mega-menu-padding: var(--size-600); /* padding dalam menu */
--mega-menu-col-gap: var(--size-600); /* gap antar kolom */
--mega-menu-item-radius: var(--radius-lg);
}
/* ── Wrapper (menggantikan posisi nav item) ── */
.navbar-mega-wrapper {
position: static; /* mega-menu sendiri yang pakai fixed */
display: inline-flex;
align-items: center;
}
/* Arrow Rotate */
.arrow-rotate{
transform-origin: center;
transition: transform var(--duration-moderate) var(--ease-default);
}
.navbar-mega-wrapper[data-open="true"] .arrow-rotate {
transform: rotate(-180deg);
}
/* ── Mega menu panel (fixed, full-width) ── */
.mega-menu {
/* Posisi: fixed, top di-set oleh JS.
Lebar card DIBATASI selebar .navbar-inner (--navbar-pill-max-width / 1280px)
dan di-center pakai trik left:0; right:0; width:
; margin-inline:auto
(bukan transform:translateX) supaya tidak bentrok dengan animasi
translateY di mega-enter/mega-leave. */
position: absolute;
top: 100%;
left: 0;
right: 0;
width: min(calc(100% - (var(--navbar-side-padding) * 2)), var(--navbar-pill-max-width));
margin-inline: auto;
z-index: calc(var(--z-sticky) - 1); /* di bawah navbar pill */
/* Glass surface — konsisten dengan navbar glass */
background-color: var(--navbar-glass-bg-light);
backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
-webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
/* border-bottom: 1px solid var(--navbar-glass-border-light); */
border: 1px solid var(--navbar-glass-border-light);
box-shadow:
0 8px 32px -8px hsla(0, 0%, 0%, 0.12),
0 2px 8px -2px hsla(0, 0%, 0%, 0.06);
pointer-events: auto;
overflow: hidden;
/* ── Animasi: clip-path reveal dari atas ── */
transform-origin: top center;
animation: none;
border-radius: var(--radius-xl);
}
.mega-menu[data-entering] {
animation: mega-enter var(--duration-moderate) var(--ease-out) both;
}
.mega-menu[data-leaving] {
animation: mega-leave var(--duration-normal) var(--ease-in) both;
}
@keyframes mega-enter {
from {
opacity: 0;
transform: translateY(-8px);
clip-path: inset(0 0 100% 0);
}
to {
opacity: 1;
transform: translateY(0);
clip-path: inset(0 0 0% 0);
}
}
@keyframes mega-leave {
from {
opacity: 1;
transform: translateY(0);
clip-path: inset(0 0 0% 0);
}
to {
opacity: 0;
transform: translateY(-6px);
clip-path: inset(0 0 100% 0);
}
}
[data-theme="dark"] .mega-menu {
background-color: var(--navbar-glass-bg-dark);
/* border-bottom-color: var(--navbar-glass-border-dark); */
border-color: var(--navbar-glass-border-dark);
box-shadow:
0 8px 32px -8px hsla(0, 0%, 0%, 0.50),
0 2px 8px -2px hsla(0, 0%, 0%, 0.30);
}
/* ── Inner: full-width dari .mega-menu (yang sudah dibatasi 1280px) ── */
.mega-menu-inner {
display: flex;
gap: var(--mega-menu-col-gap);
width: 100%;
padding: var(--mega-menu-padding) var(--navbar-side-padding);
}
/* ── Kolom ── */
.mega-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--size-100);
}
/* Featured column: lebih lebar */
.mega-col-featured {
flex: 1.4;
}
/* Label kolom */
.mega-col-label {
font-size: var(--text-label-size);
font-weight: var(--font-weight-semibold);
color: var(--color-text-disabled);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--size-200);
padding-left: var(--size-300);
}
/* ── Item di dalam kolom ── */
.mega-item {
display: flex;
align-items: flex-start;
gap: var(--size-300);
padding: var(--size-300);
border-radius: var(--mega-menu-item-radius);
text-decoration: none;
color: var(--color-text-primary);
transition: background-color var(--duration-fast) var(--ease-default),
transform var(--duration-fast) var(--ease-out);
cursor: pointer;
}
.mega-item:hover {
background-color: hsla(0, 0%, 0%, 0.05);
transform: translateX(2px);
}
[data-theme="dark"] .mega-item:hover {
background-color: hsla(0, 0%, 100%, 0.07);
}
.mega-item:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
/* Ikon dalam item */
.mega-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-md);
background-color: var(--color-bg-sunken);
color: var(--color-brand);
transition: background-color var(--duration-fast) var(--ease-default);
}
.mega-item:hover .mega-item-icon {
background-color: var(--color-brand-subtle);
}
.mega-item-icon svg {
width: var(--size-icon-md);
height: var(--size-icon-md);
}
/* Teks dalam item */
.mega-item-body {
display: flex;
flex-direction: column;
gap: var(--size-50);
min-width: 0;
}
.mega-item-title {
font-size: var(--text-body-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
}
.mega-item-desc {
font-size: calc(var(--text-label-size) - 0.5px);
color: var(--color-text-secondary);
line-height: 1.4;
white-space: normal;
}
/* Divider vertikal antar kolom */
.mega-col-divider {
width: 1px;
background-color: var(--color-border-default);
margin-block: var(--size-200);
flex-shrink: 0;
}
/* Footer strip di dalam mega menu */
.mega-footer {
border-top: 1px solid var(--color-border-default);
padding: var(--size-300) var(--navbar-side-padding);
display: flex;
justify-content: center;
}
.mega-footer-inner {
display: flex;
gap: var(--size-600);
max-width: var(--navbar-pill-max-width);
width: 100%;
}
.mega-footer-link {
font-size: var(--text-label-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-link);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--size-150);
transition: color var(--duration-fast) var(--ease-default);
}
.mega-footer-link:hover {
color: var(--color-text-link-hover);
}
/* ── Featured card (untuk kolom promo) ── */
.mega-card-featured {
display: flex;
flex-direction: column;
gap: var(--size-200);
padding: var(--size-400);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-default);
text-decoration: none;
color: var(--color-text-primary);
transition:
background-color var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default);
}
.mega-card-featured:hover {
background-color: hsla(0, 0%, 0%, 0.03);
border-color: var(--color-border-strong);
}
[data-theme="dark"] .mega-card-featured:hover {
background-color: hsla(0, 0%, 100%, 0.04);
}
.mega-card-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--size-200);
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: var(--font-weight-semibold);
background-color: var(--color-brand-subtle);
color: var(--color-brand-text);
align-self: flex-start;
}
.mega-card-title {
font-size: var(--text-body-size);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.mega-card-desc {
font-size: var(--text-label-size);
color: var(--color-text-secondary);
line-height: 1.5;
}
/* ── Mobile: mega menu jadi accordion di mobile menu ── */
.navbar-mobile-mega {
display: flex;
flex-direction: column;
gap: 0;
}
.navbar-mobile-mega-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--size-300) var(--size-400);
font-size: var(--text-body-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-lg);
transition: var(--transition-base);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.navbar-mobile-mega-trigger:hover {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.05);
}
[data-theme="dark"] .navbar-mobile-mega-trigger:hover {
background-color: hsla(0, 0%, 100%, 0.08);
}
.navbar-mobile-mega-trigger[aria-expanded="true"] {
color: var(--color-text-primary);
}
.navbar-mobile-mega-trigger[aria-expanded="true"] .navbar-mega-caret {
transform: rotate(180deg);
}
/* Accordion content */
.navbar-mobile-mega-panel {
display: flex;
flex-direction: column;
gap: var(--size-50);
padding-left: var(--size-400);
overflow: hidden;
/* Animasi accordion */
max-height: 0;
opacity: 0;
transition:
max-height var(--duration-moderate) var(--ease-in-out),
opacity var(--duration-normal) var(--ease-default);
}
.navbar-mobile-mega-panel[data-open="true"] {
max-height: 480px; /* cukup besar untuk semua item */
opacity: 1;
padding-top: var(--size-100);
padding-bottom: var(--size-200);
}
/* Item di dalam mobile accordion */
.navbar-mobile-mega-item {
display: block;
padding: var(--size-250) var(--size-300);
font-size: var(--text-body-size);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: var(--transition-base);
}
.navbar-mobile-mega-item:hover {
color: var(--color-text-primary);
background-color: hsla(0, 0%, 0%, 0.05);
}
[data-theme="dark"] .navbar-mobile-mega-item:hover {
background-color: hsla(0, 0%, 100%, 0.08);
}
/* ==========================================================================
USER DROPDOWN MENU (setelah sign-in)
--------------------------------------------------------------------------
Mengadopsi .dropdown dan .dropdown-menu dari molecules/dropdown,
dengan kustomisasi visual untuk konteks navbar glass.
HTML PATTERN:
========================================================================== */
/* ── Wrapper (extend .dropdown dari DS) ── */
.navbar-user-menu {
position : relative;
display : inline-flex;
align-items : center;
}
/* ── Trigger: avatar + optional name ── */
.navbar-user-trigger {
display: inline-flex;
align-items: center;
gap: var(--size-100);
background: none;
border: none;
cursor: pointer;
padding: var(--size-100);
padding-right: var(--size-200);
border-radius: var(--radius-full);
transition:
background-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.navbar-user-trigger:hover {
background-color: hsla(0, 0%, 0%, 0.06);
}
[data-theme="dark"] .navbar-user-trigger:hover {
background-color: hsla(0, 0%, 100%, 0.10);
}
.navbar-user-trigger:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
/* Avatar di dalam trigger — ukuran sm (32px) */
.navbar-user-trigger .avatar {
width: 32px;
height: 32px;
flex-shrink: 0;
}
/* Nama user opsional */
.navbar-user-name {
font-size: var(--text-label-size);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
}
/* Caret kecil — adopt dari .dropdown-caret DS */
.navbar-user-trigger .dropdown-caret {
margin-left: 0;
opacity: 0.6;
transition: transform var(--duration-normal) var(--ease-default);
}
.navbar-user-menu[data-open="true"] .dropdown-caret {
transform: rotate(180deg);
}
.navbar-user-menu[data-open="true"] .arrow-rotate {
transform: rotate(-180deg);
}
/* ── Dropdown panel — extend .dropdown-menu dari DS ── */
.navbar-user-dropdown {
/* Override posisi: muncul dari kanan (karena ini di sudut kanan navbar) */
left: auto;
right: 0;
top: calc(100% + var(--size-600));
/* Ukuran */
min-width: 220px;
/* Glass surface — inherit sistem navbar */
background-color: var(--navbar-glass-bg-light);
backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
-webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
border: 1px solid var(--navbar-glass-border-light);
/* Override shadow dari DS: lebih dalam agar menonjol di atas glass */
box-shadow:
var(--shadow-md),
inset 0 1px 0 hsla(0, 0%, 100%, 0.55);
border-radius: var(--radius-xl);
padding: var(--size-200) var(--size-200); /* padding horizontal agar item punya radius */
transform-origin: top right;
/* Animasi — ds-scale-in dari _motion.css DS */
animation: navbar-user-dd-enter var(--duration-moderate) var(--ease-spring) both;
}
@keyframes navbar-user-dd-enter {
from {
opacity: 0;
transform: scale(0.93) translateY(-6px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Exit animation — ditambahkan via JS dengan class */
.navbar-user-dropdown[data-leaving] {
animation: navbar-user-dd-leave var(--duration-normal) var(--ease-in) both;
pointer-events: none;
}
@keyframes navbar-user-dd-leave {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.95) translateY(-4px);
}
}
[data-theme="dark"] .navbar-user-dropdown {
background-color: var(--navbar-glass-bg-dark);
border-color: var(--navbar-glass-border-dark);
box-shadow:
var(--shadow-xl),
inset 0 1px 0 hsla(0, 0%, 100%, 0.06);
}
/* ── Header section (info user) ── */
.navbar-user-dropdown-header {
display: flex;
align-items: center;
gap: var(--size-300);
padding: var(--size-300) var(--size-300) var(--size-400);
list-style: none;
}
.navbar-user-dropdown-name {
font-size: var(--text-body-size);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
line-height: 1.3;
}
.navbar-user-dropdown-email {
font-size: var(--text-label-size);
color: var(--color-text-secondary);
line-height: 1.3;
margin-top: var(--size-50);
}
/* ── Override .dropdown-item agar cocok dengan glass panel ── */
.navbar-user-dropdown .dropdown-item {
border-radius: var(--radius-md);
padding: var(--size-250) var(--size-300);
gap: var(--size-300);
}
.navbar-user-dropdown .dropdown-item:hover,
.navbar-user-dropdown .dropdown-item[data-focused="true"] {
background-color: hsla(0, 0%, 0%, 0.06);
}
[data-theme="dark"] .navbar-user-dropdown .dropdown-item:hover,
[data-theme="dark"] .navbar-user-dropdown .dropdown-item[data-focused="true"] {
background-color: hsla(0, 0%, 100%, 0.10);
}
.navbar-user-dropdown .dropdown-item-danger:hover {
background-color: var(--color-error-subtle);
}
/* Divider override */
.navbar-user-dropdown .dropdown-divider {
margin: var(--size-200) var(--size-200);
background: var(--color-border-default);
}
/* Icon dalam item */
.navbar-user-dropdown .dropdown-item-icon {
color: var(--color-text-secondary);
}
/* ── Responsive: user menu di mobile ── */
@media (max-width: 767px) {
/* Dropdown tetap bisa muncul dari tombol user di mobile menu */
.navbar-user-dropdown {
right: 0;
left: auto;
min-width: 200px;
}
}