From 5ad3c77fa3eb212c02c384f95ccdf67078013f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Ryb=C3=A1rsky?= <bruno@brn.systems>
Date: Tue, 6 Feb 2024 19:49:50 +0100
Subject: [PATCH] Totally original css and js, totally not "borrowed" from
 twip-network.org

---
 assets/script.js   |  8 +++++++
 assets/style.css   | 58 ++++++++++++++++++++++++++++------------------
 templates/nav.html |  3 ++-
 3 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/assets/script.js b/assets/script.js
index 680dd91..7089679 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -1,3 +1,11 @@
+const toggleButton = document.getElementById("toggle_button")
+const navLinks = document.getElementById("navsite_list")
+
+toggleButton.addEventListener('click', () => {
+    navLinks.classList.toggle("active")
+})
+
+
 let UserInfo;
 
 function handleResponse(data, successMessage, failureMessage) {
diff --git a/assets/style.css b/assets/style.css
index 7f29dcf..4d45801 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -131,6 +131,16 @@ ul
 ul.navpage_list
 {
     gap:10px;
+    background-color:var(--third-bg);
+    border:0 solid transparent;
+    display:none;
+    flex-direction:column;
+    margin-top:10px;
+    max-height:0;
+    overflow:hidden;
+    position:relative;
+    transition:max-height .3s ease, border .325s ease;
+    z-index:2;
 }
 
 .back
@@ -158,27 +168,7 @@ ul.navpage_list
 
 .feature-list-ul ul
 {
-    margin-left:20px;
-    margin-top:5px;
-}
-
-.feature-list-ul
-{
-    margin:auto;
-}
-
-.navpage_list
-{
-    background-color:var(--third-bg);
-    border:0 solid transparent;
-    display:none;
-    flex-direction:column;
-    margin-top:10px;
-    max-height:0;
-    overflow:hidden;
-    position:relative;
-    transition:max-height .3s ease, border .325s ease;
-    z-index:2;
+    margin: 5px auto auto 20px;
 }
 
 .navsite_item
@@ -202,14 +192,36 @@ ul.navpage_list
     max-height:0;
     transition-delay:.1s;
 }
-
-.navsite_list
+#navsite_list
 {
     display:flex;
     flex-direction:row;
     gap:3.25rem;
 }
 
+@media (max-width: 500px) {
+    .toggle-button {
+        display: flex;
+    }
+    #navsite_list {
+        display: none;
+        flex-direction: column;
+    }
+
+    .nav-links li {
+        text-align: center;
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
+
+    nav {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
 .status-message
 {
     background-color:#dff0d8;
diff --git a/templates/nav.html b/templates/nav.html
index 1f7b86d..9b91fe3 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -1,6 +1,7 @@
 <nav>
     <div class="logo"><img alt="Adlerka logo" class="standard-logo" width="213" height="50" src="https://www.adlerka.sk/wp-content/uploads/2021/09/Logo_text_Adlerka_modro_cerveno_biele-e1652431356820.png" title="Adlerka"></div>
-    <ul class="navsite_list">
+    <i class="ri-menu-line" id="toggle_button"></i>
+    <ul id="navsite_list">
         __NAV_PAGES__
     </ul>
 </nav>
\ No newline at end of file