From e10032dbc748037f585f7781f1691f9b2baf6667 Mon Sep 17 00:00:00 2001
From: Aidan Cornelius-Bell <aidan@cornelius-bell.com>
Date: Mon, 16 Dec 2024 08:57:03 +1030
Subject: [PATCH] Added mobile navigation (collapsed nav)
---
app/assets/stylesheets/application.css | 55 ++++++++++++++++++-
.../layouts/_navigation_buttons.html.erb | 28 +++++++++-
2 files changed, 80 insertions(+), 3 deletions(-)
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>
--
2.39.5