privacyguides.org/_includes/nav.html

<div class="fixed-top bg-dark">
  <nav id="navbar">

    <input type="checkbox" id="nav-toggle" checked />
    <label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
    <a id="nav-home-mobile" class="nav-anchor" href="/index.html">
      <img src="/assets/img/layout/logo_smaller.png" width="148px" height="22px" />
    </a>

    <div class="menu">

      <div id="nav-left" class="position-relative flex-col">
        <a class="nav-anchor" href="/index.html">
          <span id="nav-home" class="fas fa-home fa-fw"></span>
        </a>

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

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

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

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

        <a class="nav-anchor" href="/index.html#participate">Participate</a>
      </div>

      <!-- Language -->
      <div id="nav-right">
        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              <span class="fas fa-language text-danger fa-fw"></span>
              Language
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a href="https://privacytools.io/" class="dropdown-item">English</a>
            <a href="https://privacytools.twngo.xyz/" class="dropdown-item">繁體中文</a>
            <a href="https://victorhck.gitlab.io/privacytools-es/" class="dropdown-item">Español</a>
            <a href="https://pl.privacytools.io/" class="dropdown-item">Polski</a>
            <a href="https://www.privacidade.digital/" class="dropdown-item">Português</a>
            <a href="https://privacytools.it-sec.rocks/" class="dropdown-item">Deutsch</a>
            <a href="https://privacytools-it.github.io/" class="dropdown-item">Italiano</a>
            <a href="https://privacytools.ru" class="dropdown-item">Русский</a>
          </span>
        </details>

        <!-- Services -->
        <details class="nav-details">
          <summary>
            <span class="nav-summary">
              Services
              <span class="dropdown-toggle"></span>
            </span>
          </summary>
          <span class="nav-dropdown">
            <a class="dropdown-item" href="https://forum.privacytools.io/"><span class="fab fa-discourse fa-fw"></span> Discourse - Forum</a>
            <a class="dropdown-item" href="https://git.privacytools.io/"><span class="fab fa-git fa-fw"></span> Gitea - Git-Repository Manager</a>
            <a class="dropdown-item" href="https://social.privacytools.io/"><span class="fas fa-retweet fa-fw"></span> Mastodon - Social Network</a>
            <a class="dropdown-item" href="https://chat.privacytools.io/"><span class="fas fa-comment fa-fw"></span> Matrix - Federated Chat</a>
            <a class="dropdown-item" href="https://bin.privacytools.io/"><span class="fas fa-clipboard fa-fw"></span> PrivateBin - Encrypted Pastebin</a>
            <a class="dropdown-item" href="https://search.privacytools.io/"><span class="fas fa-search fa-fw"></span> Searx - Privacy Friendly Search</a>
            <a class="dropdown-item" href="https://write.privacytools.io/"><span class="fas fa-pen-alt fa-fw"></span> Write Freely - Federated Blog</a>
          </span>
        </details>

        <a href="https://blog.privacytools.io/" class="nav-anchor">Blog </a>
        <a href="/donate/" class="nav-anchor">
          Donate <span class="fas fa-heart text-danger fa-fw"></span>
        </a>
        <a id="nav-switch-theme" class="nav-anchor" href="javascript:void(0)" onClick="changeColorScheme()">
          Theme <span class="nav-theme-icon fas fa-fw"></span>
        </a>
      </div>
    </div>
  </nav>
</div>