agent_tracker/templates/nav.html

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand d-flex align-items-center" href="{{ base_path }}/">
      <span class="brand-mark" aria-hidden="true"></span>
      <span>AgentHub</span>
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
      aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav me-auto">
        {% if current_user %}
        <a class="nav-link" href="{{ base_path }}/profile">
          <i class="fas fa-home me-1"></i>Home
        </a>
        {% endif %}
        {% if current_user %}
        {% if not current_user.is_admin %}
        <a class="nav-link" href="{{ base_path }}/agent-management">
          <i class="fas fa-globe me-1"></i>All Agents
        </a>
        <a class="nav-link" href="{{ base_path }}/agent-management?view=my">
          <i class="fas fa-robot me-1"></i>My Agents
        </a>
        {% endif %}
        {% if current_user.is_admin %}
        <a class="nav-link" href="{{ base_path }}/admin">
          <i class="fas fa-tachometer-alt me-1"></i>Admin
        </a>
        {% endif %}
        {% endif %}
      </div>

      <div class="navbar-nav">
        {% if current_user %}
        <a class="nav-link" href="{{ base_path }}/search">
          <i class="fas fa-search me-1"></i>Search
        </a>
        <div class="nav-item dropdown">
          <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button"
            data-bs-toggle="dropdown">
            <div class="user-avatar me-2">
              {{ current_user.full_name[0] if current_user.full_name else current_user.email[0] }}
            </div>
            {{ current_user.full_name or current_user.email.split('@')[0] }}
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li>
              <h6 class="dropdown-header">{{ current_user.email }}</h6>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <a class="dropdown-item" href="{{ base_path }}/profile">
                <i class="fas fa-user me-2"></i>My Profile
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="{{ base_path }}/agent-register">
                <i class="fas fa-plus-circle me-2"></i>Add Agent
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="{{ base_path }}/agent-management">
                <i class="fas fa-list me-2"></i>My Agents
              </a>
            </li>
            {% if current_user.is_admin %}
            <li>
              <a class="dropdown-item" href="{{ base_path }}/admin">
                <i class="fas fa-cog me-2"></i>Admin Panel
              </a>
            </li>
            {% endif %}
            {% if current_user.get('actual_is_admin') or current_user.is_admin %}
            <li>
              <a class="dropdown-item" href="#" onclick="toggleAdminView(event)">
                <i class="fas fa-exchange-alt me-2"></i>
                {% if current_user.get('actual_is_admin') %}
                Switch to Admin View
                {% else %}
                Switch to User View
                {% endif %}
              </a>
            </li>
            {% endif %}
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <a class="dropdown-item text-danger" href="{{ base_path }}/logout">
                <i class="fas fa-sign-out-alt me-2"></i>Logout
              </a>
            </li>
          </ul>
        </div>
        {% else %}
        <a class="nav-link" href="{{ base_path }}/login">
          <i class="fas fa-sign-in-alt me-1"></i>Login
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</nav>

<style>
  .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--brand-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    z-index: 1050 !important;
    position: absolute !important;
  }

  .dropdown-item {
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease;
    border-radius: 4px;
    margin: 0 0.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--brand-dark);
  }

  .dropdown-item:hover {
    background-color: var(--brand-yellow-soft);
    color: var(--brand-dark);
  }

  .dropdown-item.text-danger {
    color: var(--brand-orange) !important;
  }

  .dropdown-item.text-danger:hover {
    background-color: #FEEFE5;
    color: var(--brand-orange) !important;
  }

  .dropdown-header {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .navbar-toggler {
    border: none;
    padding: 4px 8px;
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }

  .nav-item.dropdown {
    position: relative;
    z-index: 1100;
  }
</style>

<script>
  async function toggleAdminView(event) {
    event.preventDefault();

    try {
      const response = await fetch('{{ base_path }}/api/admin/toggle-view', {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        const data = await response.json();

        // Redirect based on new view mode
        if (data.view_mode === 'user') {
          window.location.href = '{{ base_path }}/agent-management';
        } else {
          window.location.href = '{{ base_path }}/admin';
        }
      } else {
        const error = await response.json();
        alert('Failed to toggle view: ' + (error.detail || 'Unknown error'));
      }
    } catch (error) {
      console.error('Error toggling admin view:', error);
      alert('Failed to toggle view. Please try again.');
    }
  }

</script>