var sidebar = document.getElementById("sidebar");
var content = document.getElementById("content");
var icon = document.getElementById("navbar-icon");
var navbar = document.getElementById("navbar");



function switchNav() {
  if(sidebar.className == "sidebar uncolapsed") {
    sidebar.className = "sidebar";
    icon.className = "fa fa-bars";
    content.className = "content";

    updateNavbar();
  } else if(sidebar.className == "sidebar") {
    sidebar.className = "sidebar uncolapsed";
    icon.className = "fa fa-bars";
    content.className = "content visible";
    navbar.className = "navbar colored";
  }
}

function closeNav() {
  sidebar.className = "sidebar";
  icon.className = "fa fa-bars";
  content.className = "content";
}

let home = document.getElementById("nav-home");
let portfolio = document.getElementById("nav-portfolio");
let server = document.getElementById("nav-server");
let projekte = document.getElementById("nav-projekte");
let blog = document.getElementById("nav-blog");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  updateNavbar();
}

function updateNavbar() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    navbar.className = "navbar colored";
  } else {
    if(sidebar.className == "sidebar uncolapsed") {
      navbar.className = "navbar colored";
    } else {
      navbar.className = "navbar";
    }
  }
}