privacytools.io/_includes/nav.html

<nav class="fixed-top bg-dark">
  <div id="navbar" class="d-flex flex-wrap justify-content-between align-items-center">
    <div class="w-50">
      <a id="nav-home-mobile" class="nav-anchor" href={{"/index.html" | translate_page}}>
        <img src="/assets/img/layout/logo_smaller.png" width="150px" />
      </a>
    </div>
    <input type="checkbox" id="nav-toggle" checked />
    <label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>

    <div class="menu w-100">
      <div id="nav-left" class="position-relative flex-col">
        <a class="nav-anchor" href={{"/index.html" | translate_page}}>
          <span id="nav-home" class="fas fa-home fa-fw"></span>
        </a>

        <!-- Provider -->
        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              {% t Provider %}
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a class="dropdown-item" href={{"/providers/#ukusa" | translate_page}}><span class="fas fa-user-secret fa-fw"></span> {% t Avoid US & UK services %}</a>
            <a class="dropdown-item" href={{"/providers/cloud-storage/" | translate_page}}><span class="fas fa-cloud fa-fw"></span> {% t Cloud Storage %}</a>
            <a class="dropdown-item" href={{"/providers/dns/" | translate_page}}><span class="fa fa-tasks fa-fw"></span> {% t DNS %}</a>
            <a class="dropdown-item" href={{"/providers/email/" | translate_page}}><span class="fas fa-mail-bulk fa-fw"></span> {% t Email %}</a>
            <a class="dropdown-item" href={{"/providers/hosting/" | translate_page}}><span class="fas fa-database fa-fw"></span> {% t Hosting %}</a>
            <a class="dropdown-item" href={{"/providers/paste/" | translate_page}}><span class="fas fa-paste fa-fw"></span> {% t Pastebins %}</a>
            <a class="dropdown-item" href={{"/providers/search-engines/" | translate_page}}><span class="fas fa-search fa-fw"></span> {% t Search Engines %}</a>
            <a class="dropdown-item" href={{"/providers/social-networks/" | translate_page}}><span class="fas fa-expand-arrows-alt fa-fw"></span> {% t Social Networks %}</a>
            <a class="dropdown-item" href={{"/providers/social-news-aggregator/" | translate_page}}><span class="far fa-newspaper fa-fw"></span> {% t Social News Aggregators %}</a>
            <a class="dropdown-item" href={{"/providers/vpn/" | translate_page}}><span class="far fa-eye-slash fa-fw"></span> {% t VPN %}</a>
          </span>
        </details>

        <!-- Browser -->
        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              {% t Browser %}
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a class="dropdown-item" href={{"/browsers/#browser" | translate_page}}><span class="fas fa-check fa-fw"></span> {% t Recommendation %}</a>
            <a class="dropdown-item" href={{"/browsers/#fingerprint" | translate_page}}><span class="fas fa-fingerprint fa-fw"></span> {% t Fingerprinting Info %}</a>
            <a class="dropdown-item" href={{"/browsers/#webrtc" | translate_page}}><span class="far fa-eye fa-fw"></span> {% t WebRTC IP Leak %}</a>
            <a class="dropdown-item" href={{"/browsers/#addons" | translate_page}}><span class="far fa-list-alt fa-fw"></span> {% t Browser Add-ons %}</a>
            <a class="dropdown-item" href={{"/browsers/#about_config" | translate_page}}><span class="fas fa-wrench fa-fw"></span> {% t Firefox Tweaks %}</a>
          </span>
        </details>

        <!-- Software -->
        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              {% t Software %}
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a class="dropdown-item" href={{"/software/calendar-contacts/" | translate_page}}><span class="fas fa-calendar fa-fw"></span> {% t Calendar/Contacts Sync Tools %}</a>
            <a class="dropdown-item" href={{"/software/notebooks/" | translate_page}}><span class="far fa-sticky-note fa-fw"></span> {% t Digital Notebook %}</a>
            <a class="dropdown-item" href={{"/software/email/#messaging" | translate_page}}><span class="fas fa-random fa-fw"></span> {% t Email Alternatives %}</a>
            <a class="dropdown-item" href={{"/software/email/" | translate_page}}><span class="fas fa-envelope fa-fw"></span> {% t Email Clients %}</a>
            <a class="dropdown-item" href={{"/software/encryption-tools/" | translate_page}}><span class="fas fa-lock fa-fw"></span> {% t File Encryption %}</a>
            <a class="dropdown-item" href={{"/software/file-sharing/" | translate_page}}><span class="fas fa-file-export fa-fw"></span> {% t File Sharing %}</a>
            <a class="dropdown-item" href={{"/software/file-sync/" | translate_page}}><span class="fas fa-copy fa-fw"></span> {% t File Sync %}</a>
            <a class="dropdown-item" href={{"/software/productivity/#metadata-removal-tools" | translate_page}}><span class="far fa-eye-slash fa-fw"></span> {% t Metadata Removal Tools %}</a>
            <a class="dropdown-item" href={{"/software/passwords/" | translate_page}}><span class="fas fa-user-lock fa-fw"></span> {% t Password Manager %}</a>
            <a class="dropdown-item" href={{"/software/productivity/" | translate_page}}><span class="fas fa-briefcase fa-fw"></span> {% t Productivity Tools %}</a>
            <a class="dropdown-item" href={{"/software/real-time-communication/" | translate_page}}><span class="fas fa-comments fa-fw"></span> {% t Real-Time Communication %}</a>
            <a class="dropdown-item" href={{"/software/networks/" | translate_page}}><span class="fas fa-user-secret fa-fw"></span> {% t Self-contained Networks %}</a>
            <a class="dropdown-item" href={{"/software/cloud/" | translate_page}}><span class="fas fa-hdd fa-fw"></span> {% t Self-Hosted Cloud Server %}</a>
          </span>
        </details>

        <!-- OS -->
        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              {% t OS %}
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a class="dropdown-item" href={{"/operating-systems/#os" | translate_page}}><span class="fas fa-th-large fa-fw"></span> {% t PC OS %}</a>
            <a class="dropdown-item" href={{"/operating-systems/#live_os" | translate_page}}><span class="fas fa-compact-disc fa-fw"></span> {% t Live CD OS %}</a>
            <a class="dropdown-item" href={{"/operating-systems/#mobile_os" | translate_page}}><span class="fas fa-mobile-alt fa-fw"></span> {% t Mobile OS %}</a>
            <a class="dropdown-item" href={{"/operating-systems/#aaddons" | translate_page}}><span class="fas fa-th fa-fw"></span> {% t Android Privacy Add-ons %}</a>
            <a class="dropdown-item" href={{"/operating-systems/#firmware" | translate_page}}><span class="fas fa-signal fa-fw"></span> {% t Router Firmware %}</a>
            <a class="dropdown-item" href={{"/operating-systems/#win10" | translate_page}}><span class="far fa-thumbs-down fa-fw"></span> {% t Don't use Windows 10 %}</a>
          </span>
        </details>

        <a class="nav-anchor" href={{"/index.html#participate" | translate_page}}>{% t Participate %}</a>
      </div>

      <!-- Language -->
      <div id="nav-right">

        <a href={{"/services/" | translate_page}} class="nav-anchor">
          {% t Services %}
        </a>
        <a href="https://blog.privacytools.io/" class="nav-anchor">
          {% t Blog %}
        </a>
        <a href={{"/sponsors/" | translate_page}} class="nav-anchor">
          {% t Sponsors %}
        </a>
        <a href={{"/about/" | translate_page}} class="nav-anchor">
          {% t About Us %}
        </a>
        <span id="nav-switch-theme" class="nav-anchor">
          <span class="nav-theme-icon fas fa-fw" aria-hidden="true" title="{% t Theme %}"></span>
          <span class="sr-only">{% t Toggle Theme %}</span>
        </span>

        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              <span class="fas fa-language text-danger fa-fw" aria-hidden="true" title="{% t Language %}"></span>
              <span class="sr-only">{% t Language Selection %}</span>
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a href="https://www.privacytools.io/" class="dropdown-item">English</a>
            <a href="https://privacytools.twngo.xyz/" rel="nofollow noopener" class="dropdown-item">繁體中文</a>
            <a href="https://victorhck.gitlab.io/privacytools-es/" rel="nofollow noopener" class="dropdown-item">Español</a>
            <a href="https://pl.privacytools.io/" rel="nofollow noopener" class="dropdown-item">Polski</a>
            <a href="https://www.privacidade.digital/" rel="nofollow noopener" class="dropdown-item">Português</a>
            <a href="https://privacytools.it-sec.rocks/" rel="nofollow noopener" class="dropdown-item">Deutsch</a>
            <a href="https://privacytools-it.github.io/" rel="nofollow noopener" class="dropdown-item">Italiano</a>
            <a href="https://privacytools.ru" rel="nofollow noopener" class="dropdown-item">Русский</a>
            <a href="https://privacytools.dreads-unlock.fr" rel="nofollow noopener" class="dropdown-item">Français</a>
          </span>
        </details>

      </div>
    </div>
  </div>
</nav>