mobile-navbar.html

<nav class="topnav">
  <a href="/" id="Home"><img id="Rose" src="/Images/Rose.svg"><br></a>
  <div id="myLinks">
    <details id="Coding">
      <summary>
        <i class="fa fa-code navIcon"></i>
        <b>
          <span class="en">Coding</span>
          <span class="da">Kodning</span>
        </b>
        <i class="fa fa-caret-down arrow"></i>
      </summary>
      <a class="en" href="https://github.com/coffandro/coffandro.github.io">This websites source <i
          class="fa-brands fa-github"></i></a>
      <a class="da" href="https://github.com/coffandro/coffandro.github.io">Denne hjemmeside's kode <i
          class="fa-brands fa-github"></i></a>
      <a href="https://github.com/coffandro">Github <i class="fa-brands fa-github"></i></a>
    </details>
    <details id="Projects">
      <summary>
        <i class="fa fa-box navIcon"></i>
        <b>
          <span class="en">Projects</span>
          <span class="da">Projekter</span>
        </b>
        <i class="fa fa-caret-down arrow"></i>
      </summary>
      <a class="en" href="/Gallery/gallery">Gallery <i class="fa-solid fa-image"></i></a>
      <a class="en" href="/games">Games <i class="fa-solid fa-gamepad"></i></a>
      <a class="da" href="/Gallery/gallery">Galleri <i class="fa-solid fa-image"></i></a>
      <a class="da" href="/games">Spil <i class="fa-solid fa-gamepad"></i></a>
      <a href="https://fallout4london.com/">Fallout: London <i class="fa-solid fa-gamepad"></i></a>
    </details>
    <a class="en" id="Art" href="/art"><i class="fa fa-image navIcon"></i><b>Art</b></a>
    <a class="da" id="Art" href="/art"><i class="fa fa-image navIcon"></i><b>Kunst</b></a>
    <details id="About">
      <summary>
        <i class="fa fa-address-card navIcon"></i>
        <b>
          <span class="en">About Me</span>
          <span class="da">Om mig</span>
        </b>
        <i class="fa fa-caret-down arrow"></i>
      </summary>
      <a class="en" href="/about">About Me <i class="fa-solid fa-address-card"></i></a>
      <a class="en" href="/wishList">Wish List <i class="fa-solid fa-list"></i></a>
      <a class="en" href="/about#Socials">Socials <i class="fa-solid fa-handshake"></i></a>
      <a class="en" href="CV">My CV <i class="fa-solid fa-file"></i></a>
      <a class="da" href="/about">Om mig <i class="fa-solid fa-address-card"></i></a>
      <a class="da" href="/wishList">Ønske liste <i class="fa-solid fa-list"></i></a>
      <a class="da" href="/about#Socials">Sociale <i class="fa-solid fa-handshake"></i></a>
      <a class="da" href="CV">Mit CV <i class="fa-solid fa-file"></i></a>
    </details>

  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" id="Hamburger" class="icon" onclick="Menu()">
    <i class="fa-solid fa-bars"></i>
  </a>

  <!-- Language switch button -->
  <a class="lang-modebtn icon" onclick="Langswitch()">
    <i class="fa-solid fa-globe"></i>
  </a>
</nav>

<script>
  /* Toggle between showing and hiding the navigation menu links when the user clicks on the 
  hamburger menu / bar icon */
  function Menu() {
    var x = document.getElementById("myLinks");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }

  // Select the theme preference from localStorage
  const currentLanguage = localStorage.getItem("Language");

  // If the current Language in localStorage is "Danish"...
  if (currentLanguage == "Danish") {
    document.body.classList.add("Lang-DA");
  }
  else {
    document.body.classList.add("Lang-EN");
  }

  // The Language switch function
  function Langswitch() {
    // Toggle the .Lang-XX classes on each click
    document.body.classList.toggle("Lang-DA");
    document.body.classList.toggle("Lang-EN");

    let Language = "English";
    if (document.body.classList.contains("Lang-DA")) {
      Language = "Danish";

    }
    else {
      Language = "English";
    }
    // Then save the choice in localStorage
    localStorage.setItem("Language", Language);
  };
</script>