Totally original css and js, totally not "borrowed" from twip-network.org

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) {

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;