From 8ab86bb6c8264ed273f3f1f136555f2936063833 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Thu, 6 Feb 2025 02:17:57 -0800
Subject: [PATCH] Make it look decent on mobile

---
 static/css/components/sidebar.css | 63 ++++++++++++++++++++++++++++++-
 static/js/app.js                  | 26 +++++++++++++
 templates/index.html.tera         | 14 +++++--
 3 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/static/css/components/sidebar.css b/static/css/components/sidebar.css
index 6a20067..ded7a8b 100644
--- a/static/css/components/sidebar.css
+++ b/static/css/components/sidebar.css
@@ -6,11 +6,72 @@
     padding: 20px;
     box-shadow: 2px 0 5px rgba(0,0,0,0.3);
     overflow-y: auto;
+    transition: transform 0.3s ease;
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.sidebar-close {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    padding: 0.5rem;
+    font-size: 1.2rem;
+}
+
+.hamburger-menu {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    padding: 0.5rem;
+    font-size: 1.2rem;
+    margin-right: 0.5rem;
+}
+
+/* Hover effect for both hamburger and close buttons */
+.hamburger-menu:hover,
+.sidebar-close:hover {
+    color: var(--primary-red);
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        transform: translateX(-100%);
+    }
+
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .sidebar-close {
+        display: block;
+    }
+
+    .hamburger-menu {
+        display: block;
+    }
+
+    body.with-sidebar {
+        display: block;
+    }
 }
 
 .sidebar h2 {
     color: var(--primary-red);
-    margin-top: 0;
+    margin: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/static/js/app.js b/static/js/app.js
index 786de5c..1303ea9 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,3 +1,29 @@
+// Add at the beginning of the file
+document.addEventListener('DOMContentLoaded', function() {
+    // Mobile menu functionality
+    const hamburgerMenu = document.getElementById('hamburgerMenu');
+    const sidebarClose = document.getElementById('sidebarClose');
+    const sidebar = document.getElementById('sidebar');
+
+    function toggleSidebar() {
+        sidebar.classList.toggle('active');
+    }
+
+    hamburgerMenu.addEventListener('click', toggleSidebar);
+    sidebarClose.addEventListener('click', toggleSidebar);
+
+    // Close sidebar when clicking outside on mobile
+    document.addEventListener('click', function(event) {
+        const isMobile = window.innerWidth <= 768;
+        if (isMobile && 
+            !sidebar.contains(event.target) && 
+            !hamburgerMenu.contains(event.target) &&
+            sidebar.classList.contains('active')) {
+            sidebar.classList.remove('active');
+        }
+    });
+});
+
 // Fetch and display feeds
 async function fetchFeeds() {
     try {
diff --git a/templates/index.html.tera b/templates/index.html.tera
index fb9883c..42cf70c 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -35,16 +35,22 @@
         </article>
     </dialog>
 
-    <aside class="sidebar">
-        <h2>
-            Feeds
-        </h2>
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <h2>Feeds</h2>
+            <button class="sidebar-close" id="sidebarClose">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
         <nav id="feedList">
         </nav>
     </aside>
     
     <div class="main-content-area">
         <header class="top-bar">
+            <button class="hamburger-menu" id="hamburgerMenu">
+                <i class="fas fa-bars"></i>
+            </button>
             <button class="add-feed-button" id="addFeedButton" title="Add Feed">
                 <i class="fas fa-plus"></i>
             </button>