Added mobile menu and made menu links work.

style/sass/main.scss

@@ -158,6 +158,28 @@ button {
     }
 }
 
+.mobile-menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+
+    li {
+        color: white;
+        font-size: 24px;
+        line-height: 64px;
+        font-weight: 600;
+        text-align: center;
+        cursor: pointer;
+    }
+}
+
 .section-start {
     .container {
         padding: 0;

template/landing_page.html

@@ -46,15 +46,27 @@
         </div>
     </section>
 
+    <nav id="mobileMenu" class="mobile-menu show-sm" style="display:none">
+        <ul>
+            <li class="scrollToService">Leistungen</li>
+            <li class="scrollToWork">Referenzen</li>
+            <li class="scrollToRental">Rental</li>
+            <li>Kontakt</li>
+        </ul>
+    </nav>
+    
     <nav class="header bg-black">
         <div class="container" data-aos="fade-in" data-aos-delay="50">
-            <img src="static/wordmark-white.svg" alt="Schnittfest">
+            <img id="homeLink" src="static/wordmark-white.svg" alt="Schnittfest">
             <ul class="hide-sm">
-                <li>Leistungen</li>
+                <li class="scrollToService">Leistungen</li>
-                <li>Referenzen</li>
+                <li class="scrollToWork">Referenzen</li>
-                <li>Rental</li>
+                <li class="scrollToRental">Rental</li>
                 <li>Kontakt</li>
             </ul>
+            <ul class="show-sm">
+                <li id="mobileMenuOpen">Menü</li>
+            </ul>
         </div>
     </nav>
 
@@ -198,6 +210,66 @@
             once: true,
             offset: 32
         });
+
+        // navbar mobile menu
+        let mobileMenu = document.getElementById("mobileMenu");
+        let mobileMenuOpen = document.getElementById("mobileMenuOpen");
+        let mobileMenuClose = document.getElementById("mobileMenuClose");
+
+        function toggleMobileMenu() {
+            let hidden = mobileMenu.style.display;
+
+            if(hidden) {
+                mobileMenu.style.display = "";
+            } else {
+                mobileMenu.style.display = "none"
+            }
+        }
+
+        mobileMenuOpen.addEventListener("click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+            toggleMobileMenu();
+        });
+
+        // scroll to from navigation
+        let scrollToService = document.getElementsByClassName("scrollToService");
+        let scrollToWork = document.getElementsByClassName("scrollToWork");
+        let scrollToRental = document.getElementsByClassName("scrollToRental");
+
+        function addScrollTo(nodes, anchor) {
+            for (let node of nodes) {
+                node.addEventListener("click", () => {
+                    toggleMobileMenu();
+                    let section = document.getElementById(anchor);
+
+                    if (window.location.pathname === "/") {
+                        window.scrollTo({top: section.offsetTop, behavior: "smooth"});
+                    } else {
+                        window.location = `/#${anchor}`;
+                    }
+                });
+            }
+        }
+
+        addScrollTo(scrollToService, "service");
+        addScrollTo(scrollToWork, "work");
+        addScrollTo(scrollToRental, "rental");
+
+        // click on logo navigation
+        let homeLink = document.getElementById("homeLink");
+
+        homeLink.addEventListener("click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if(window.location.pathname === "/") {
+                window.scrollTo({top: 0, behavior: "smooth"});
+            }
+            else {
+                window.location = "/";
+            }
+        });
     </script>
 </body>
 </html>