Desktop Navigation (Tabs)

Uses .tabs, .tabs-item, and .tabs-link classes. Active tabs show a colored bottom indicator.

<nav class="primary-nav">
  <div class="tabs">
    <div class="tabs-item">
      <a href="/" class="tabs-link active">Home</a>
    </div>
    <div class="tabs-item">
      <a href="/about" class="tabs-link">About</a>
    </div>
  </div>
</nav>

Mobile Navigation (Hamburger Menu)

Uses .hamburger-menu, .hamburger-toggle, .hamburger-dropdown, and .hamburger-link classes. Hidden on desktop (768px+).

<div class="hamburger-menu">
  <button class="hamburger-toggle"><!-- SVG icon --></button>
  <div class="hamburger-dropdown">
    <a href="/" class="hamburger-link active">Home</a>
    <a href="/about" class="hamburger-link">About</a>
  </div>
</div>

Horizontal Tabs

<div class="tabs">
  <div class="tabs-item">
    <button class="tabs-link active">Overview</button>
  </div>
  <div class="tabs-item">
    <button class="tabs-link">Features</button>
  </div>
</div>

Vertical Tabs

Add .tabs-vertical class for sidebar-style navigation.

<div class="tabs tabs-vertical">
  <div class="tabs-item">
    <button class="tabs-link active">Dashboard</button>
  </div>
  <div class="tabs-item">
    <button class="tabs-link">Settings</button>
  </div>
</div>

Default Unlisted Tab

Without configuration, unlisted pages show an italic "Unlisted" label with a flag icon.

// Page component (no configuration)
// Header automatically shows "Unlisted 🏴" in italic

<span class="tabs-link unlisted-content active">
  Unlisted 🏴
</span>

Custom Label & Color

Pages can set a custom label and accent color for their tab indicator.

// In your page component:
import { useSetUnlistedTab } from '@/shared-theme/useSetUnlistedTab';

export default function GmpPage() {
  useSetUnlistedTab({
    label: 'GMP Mode',    // Custom label (replaces "Unlisted")
    color: '#f39c12'      // Custom accent color (orange)
  });

  return <div>Page content</div>;
}

// The CSS variable --nav-unlisted-tab-color controls the color:
// Header component injects: :root { --nav-unlisted-tab-color: #f39c12; }

React Hook API

// UnlistedTabContext provides:
interface UnlistedTabContextType {
  label: string | null;     // Current tab label
  color: string | null;     // Current accent color
  setLabel: (label: string | null) => void;
  setColor: (color: string | null) => void;
}

// useSetUnlistedTab hook (recommended):
useSetUnlistedTab({
  label?: string;  // Optional: defaults to "Unlisted" with flag
  color?: string;  // Optional: defaults to theme primary blue
});

// Hook automatically cleans up on unmount

Button Variants

<button class="btn">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>

Button Sizes

<button class="btn btn-sm">Small</button>
<button class="btn">Medium</button>
<button class="btn btn-lg">Large</button>

Block Button

<button class="btn btn-block">Full Width</button>

Modal Sizes

Drawer Variants

Side panels that slide in from the edge of the screen.

<div class="modal-overlay active">
  <div class="modal modal-lg">
    <div class="modal-header">
      <h2 class="modal-title">Modal Title</h2>
      <button class="modal-close">&times;</button>
    </div>
    <div class="modal-body">Content</div>
    <div class="modal-footer">
      <button class="btn">Save</button>
    </div>
  </div>
</div>

Basic Progress

Color Variants

<div class="progress">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 60%"></div>
</div>