implement navigation for mobile + desktop

layouts/_default/baseof.html

@@ -1,7 +1,11 @@
 {{ partial "header.html" . }}
 
+{{ partial "navbar.html" . }}
+
+<div class="content inner-width">
     {{ block "main" . }}
     {{ end }}
+</div>
 
 {{ partial "scrollTop.html" . }}
 {{ partial "footer.html" . }}

layouts/partials/navbar.html

@@ -0,0 +1,15 @@
+<nav class=""> <!-- Class "small", "open" is possible -->
+    <div class="inner-width">
+        <a href="#" alt="Home"><img src='{{ "/assets/logo/logo_white.svg" | relURL }}' alt="Logo" title="Logo"></a>
+        <div class="nav-links">
+            <a href="#" alt="Home">Home</a>
+            <a href="#about" alt="About">Über mich</a>
+            <a href="#projects" alt="Projekte">Projekte</a>
+            <a href="https://blog.michivonah.ch" alt="Blog">Blog</a>
+            <a href="#contact" alt="Kontakt">Kontakt</a>
+        </div>
+        <div class="nav-toggle">
+            <i class="ai-text-align-right"></i>
+        </div>
+    </div>
+</nav>

static/main.js

@@ -1 +1,38 @@
-// main.js
+// Add event listeners
+document.addEventListener('DOMContentLoaded', function(){
+    console.log("Hello World!");
+});
+
+document.querySelector(".nav-toggle").addEventListener('click', function(){
+    toggleNav();
+});
+
+document.querySelectorAll(".nav-links a").forEach(element => {
+    element.addEventListener('click', function(){
+        toggleNav();
+    });
+});
+
+// Generic functions
+function toggleDisplayByClass(className){
+    let items = document.getElementsByClassName(className);
+    for (const item of items){
+        item.style.display = ((item.style.display == "none") ? 'block' : 'none');
+    }
+}
+
+function toggleClass(obj, className){
+    document.querySelector(obj).classList.toggle(className);
+}
+
+function switchClasses(selector, class1, class2){
+    obj = document.querySelector(selector);
+    obj.classList.toggle(class1);
+    obj.classList.toggle(class2, !obj.classList.contains(class1));
+}
+
+// Nav functions
+function toggleNav(){
+    toggleClass("nav", "open");
+    switchClasses(".nav-toggle i", "ai-text-align-right", "ai-cross");
+}

static/style.css

@@ -1 +1,171 @@
-html{scroll-behavior: smooth;}
+/* FONTS */
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+
+/* GENERAL */
+html{scroll-behavior: smooth;}
+
+body{
+    /* STYLING */
+    margin: 0;
+    padding: 0;
+    background: var(--background);
+    color: var(--color);
+    font-family: var(--font);
+
+    /* VARIABLES */
+    --primary: #3498db;
+    --secondary: #2980b9;
+    --background: #181818;
+    --color: #f8f8f8;
+    --font: "Source Sans 3", sans-serif;
+    --baseRadius: 12px;
+    --baseTransition: all 250ms;
+}
+
+/* CONTENT */
+.content{
+    margin: auto;
+}
+
+.inner-width{
+    margin: auto;
+    width: 100%;
+    max-width: clamp(1100px, 90%, 1250px);
+}
+
+/* NAVIGATION */
+nav{
+    width: 100%;
+    height: 96px;
+    background: transparent;
+    position: fixed;
+    top: 0;
+    left: 0;
+    transition: var(--baseTransition);
+}
+
+nav.small{
+    height: 66px;
+}
+
+nav .inner-width{
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+}
+
+nav img{
+    width: auto;
+    height: 56px;
+}
+
+nav.small img{
+    height: 46px;
+}
+
+.nav-links a{
+    /* STYLE */
+    color: var(--color);
+    font-size: 1.2rem;
+    text-decoration: none;
+    margin: 5px 10px;
+
+    /* HOVER EFFECT */
+    position: relative;
+}
+
+.nav-links a:hover, nav a:focus{
+    text-decoration: none;
+}
+
+.nav-links a:not(:last-child)::after{
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: var(--color);
+    border-radius: 4px;
+    transition: var(--baseTransition);
+    transform: scaleX(0);
+}
+
+.nav-links a:not(:last-child):hover::after{
+    transform: scaleX(0.5);
+}
+
+.nav-links a:last-child{
+    padding: 5px 16px;
+    background: var(--primary);
+    color: var(--color);
+    border: none;
+    border-radius: var(--baseRadius);
+    transition: var(--baseTransition);
+}
+
+.nav-links a:last-child:hover{
+    background: var(--secondary);
+}
+
+.nav-toggle{
+    display: none;
+}
+
+@media screen and (max-width:640px){
+    .nav-toggle{
+        display: block;
+    }
+
+    .nav-links{
+        display: none;
+    }
+
+    nav .inner-width{
+        justify-content: space-between;
+        padding: 0 20px;
+        box-sizing: border-box;
+    }
+
+    nav.open{        
+        height: 100dvh;
+        background: var(--background);
+    }
+
+    nav.open .inner-width{        
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-content: center;
+        align-items: center;
+    }
+
+    nav.open .nav-links{
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+    }
+
+    nav.open .nav-links a, nav i{
+        font-size: 2rem;
+    }
+
+    nav i{
+        font-size: 3rem;
+    }
+
+    .nav-links a:hover::after{
+        display: none;
+    }
+
+    .nav-links a:last-child{
+        background: inherit;
+        padding: inherit;
+    }
+}