New design.

tpl/nav.html

@@ -1,28 +1,25 @@
-{{if get .Content "full"}}
-    <nav class="header bg-beige-to-black">
-        <div class="container" data-aos="fade-in" data-aos-delay="50">
-            <div id="homeLink" class="wordmark black-to-beige">Schnittfest</div>
-            <ul class="links hide-sm black-to-beige">
-                <li class="scrollToService">Gewerke</li>
-                <li class="scrollToWork">Referenzen</li>
-                <li class="scrollToFooter">Kontakt</li>
-            </ul>
-            <ul class="show-sm black-to-beige">
-                <li id="mobileMenuOpen">Menü</li>
-            </ul>
-        </div>
-    </nav>
-    <nav id="mobileMenu" class="mobile-menu show-sm" style="display:none">
-        <ul>
-            <li class="scrollToService">Gewerke</li>
-            <li class="scrollToWork">Referenzen</li>
-            <li class="scrollToFooter">Kontakt</li>
-        </ul>
-    </nav>
-{{else}}
-    <nav class="header bg-beige">
-        <div class="container">
-            <div id="homeLink" class="wordmark">Schnittfest</div>
-        </div>
-    </nav>
-{{end}}
+{{- $full := get .Content "full" -}}
+{{- $service := default (copy .Page .Content "service_label") "Gewerke" -}}
+{{- $work := default (copy .Page .Content "work_label") "Referenzen" -}}
+{{- $contact := default (copy .Page .Content "contact_label") "Kontakt" -}}
+
+<header class="nav{{ if $full }} nav--full{{ end }}" data-component="nav" data-shifu-element="{{ .Content.Position }}">
+    <div class="nav__inner">
+        <a class="nav__brand" href="/" aria-label="Schnittfest – Startseite">
+            <span class="nav__rec" aria-hidden="true"></span>
+            <span class="nav__word">Schnitt<span class="nav__cut" aria-hidden="true">✂</span>fest</span>
+        </a>
+        {{ if $full }}
+        <button class="nav__toggle" type="button" aria-expanded="false" aria-controls="nav-links">
+            <span class="nav__toggle-bar"></span>
+            <span class="nav__toggle-bar"></span>
+            <span class="visually-hidden">Menü</span>
+        </button>
+        <nav class="nav__links" id="nav-links">
+            <a class="nav__link" href="/#service" data-nr="01">{{ $service }}</a>
+            <a class="nav__link" href="/#work" data-nr="02">{{ $work }}</a>
+            <a class="nav__link nav__link--cta" href="/#footer" data-nr="03">{{ $contact }}</a>
+        </nav>
+        {{ end }}
+    </div>
+</header>