css only menu

src/templates/partials/footer.html

@@ -14,5 +14,4 @@
     <p>
         Made with ❤️ with <a href="https://www.getzola.org/" target="_blank">Zola</a> !
     </p>
-</div>
-<script src="{{ get_url(path="js/sidenav.js") }}"></script>
+</div>

src/templates/partials/header.html

@@ -1,5 +1,3 @@
-{% include "partials/topbar.html" %}
-{% include "partials/sidenav.html" %}
 {% if not page %}
 <div class="content col--1-2">
     <div>

src/templates/partials/navbar.html

@@ -0,0 +1,39 @@
+<nav>
+    <div class="menuToggle">
+        <input type="checkbox" class="menuCheckbox" />
+        <span></span>
+        <span></span>
+        <span></span>
+        <ul class="menu">
+            <li>
+                <a href="/#">
+                    <label for="menuCheckbox" onclick="this.parentNode.click();">Accueil</label>
+                </a>
+            </li>
+            <li>
+                <a href="/#services">
+                    <label for="menuCheckbox" onclick="this.parentNode.click();">Services</label>
+                </a>
+            </li>
+            <li>
+                <a href="/#about">
+                    <label for="menuCheckbox" onclick="this.parentNode.click();">À propos</label>
+                </a>
+            </li>
+            <li>
+                <a href="/#hosting">
+                    <label for="menuCheckbox" onclick="this.parentNode.click();">Hébergement</label>
+                </a>
+            </li>
+            <li>
+                <a href="/maintenance">Maintenance et incidents</a>
+            </li>
+            <li>
+                <a href="/documentation">Documentation</a>
+            </li>
+            <li>
+                <a href="/contact">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>

src/templates/partials/sidenav.html

@@ -1,18 +0,0 @@
-<div class="menu_icon_sidenav">
-    <div class="line1"></div>
-    <div class="line2"></div>
-    <div class="line3"></div>
-</div>
-<div class="sidenav">
-    <nav>
-        <ul>
-            <li><a href="/#">Accueil</a></li>
-            <li><a href="/#services">Services</a></li>
-            <li><a href="/#about">À propos</a></li>
-            <li><a href="/#hosting">Hébergement</a></li>
-            <li><a href="/maintenance">Maintenance et incidents</a></li>
-            <li><a href="/documentation">Documentation</a></li>
-            <li><a href="/contact">Contact</a></li>
-        </ul>
-    </nav>
-</div>

src/templates/partials/topbar.html

@@ -1,4 +1,4 @@
-<div class="topbar">
+<div class="topbar sticky">
     {% if page %}
     <a class="logo--min" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}" alt="Logo"></a>
     {% endif %}