static/shared/layouts/header.html

<!-- Header - Cursor-Inspired Design -->
<header class="header" role="banner">
  <!-- Left Section - Breadcrumb -->
  <div class="header-left">
    <div class="header-breadcrumb" id="header-breadcrumb">
      <div class="breadcrumb-item">
        <a href="/">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
            <polyline points="9 22 9 12 15 12 15 22"/>
          </svg>
        </a>
      </div>
      <span class="breadcrumb-separator">/</span>
      <div class="breadcrumb-item active">
        <span id="current-page-title">Dashboard</span>
      </div>
    </div>
  </div>

  <!-- Center Section - Search -->
  <div class="header-center">
    <div class="header-search">
      <svg class="header-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.35-4.35"/>
      </svg>
      <input type="text" class="header-search-input" placeholder="Search..." id="header-search" />
    </div>
  </div>

  <!-- Right Section - Actions -->
  <div class="header-right">
    <!-- API Status Indicator -->
    <div class="status-indicator" id="api-status-indicator">
      <span class="status-dot" id="status-dot"></span>
      <span id="status-text">API Live</span>
    </div>

    <!-- Notifications -->
    <button class="icon-btn" aria-label="Notifications" title="Notifications" id="notifications-btn">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
      </svg>
      <span class="icon-btn-badge" style="display: none;"></span>
    </button>

    <!-- Theme Toggle -->
    <button class="icon-btn" aria-label="Toggle theme" title="Toggle theme" id="theme-toggle-btn">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon-light">
        <circle cx="12" cy="12" r="4"/>
        <path d="M12 2v2"/>
        <path d="M12 20v2"/>
        <path d="m4.93 4.93 1.41 1.41"/>
        <path d="m17.66 17.66 1.41 1.41"/>
        <path d="M2 12h2"/>
        <path d="M20 12h2"/>
        <path d="m6.34 17.66-1.41 1.41"/>
        <path d="m19.07 4.93-1.41 1.41"/>
      </svg>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon-dark" style="display: none;">
        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
      </svg>
    </button>

    <!-- Settings -->
    <a href="/static/pages/settings/index.html" class="icon-btn" aria-label="Settings" title="Settings">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
    </a>
  </div>
</header>

<!-- Mobile Menu Button (Hidden on Desktop) -->
<button class="mobile-menu-btn" id="mobile-menu-toggle" aria-label="Toggle menu" style="display: none;">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="4" y1="6" x2="20" y2="6"/>
    <line x1="4" y1="12" x2="20" y2="12"/>
    <line x1="4" y1="18" x2="20" y2="18"/>
  </svg>
</button>

<!-- Sidebar Overlay for Mobile -->
<div class="sidebar-overlay" id="sidebar-overlay"></div>

<script>
// Header interaction handlers
(function() {
  // Update breadcrumb based on current page
  function updateBreadcrumb() {
    const path = window.location.pathname;
    const pageTitle = document.getElementById('current-page-title');

    if (path.includes('/dashboard')) {
      pageTitle.textContent = 'Dashboard';
    } else if (path.includes('/market')) {
      pageTitle.textContent = 'Market';
    } else if (path.includes('/models')) {
      pageTitle.textContent = 'AI Models';
    } else if (path.includes('/sentiment')) {
      pageTitle.textContent = 'Sentiment';
    } else if (path.includes('/ai-analyst')) {
      pageTitle.textContent = 'AI Analyst';
    } else if (path.includes('/technical-analysis')) {
      pageTitle.textContent = 'Technical Analysis';
    } else if (path.includes('/trading-assistant')) {
      pageTitle.textContent = 'Trading';
    } else if (path.includes('/news')) {
      pageTitle.textContent = 'News';
    } else if (path.includes('/providers')) {
      pageTitle.textContent = 'Providers';
    } else if (path.includes('/system-monitor')) {
      pageTitle.textContent = 'System Monitor';
    } else if (path.includes('/settings')) {
      pageTitle.textContent = 'Settings';
    } else if (path.includes('/help')) {
      pageTitle.textContent = 'Help';
    }
  }

  // Theme toggle
  const themeToggle = document.getElementById('theme-toggle-btn');
  const lightIcon = document.querySelector('.theme-icon-light');
  const darkIcon = document.querySelector('.theme-icon-dark');

  if (themeToggle) {
    themeToggle.addEventListener('click', () => {
      const currentTheme = document.documentElement.getAttribute('data-theme');
      const newTheme = currentTheme === 'light' ? 'dark' : 'light';

      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);

      // Toggle icons
      if (newTheme === 'light') {
        lightIcon.style.display = 'block';
        darkIcon.style.display = 'none';
      } else {
        lightIcon.style.display = 'none';
        darkIcon.style.display = 'block';
      }
    });
  }

  // Initialize theme from localStorage
  const savedTheme = localStorage.getItem('theme') || 'dark';
  document.documentElement.setAttribute('data-theme', savedTheme);
  if (savedTheme === 'light') {
    lightIcon.style.display = 'block';
    darkIcon.style.display = 'none';
  } else {
    lightIcon.style.display = 'none';
    darkIcon.style.display = 'block';
  }

  // Mobile menu toggle
  const mobileMenuBtn = document.getElementById('mobile-menu-toggle');
  const sidebar = document.querySelector('.sidebar');
  const sidebarOverlay = document.getElementById('sidebar-overlay');

  if (mobileMenuBtn && sidebar && sidebarOverlay) {
    mobileMenuBtn.addEventListener('click', () => {
      sidebar.classList.toggle('open');
      sidebarOverlay.classList.toggle('active');
    });

    sidebarOverlay.addEventListener('click', () => {
      sidebar.classList.remove('open');
      sidebarOverlay.classList.remove('active');
    });
  }

  // Search functionality (placeholder)
  const searchInput = document.getElementById('header-search');
  if (searchInput) {
    searchInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        const query = searchInput.value.trim();
        if (query) {
          console.log('Search query:', query);
          // Implement search functionality here
        }
      }
    });
  }

  // Initialize
  updateBreadcrumb();
})();
</script>