static/shared/layouts/sidebar.html

<!-- Sidebar - Cursor-Inspired Design -->
<aside class="sidebar" role="navigation" aria-label="Main navigation" id="main-sidebar">
  <!-- Sidebar Header - Logo & Brand -->
  <div class="sidebar-header">
    <div class="sidebar-logo">
      <span>C</span>
    </div>
    <div class="sidebar-brand">Crypto Monitor</div>
  </div>

  <!-- Sidebar Navigation -->
  <nav class="sidebar-nav" id="sidebar-nav">
    <!-- Main Section -->
    <div class="nav-section-header">Main</div>

    <a href="/" class="nav-item" data-page="dashboard">
      <span class="nav-item-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="7" height="7" rx="1"/>
          <rect x="14" y="3" width="7" height="7" rx="1"/>
          <rect x="14" y="14" width="7" height="7" rx="1"/>
          <rect x="3" y="14" width="7" height="7" rx="1"/>
        </svg>
      </span>
      <span class="nav-item-label">Dashboard</span>
    </a>

    <a href="/static/pages/market/index.html" class="nav-item" data-page="market">
      <span class="nav-item-icon">
        <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="m22 7-8.5 8.5-5-5L2 17"/>
          <path d="M16 7h6v6"/>
        </svg>
      </span>
      <span class="nav-item-label">Market</span>
    </a>

    <a href="/static/pages/chart/index.html" class="nav-item" data-page="chart">
      <span class="nav-item-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/>
          <line x1="3" y1="6" x2="3" y2="21"/>
          <line x1="9" y1="3" x2="9" y2="18"/>
          <line x1="15" y1="6" x2="15" y2="21"/>
          <line x1="21" y1="3" x2="21" y2="18"/>
        </svg>
      </span>
      <span class="nav-item-label">Charts</span>
    </a>

    <!-- AI Section -->
    <div class="nav-section-header">AI & Analysis</div>

    <a href="/static/pages/models/index.html" class="nav-item" data-page="models">
      <span class="nav-item-icon">
        <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 2a4 4 0 0 1 4 4v1a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Z"/>
          <circle cx="12" cy="7" r="3"/>
          <path d="M12 11v4"/>
          <path d="M9 18h6"/>
        </svg>
      </span>
      <span class="nav-item-label">AI Models</span>
    </a>

    <a href="/static/pages/sentiment/index.html" class="nav-item" data-page="sentiment">
      <span class="nav-item-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
          <line x1="9" y1="9" x2="9.01" y2="9"/>
          <line x1="15" y1="9" x2="15.01" y2="9"/>
        </svg>
      </span>
      <span class="nav-item-label">Sentiment</span>
    </a>

    <a href="/static/pages/ai-analyst/index.html" class="nav-item" data-page="ai-analyst">
      <span class="nav-item-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="2" y="14" width="4" height="6" rx="1"/>
          <rect x="10" y="10" width="4" height="10" rx="1"/>
          <rect x="18" y="6" width="4" height="14" rx="1"/>
        </svg>
      </span>
      <span class="nav-item-label">AI Analyst</span>
    </a>

    <a href="/static/pages/technical-analysis/index.html" class="nav-item" data-page="technical-analysis">
      <span class="nav-item-icon">
        <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="M3 3v18h18"/>
          <path d="m19 9-5 5-4-4-3 3"/>
          <circle cx="19" cy="9" r="2"/>
        </svg>
      </span>
      <span class="nav-item-label">Technical</span>
    </a>

    <!-- Trading Section -->
    <div class="nav-section-header">Trading</div>

    <a href="/static/pages/trading-assistant/index.html" class="nav-item" data-page="trading-assistant">
      <span class="nav-item-icon">
        <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 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
        </svg>
      </span>
      <span class="nav-item-label">Trading Assistant</span>
    </a>

    <a href="/static/pages/news/index.html" class="nav-item" data-page="news">
      <span class="nav-item-icon">
        <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="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/>
          <path d="M18 14h-8"/>
          <path d="M15 18h-5"/>
          <path d="M10 6h8v4h-8V6Z"/>
        </svg>
      </span>
      <span class="nav-item-label">News</span>
    </a>

    <!-- System Section -->
    <div class="nav-section-header">System</div>

    <a href="/static/pages/providers/index.html" class="nav-item" data-page="providers">
      <span class="nav-item-icon">
        <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="M4 11a9 9 0 0 1 9 9"/>
          <path d="M4 4a16 16 0 0 1 16 16"/>
          <circle cx="5" cy="19" r="2"/>
        </svg>
      </span>
      <span class="nav-item-label">Providers</span>
    </a>

    <a href="/system-monitor" class="nav-item" data-page="system-monitor">
      <span class="nav-item-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <circle cx="12" cy="12" r="6"/>
          <circle cx="12" cy="12" r="2"/>
        </svg>
      </span>
      <span class="nav-item-label">System Monitor</span>
      <span class="nav-item-badge">LIVE</span>
    </a>

    <a href="/static/pages/settings/index.html" class="nav-item" data-page="settings">
      <span class="nav-item-icon">
        <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>
      </span>
      <span class="nav-item-label">Settings</span>
    </a>

    <a href="/static/pages/help/index.html" class="nav-item" data-page="help">
      <span class="nav-item-icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"/>
          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
          <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
      </span>
      <span class="nav-item-label">Help</span>
    </a>
  </nav>

  <!-- Sidebar Footer - Collapse Toggle -->
  <div class="sidebar-footer">
    <button class="sidebar-toggle" id="sidebar-collapse-toggle" aria-label="Toggle sidebar">
      <svg class="sidebar-toggle-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="11 17 6 12 11 7"/>
        <polyline points="18 17 13 12 18 7"/>
      </svg>
      <span class="nav-item-label">Collapse</span>
    </button>
  </div>
</aside>

<script>
// Sidebar interaction handlers
(function() {
  // Mark active nav item based on current page
  function setActiveNav() {
    const path = window.location.pathname;
    const navItems = document.querySelectorAll('.nav-item');

    navItems.forEach(item => {
      item.classList.remove('active');

      const href = item.getAttribute('href');
      if (href === '/' && (path === '/' || path.includes('/dashboard'))) {
        item.classList.add('active');
      } else if (href !== '/' && path.includes(href)) {
        item.classList.add('active');
      }
    });
  }

  // Sidebar collapse toggle
  const collapseToggle = document.getElementById('sidebar-collapse-toggle');
  const sidebar = document.getElementById('main-sidebar');

  if (collapseToggle && sidebar) {
    // Load saved state from localStorage
    const savedState = localStorage.getItem('sidebar-collapsed');
    if (savedState === 'true') {
      sidebar.classList.add('collapsed');
    }

    collapseToggle.addEventListener('click', () => {
      sidebar.classList.toggle('collapsed');

      // Save state to localStorage
      const isCollapsed = sidebar.classList.contains('collapsed');
      localStorage.setItem('sidebar-collapsed', isCollapsed);
    });
  }

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