Navigation Bar

Cần navigation cho mobile app?
├─ 3-5 top-level destinations, equal importance → Bottom Navigation
│   ├─ iOS style (liquid glass, floating) → variant="glass"
│   ├─ Material style (chip indicator) → variant="default"
│   └─ OneUI style (bold active, minimal) → variant="minimal"
├─ < 3 destinations → Tabs
├─ > 5 destinations → Drawer + Hamburger
├─ Desktop/web primary nav → navigation-menu
└─ Actions (not navigation) → Bottom Bar (bottom-bar pattern)

<!-- HTML skeleton with data-slot -->
<nav class="ground-bottomnav" data-slot="navigation-bar" role="navigation" aria-label="Main">
  <button class="ground-bottomnav__item ground-bottomnav__item--active" data-slot="navigation-bar-item">
    <span class="ground-bottomnav__indicator">
      <span class="ground-bottomnav__icon" data-slot="navigation-bar-icon">🏠</span>
    </span>
    <span class="ground-bottomnav__label" data-slot="navigation-bar-label">Home</span>
  </button>
</nav>

interface BottomNavProps {
  /** Visual variant */
  variant?: 'default' | 'glass' | 'minimal' | 'elevated';
  /** Navigation items (3-5) */
  items: BottomNavItem[];
  /** Currently active item index */
  activeIndex: number;
  /** Callback when item tapped */
  onSelect: (index: number) => void;
  /** Collapse on scroll (glass variant only) */
  collapseOnScroll?: boolean;
  /** Show labels on inactive items */
  showInactiveLabels?: boolean;
}

interface BottomNavItem {
  /** Icon (active state — filled) */
  icon: ReactNode;
  /** Icon for inactive state (outlined) — optional */
  iconInactive?: ReactNode;
  /** Label text */
  label: string;
  /** Badge count (0 = dot only, >0 = number) */
  badge?: number;
  /** Href for navigation */
  href?: string;
}

<button class="ground-bottomnav__item">
    <span class="ground-bottomnav__indicator"></span>  <!-- sibling -->
    <span class="ground-bottomnav__icon">...</span>
    <span class="ground-bottomnav__label">Home</span>
</button>

.ground-bottomnav__item { position: relative; }
.ground-bottomnav__indicator {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 64px; height: 32px;
    pointer-events: none;
}

{/* Default (Material style) */}
<BottomNav
  variant="default"
  items={[
    { icon: <HomeIcon />, label: "Home", badge: 3 },
    { icon: <SearchIcon />, label: "Search" },
    { icon: <WalletIcon />, label: "Wallet" },
    { icon: <ProfileIcon />, label: "Profile" },
  ]}
  activeIndex={0}
  onSelect={handleNav}
/>

{/* Glass (iOS 26 Liquid Glass) */}
<BottomNav
  variant="glass"
  items={items}
  activeIndex={activeIndex}
  onSelect={handleNav}
  collapseOnScroll
/>

{/* Minimal (Samsung OneUI style) */}
<BottomNav
  variant="minimal"
  showInactiveLabels={false}
  items={items}
  activeIndex={1}
  onSelect={handleNav}
/>

/* Container — Ground layer */
.ground-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-index-fixed);
  background: var(--background);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, var(--spacing-8-5));
}

/* Glass variant — floating capsule (Figma-aligned) */
.ground-bottomnav--glass {
  position: fixed;
  bottom: var(--spacing-2);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-subtle);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--card-border);
  border-radius: var(--comp-radius-capsule); /* 9999px — full chip */
  border-top: none; /* no top separator — floating */
  padding: var(--spacing-2);
  gap: var(--spacing-2);
}

/* Glass active item — full chip wrapping icon+label */
.ground-bottomnav--glass .ground-bottomnav__item--active {
  background: var(--input);
  border: 1px solid var(--border-ghost);
  border-radius: var(--comp-radius-capsule);
  color: var(--foreground);
  min-width: 60px;
  padding: var(--spacing-2);
}

/* Glass inactive items */
.ground-bottomnav--glass .ground-bottomnav__item {
  color: var(--muted-foreground);
  min-width: 60px;
  padding: var(--spacing-2);
}

/* Glass icon size — 20px per Figma */
.ground-bottomnav--glass .ground-bottomnav__icon {
  width: 20px;
  height: 20px;
}

/* Glass: no separate indicator chip — active item IS the chip */
.ground-bottomnav--glass .ground-bottomnav__indicator::before {
  display: none;
}

/* Nav items container */
.ground-bottomnav__items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--spacing-20, 80px); /* MD3 Expressive: 80dp */
  padding: 0 var(--spacing-2);
}

/* Individual item */
.ground-bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1); /* S2: 4px base unit */
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--spacing-3); /* horizontal only — flex centers vertically */
  border: none;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
  position: relative;
  transition: color var(--duration-fast-2) var(--easing-standard);
}

/* Active state */
.ground-bottomnav__item--active {
  color: var(--primary);
}

/* Active indicator chip — 64×32 per MD3 Expressive */
.ground-bottomnav__indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
}

.ground-bottomnav__item--active .ground-bottomnav__indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary-muted);
  color: var(--primary); /* bg/fg pair */
  border-radius: var(--radius-full);
  transition: all var(--duration-slow-1) var(--easing-spring);
}

/* Icon */
.ground-bottomnav__icon {
  position: relative; /* above chip */
  width: 20px; /* unified icon size */
  height: 20px;
}

/* Label — Caption tier (T3 + §6.1) */
.ground-bottomnav__label {
  font-size: var(--font-size-xs); /* 12px — Caption tier (11-12px) */
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-normal, 1.5); /* T3: caption = 1.4-1.5 */
  letter-spacing: var(--font-tracking-wider);
}

/* Badge */
.ground-bottomnav__badge {
  position: absolute;
  top: 0;
  right: var(--spacing-1);
  min-width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--radius-full);
  background: var(--destructive);
  color: var(--destructive-foreground); /* bg/fg pair */
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-1);
}

/* Minimal variant — no chip, bold active */
.ground-bottomnav--minimal .ground-bottomnav__indicator::before {
  display: none;
}
.ground-bottomnav--minimal .ground-bottomnav__item--active {
  color: var(--foreground);
  font-weight: var(--font-weight-bold);
}

/* Reduced motion — M1 rule */
@media (prefers-reduced-motion: reduce) {
  .ground-bottomnav__item,
  .ground-bottomnav__indicator::before {
    transition: none;
  }
}