<ul class="nav nav-tabs border-0 flex-column flex-lg-row">
  <li class="nav-item">
    <a href="{{ url_for('dashboard.index') }}"
       class="nav-link {{ 'active' if active_page == 'dashboard' }}">
      <i class="fe fe-home"></i>
      Alias
    </a>
  </li>

  <li class="nav-item">
    <a href="{{ url_for('dashboard.api_key') }}"
       class="nav-link {{ 'active' if active_page == 'api_key' }}">
      <i><img src="/static/key.svg"></i>
      API Key
    </a>
  </li>

  <li class="nav-item">
    <a href="{{ url_for('dashboard.custom_domain') }}"
       class="nav-link {{ 'active' if active_page == 'custom_domain' }}">
      <i class="fe fe-server"></i> Custom Domains
    </a>
  </li>

  <li class="nav-item">
    <a href="{{ url_for('dashboard.directory') }}"
       class="nav-link {{ 'active' if active_page == 'directory' }}">
      <i class="fe fe-folder"></i> Alias Directory
    </a>
  </li>

  <li class="nav-item">
    <a href="{{ url_for('dashboard.mailbox_route') }}"
       class="nav-link {{ 'active' if active_page == 'mailbox' }}">
      <i class="fe fe-inbox"></i> Mailboxes
    </a>
  </li>

  <!--
  <li class="nav-item">
    <a href="{{ url_for('discover.index') }}"
       class="nav-link {{ 'active' if active_page == 'discover' }}">
      <i class="fe fe-globe"></i>
      Discover
    </a>
  </li>
  -->

  <li class="nav-item">
    <a href="{{ url_for('developer.index') }}"
       class="nav-link {{ 'active' if active_page == 'developer' }}">
      <i class="fe fe-terminal"></i>
      Developer
    </a>
  </li>

  <li class="nav-item">
    <a href="{{ url_for('dashboard.setting') }}"
       class="nav-link {{ 'active' if active_page == 'setting' }}">
      <i class="fe fe-settings"></i>
      Settings
    </a>
  </li>
</ul>