From: Aidan Cornelius-Bell <aidan@cornelius-bell.com>
Date: Sun, 15 Dec 2024 22:27:03 +0000 (+1030)
Subject: Added mobile navigation (collapsed nav)
X-Git-Url: https://gitweb.mndrdr.org/?a=commitdiff_plain;h=e10032dbc748037f585f7781f1691f9b2baf6667;p=arelpe.git

Added mobile navigation (collapsed nav)
---

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 8ff7dfb..ef1ed66 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -254,6 +254,10 @@ footer {
     max-width: 945px;
 }
 
+footer {
+    padding-bottom: +50px; /* hacky overflow fix */
+}
+
 .callout {
     color: var(--accent-b);
 }
@@ -463,8 +467,9 @@ ul .pinned::before {
 }
 
 .filter-buttons {
-    margin: 20px 0;
+    margin: 20px auto auto;
     text-align: center;
+    max-width: 945px;
 }
 
 .filter-buttons .button {
@@ -611,7 +616,11 @@ ul .post-item a:visited {
     }
 }
 
-@media (max-width: 506px) {
+.nav-toggle {
+    display: none;
+}
+
+@media (max-width: 515px) {
     .container,
     footer {
         margin: 5px 10px -10px 5px;
@@ -632,4 +641,46 @@ ul .post-item a:visited {
     .postmeta {
         max-width: 100%;
     }
+
+    .button-bottomless:first-of-type {
+        margin-bottom: -4px;
+    }
+
+    .nav-toggle {
+        display: flex;
+        width: 98%;
+        margin: auto;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 1rem;
+        margin-bottom: 0.5rem;
+        background-color: var(--filter-button);
+        color: var(--filter-button-text);
+        border: none;
+        border-radius: 0.25rem;
+    }
+
+    .nav-toggle:hover {
+        background-color: var(--filter-button-hover);
+    }
+
+    .filter-buttons {
+        display: none;
+    }
+
+    .filter-buttons.expanded {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+
+    .filter-buttons .button {
+        width: 80%;
+        max-width: 75%;
+        text-align: center;
+    }
+
+    .toggle-icon {
+        transition: transform 0.2s ease;
+    }
 }
diff --git a/app/views/layouts/_navigation_buttons.html.erb b/app/views/layouts/_navigation_buttons.html.erb
index 61956dc..caa8ddc 100644
--- a/app/views/layouts/_navigation_buttons.html.erb
+++ b/app/views/layouts/_navigation_buttons.html.erb
@@ -13,10 +13,36 @@
   <% end %>
 
   <% if current_user&.admin? %>
-  <br>
   <%= link_to "Manage posts", posts_path, class: "button" %>
   <%= link_to "Manage pages", pages_path, class: "button" %>
   <%= link_to "Manage API keys", api_keys_path, class: "button" %>
   <%= link_to "Manage users", user_manager_index_path, class: "button" %>
   <% end %>
 </div>
+
+<script type="text/javascript">
+document.addEventListener('DOMContentLoaded', function() {
+  // Create and insert the toggle button
+  const filterButtons = document.querySelector('.filter-buttons');
+  if (!filterButtons) return;
+
+  const toggleButton = document.createElement('button');
+  toggleButton.innerHTML = `
+    <span>Menu</span>
+    <svg class="toggle-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  `;
+  toggleButton.classList.add('nav-toggle');
+  filterButtons.parentNode.insertBefore(toggleButton, filterButtons);
+
+  // Add the click handler
+  toggleButton.addEventListener('click', function() {
+    const isExpanded = filterButtons.classList.contains('expanded');
+    filterButtons.classList.toggle('expanded');
+    toggleButton.setAttribute('aria-expanded', !isExpanded);
+    toggleButton.querySelector('.toggle-icon').style.transform =
+      isExpanded ? 'rotate(0deg)' : 'rotate(180deg)';
+  });
+});
+</script>