navbar.html

<nav>
  <!-- The rose home pag -->
  <li><a id="RoseContainer" href="/"><img id="Rose" src="/Images/Rose.svg" alt="Home"></a></li>

  <!-- Coding dropdown -->
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">
      <i class="fa-solid fa-code"></i>
      <span class="en">Coding</span>
      <span class="da">Kodning</span>
      <i class="fa-solid fa-caret-down"></i>
    </a>
    <div class="dropdown-content">
      <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>
    </div>
  </li>

  <li class="dropdown">
    <a href="" class="dropbtn">
      <i class="fa-solid fa-box"></i>
      <span class="en">Projects</span>
      <span class="da">Projekter</span>
      <i class="fa-solid fa-caret-down"></i>
    </a>
    <div class="dropdown-content">
      <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>
    </div>
  </li>

  <!-- Art page -->
  <li><a class="en" href="/art"><i class="fa-solid fa-image"></i> Art</a></li>
  <li><a class="da" href="/art"><i class="fa-solid fa-image"></i> Kunst</a></li>

  <!-- About me dropdown -->
  <li id="About" class="dropdown" style="float: right;">
    <a href="/about" class="dropbtn">
      <i class="fa-solid fa-address-card"></i>
      <span class="en">About Me</span>
      <span class="da">Om mig</span>
      <i class="fa-solid fa-caret-down"></i>
    </a>
    <div class="dropdown-content" id="About-Content">
      <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>
    </div>
  </li>

  <li style="float: right; border-right: none;"><button class="nav-btn" onclick="Langswitch()">
      <i class="fa-solid fa-globe"></i>
    </button></li>

</nav>

<script>
  // 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>