css only menu

src/templates/base.html

@@ -7,6 +7,8 @@
 </head>
 
 <body>
+    {% include "partials/topbar.html" %}
+    {% include "partials/navbar.html" %}
     <header>
         {% include "partials/header.html" %}
     </header>

src/templates/documentation.html

@@ -3,25 +3,23 @@
 {% block content %}
 <div class="doc col--1-4">
     <div class="docnav">
-        <div class="sticky">
+        <ul class="sticky__57">
+            <li><a href="#infrastructure">Infrastructure</a></li>
             <ul>
-                <li><a href="#infrastructure">Infrastructure</a></li>
-                <ul>
-                    <li><a href="#serveurs">Serveurs</a></li>
-                    <li><a href="#reseau">Réseau</a></li>
-                    <li><a href="#sauvegardes">Sauvegardes</a></li>
-                </ul>
-                <li><a href="#services">Services</a></li>
-                <ul>
-                    <li><a href="#mail">Mail</a></li>
-                </ul>
-                <li><a href="#maintenance">Maintenance</a></li>
-                <ul>
-                    <li><a href="#apk">APK</a></li>
-                    <li><a href="#nerdctl">Nerdctl</a></li>
-                </ul>
+                <li><a href="#serveurs">Serveurs</a></li>
+                <li><a href="#reseau">Réseau</a></li>
+                <li><a href="#sauvegardes">Sauvegardes</a></li>
             </ul>
-        </div>
+            <li><a href="#services">Services</a></li>
+            <ul>
+                <li><a href="#mail">Mail</a></li>
+            </ul>
+            <li><a href="#maintenance">Maintenance</a></li>
+            <ul>
+                <li><a href="#apk">APK</a></li>
+                <li><a href="#nerdctl">Nerdctl</a></li>
+            </ul>
+        </ul>
     </div>
     <div class="content">
         <div class="anchor" id="{{ page.slug }}"></div>

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 %}