From 2c74d0770192b3cc39e19e120e10a2188d3048f4 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 16 Aug 2025 04:11:30 +0000
Subject: [PATCH] Update web/templates/base.html

---
 web/templates/base.html | 192 ++++++++++++++++++++++++++++++----------
 1 file changed, 143 insertions(+), 49 deletions(-)
diff --git a/web/templates/base.html b/web/templates/base.html
index 99d3117..316bc94 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -1,59 +1,19 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>{% block title %}Illustrations{% endblock %}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="{% static 'app.css' %}">
-  {% block extra_head %}{% endblock %}
-  <style>
-    :root{
-      --nav-bg:#f8fafc; --nav-border:#e5e7eb; --nav-ink:#1f2937; --nav-ink-muted:#6b7280;
-      --nav-brand:#2f6cab; --nav-brand-hover:#1f4c7a; --btn-bg:#fff; --btn-border:#d1d5db; --btn-hover:#eef2f7;
-    }
-    .topbar-wrap{border-bottom:1px solid var(--nav-border); background:var(--nav-bg);}
-    .topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
-    .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
-    .brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
-    .nav-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
-    .nav-btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink); text-decoration:none; cursor:pointer; line-height:1; transition:background .12s, border-color .12s, box-shadow .12s;}
-    .nav-btn:hover{background:var(--btn-hover)}
-    .nav-btn.primary{background:var(--nav-brand); border-color:var(--nav-brand); color:#fff}
-    .nav-btn.primary:hover{background:var(--nav-brand-hover); border-color:var(--nav-brand-hover)}
-    .nav-btn.danger{background:#b91c1c; border-color:#b91c1c; color:#fff}
-    .nav-btn.danger:hover{filter:brightness(.95)}
-    .user-chip{padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff; color:var(--nav-ink-muted); font-size:14px}
-    .page{max-width:1100px; margin:18px auto; padding:0 16px}
-    .messages{margin:12px 0; display:grid; gap:8px}
-    .msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff}
-    .msg.info{border-color:#dbeafe; background:#eff6ff}
-    .msg.success{border-color:#bbf7d0; background:#ecfdf5}
-    .msg.warning{border-color:#fde68a; background:#fffbeb}
-    .msg.error{border-color:#fecaca; background:#fef2f2}
-    @media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }
-  </style>
-</head>
-
-<!-- ✅ single body tag with block for page-specific classes -->
 <body class="{% block body_class %}{% endblock %}">
   <div class="topbar-wrap">
     <div class="topbar">
-<div class="brand">
-  <a class="brand-title" href="{% url 'search' %}">Illustrations Database</a>
-  <a class="version-link" href="https://git.lan/joshlaymon/Illustrations/wiki" title="Release notes">{{APP_VERSION}}</a>
-</div>
+      <div class="brand">
+        <a class="brand-title" href="{% url 'search' %}">Illustrations Database</a>
+        <a class="version-link" href="https://git.lan/joshlaymon/Illustrations/wiki" title="Release notes">{{ APP_VERSION }}</a>
+      </div>
 
-      <div class="nav-right">
+      <!-- Desktop nav (hidden on small screens) -->
+      <div class="nav-right desktop-nav">
         <a class="nav-btn" href="{% url 'search' %}">Search</a>
         <a class="btn btn-success" href="{% url 'entry_add' %}">+ New Entry</a>
         <a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
-        
 
         {% if user.is_authenticated and user.is_staff %}
-        <a class="nav-btn" href="{% url 'export_csv' %}">Backup</a>
-         <!--  <a class="nav-btn" href="{% url 'import_wizard' %}">Import</a> -->
-          
+          <a class="nav-btn" href="{% url 'export_csv' %}">Backup</a>
         {% endif %}
 
         {% if user.is_authenticated %}
@@ -65,6 +25,39 @@
           <a class="nav-btn primary" href="{% url 'login' %}">Login</a>
         {% endif %}
       </div>
+
+      <!-- Mobile hamburger (hidden on desktop) -->
+      <button
+        id="hamburger"
+        class="hamburger"
+        aria-label="Open menu"
+        aria-controls="mobileMenu"
+        aria-expanded="false">
+        <!-- iOS-style share-ish three-bar icon -->
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+
+    <!-- Mobile dropdown menu -->
+    <div id="mobileMenu" class="mobile-menu" hidden>
+      <nav class="mobile-menu-inner" role="menu">
+        <a class="mobile-link" href="{% url 'search' %}" role="menuitem">Search</a>
+        <a class="mobile-link" href="{% url 'entry_add' %}" role="menuitem">+ New Entry</a>
+        <a class="mobile-link" href="{% url 'stats' %}" role="menuitem">Statistics</a>
+
+        {% if user.is_authenticated and user.is_staff %}
+          <a class="mobile-link" href="{% url 'export_csv' %}" role="menuitem">Backup</a>
+        {% endif %}
+
+        {% if user.is_authenticated %}
+          <div class="mobile-user">Signed in: {{ user.username }}</div>
+          <form method="post" action="{% url 'logout' %}" role="menuitem">{% csrf_token %}
+            <button class="mobile-link danger" style="width:100%; text-align:left;">Logout</button>
+          </form>
+        {% else %}
+          <a class="mobile-link primary" href="{% url 'login' %}" role="menuitem">Login</a>
+        {% endif %}
+      </nav>
     </div>
   </div>
 
@@ -83,5 +76,106 @@
   </main>
 
   {% block extra_body %}{% endblock %}
-</body>
-</html>
\ No newline at end of file
+
+  <!-- Minimal CSS to enable the mobile menu without shrinking text -->
+  <style>
+    /* Show hamburger only on small screens */
+    .hamburger { display: none; }
+
+    @media (max-width: 700px) {
+      .desktop-nav { display: none; }
+      .hamburger {
+        display: inline-flex;
+        width: 38px; height: 34px;
+        align-items: center; justify-content: center;
+        border: 1px solid var(--nav-border);
+        border-radius: 10px;
+        background: var(--btn-bg);
+        cursor: pointer;
+      }
+      .hamburger span {
+        display: block;
+        width: 20px; height: 2px; margin: 2px 0;
+        background: var(--nav-ink);
+        border-radius: 2px;
+      }
+
+      /* Mobile dropdown panel */
+      .mobile-menu {
+        position: absolute;
+        top: 56px;             /* sits under the topbar */
+        right: 16px;
+        left: 16px;
+        z-index: 50;
+      }
+      .mobile-menu[hidden] { display: none; }
+
+      .mobile-menu-inner {
+        background: #fff;
+        border: 1px solid var(--nav-border);
+        border-radius: 12px;
+        box-shadow: 0 8px 30px rgba(0,0,0,.08);
+        padding: 8px;
+        display: grid;
+        gap: 2px;
+      }
+      .mobile-link {
+        display: block;
+        padding: 12px 14px;
+        border-radius: 10px;
+        text-decoration: none;
+        color: var(--nav-ink);
+      }
+      .mobile-link:hover { background: var(--btn-hover); }
+      .mobile-link.primary {
+        color: #fff;
+        background: var(--nav-brand);
+      }
+      .mobile-link.danger { color: #b91c1c; }
+      .mobile-user {
+        padding: 10px 14px;
+        color: var(--nav-ink-muted);
+        font-size: 14px;
+      }
+    }
+  </style>
+
+  <!-- Tiny JS to toggle the dropdown, close on outside click / Esc, and reset on resize -->
+  <script>
+    (function () {
+      const btn = document.getElementById('hamburger');
+      const menu = document.getElementById('mobileMenu');
+
+      if (!btn || !menu) return;
+
+      const open = () => {
+        menu.hidden = false;
+        btn.setAttribute('aria-expanded', 'true');
+      };
+      const close = () => {
+        menu.hidden = true;
+        btn.setAttribute('aria-expanded', 'false');
+      };
+
+      btn.addEventListener('click', () => {
+        if (menu.hidden) open(); else close();
+      });
+
+      // Click outside closes
+      document.addEventListener('click', (e) => {
+        if (menu.hidden) return;
+        const within = menu.contains(e.target) || btn.contains(e.target);
+        if (!within) close();
+      });
+
+      // Esc closes
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') close();
+      });
+
+      // On resize to desktop, ensure the menu is closed
+      const mq = window.matchMedia('(min-width: 701px)');
+      mq.addEventListener('change', () => close());
+    })();
+  </script>
+</body>
\ No newline at end of file
