From eaccfada73df73f72e08d6a386a50326da5580a2 Mon Sep 17 00:00:00 2001
From: Priec <filippriec@gmail.com>
Date: Sun, 17 May 2026 15:25:57 +0200
Subject: [PATCH] cog hamburger overlay that blocks other and so on:

---
 assets/views/admin/base.html | 86 +++++++++++++++++++++++++++++++++++-
 assets/views/base.html       | 83 +++++++++++++++++++++++++++++++++-
 2 files changed, 165 insertions(+), 4 deletions(-)
diff --git a/assets/views/admin/base.html b/assets/views/admin/base.html
index ffd8575..24cb34a 100644
--- a/assets/views/admin/base.html
+++ b/assets/views/admin/base.html
@@ -1,20 +1,65 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Admin{% endblock title %}</title>
+    <script>
+      function applyTheme(t) {
+        var dark = t === 'dark'
+          || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+      }
+      function highlightTheme(t) {
+        document.querySelectorAll('[data-theme-opt]').forEach(function (b) {
+          var on = b.getAttribute('data-theme-opt') === t;
+          b.classList.toggle('active', on);
+          var chk = b.querySelector('.opt-check');
+          if (chk) chk.classList.toggle('hidden', !on);
+        });
+      }
+      function setTheme(t) {
+        localStorage.setItem('theme', t);
+        applyTheme(t);
+        highlightTheme(t);
+      }
+      applyTheme(localStorage.getItem('theme') || 'system');
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+        if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
+      });
+      document.addEventListener('DOMContentLoaded', function () {
+        highlightTheme(localStorage.getItem('theme') || 'system');
+      });
+    </script>
     <link href="/static/css/app.css" rel="stylesheet" type="text/css">
     <script src="https://unpkg.com/htmx.org@1.9.12"></script>
     <style>
       .btn { --animation-btn: 0; --btn-focus-scale: 1; }
+      #nav-backdrop { display: none; }
+      @media (max-width: 767px) {
+        #nav-backdrop {
+          display: block;
+          position: fixed;
+          inset: 0;
+          z-index: 40;
+          background-color: rgba(0, 0, 0, 0.25);
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity 0.15s ease, visibility 0s linear 0.2s;
+        }
+        .navbar:has(.dropdown:focus-within) ~ #nav-backdrop {
+          opacity: 1;
+          visibility: visible;
+          transition: opacity 0.15s ease, visibility 0s;
+        }
+      }
     </style>
   </head>
   <body class="min-h-screen bg-base-200 font-sans text-base-content antialiased">
     <header class="navbar bg-base-100 shadow-sm">
       <nav class="mx-auto flex w-full max-w-6xl items-center justify-between gap-2 px-4">
         <a href="/admin/dashboard" class="min-w-0 truncate text-lg font-bold">Admin</a>
-        <div class="flex items-center gap-1">
+        <div class="hidden items-center gap-1 md:flex">
           <a href="/admin/dashboard" class="btn btn-ghost btn-sm">Dashboard</a>
           <a href="/admin/blog/articles" class="btn btn-ghost btn-sm">Blog</a>
           <a href="/admin/about" class="btn btn-ghost btn-sm">About</a>
@@ -23,8 +68,45 @@
             <button type="submit" class="btn btn-ghost btn-sm">Logout</button>
           </form>
         </div>
+        <div class="flex items-center gap-1">
+          <div class="dropdown dropdown-end md:hidden">
+            <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Menu">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="h-5 w-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            </div>
+            <div tabindex="0"
+              class="dropdown-content z-50 mt-3 flex w-52 flex-col gap-1 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
+              <a href="/admin/dashboard" class="btn btn-ghost btn-sm justify-start">Dashboard</a>
+              <a href="/admin/blog/articles" class="btn btn-ghost btn-sm justify-start">Blog</a>
+              <a href="/admin/about" class="btn btn-ghost btn-sm justify-start">About</a>
+              <a href="/" class="btn btn-ghost btn-sm justify-start">View site</a>
+              <form method="post" action="/admin/logout">
+                <button type="submit" class="btn btn-ghost btn-sm w-full justify-start">Logout</button>
+              </form>
+            </div>
+          </div>
+          <div class="dropdown dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Settings" title="Settings">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="h-5 w-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+              </svg>
+            </div>
+            <ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
+              <li class="menu-title">Theme</li>
+              <li><button type="button" data-theme-opt="system" onclick="setTheme('system')">System <span class="opt-check ml-auto hidden">✓</span></button></li>
+              <li><button type="button" data-theme-opt="light" onclick="setTheme('light')">Light <span class="opt-check ml-auto hidden">✓</span></button></li>
+              <li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">Dark <span class="opt-check ml-auto hidden">✓</span></button></li>
+            </ul>
+          </div>
+        </div>
       </nav>
     </header>
+    <div id="nav-backdrop" aria-hidden="true"></div>
     <main class="mx-auto max-w-6xl px-4 py-6">
       {% block content %}{% endblock content %}
     </main>
diff --git a/assets/views/base.html b/assets/views/base.html
index f0f7312..1167858 100644
--- a/assets/views/base.html
+++ b/assets/views/base.html
@@ -1,27 +1,106 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Universal Web{% endblock title %}</title>
+    <script>
+      function applyTheme(t) {
+        var dark = t === 'dark'
+          || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+      }
+      function highlightTheme(t) {
+        document.querySelectorAll('[data-theme-opt]').forEach(function (b) {
+          var on = b.getAttribute('data-theme-opt') === t;
+          b.classList.toggle('active', on);
+          var chk = b.querySelector('.opt-check');
+          if (chk) chk.classList.toggle('hidden', !on);
+        });
+      }
+      function setTheme(t) {
+        localStorage.setItem('theme', t);
+        applyTheme(t);
+        highlightTheme(t);
+      }
+      applyTheme(localStorage.getItem('theme') || 'system');
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+        if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
+      });
+      document.addEventListener('DOMContentLoaded', function () {
+        highlightTheme(localStorage.getItem('theme') || 'system');
+      });
+    </script>
     <link href="/static/css/app.css" rel="stylesheet" type="text/css">
     <script src="https://unpkg.com/htmx.org@1.9.12"></script>
     <style>
       .btn { --animation-btn: 0; --btn-focus-scale: 1; }
+      #nav-backdrop { display: none; }
+      @media (max-width: 767px) {
+        #nav-backdrop {
+          display: block;
+          position: fixed;
+          inset: 0;
+          z-index: 40;
+          background-color: rgba(0, 0, 0, 0.25);
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity 0.15s ease, visibility 0s linear 0.2s;
+        }
+        .navbar:has(.dropdown:focus-within) ~ #nav-backdrop {
+          opacity: 1;
+          visibility: visible;
+          transition: opacity 0.15s ease, visibility 0s;
+        }
+      }
     </style>
   </head>
   <body class="min-h-screen bg-base-200 font-sans text-base-content antialiased">
     <header class="navbar bg-base-100 shadow-sm">
       <nav class="mx-auto flex w-full max-w-6xl items-center justify-between gap-2 px-4">
         <a href="/" class="min-w-0 truncate text-lg font-bold">Universal Web</a>
-        <div class="flex items-center gap-1">
+        <div class="hidden items-center gap-1 md:flex">
           <a href="/" class="btn btn-ghost btn-sm">Home</a>
           <a href="/about" class="btn btn-ghost btn-sm">About</a>
           <a href="/blog" class="btn btn-ghost btn-sm">Blog</a>
           <a href="/admin/login" class="btn btn-ghost btn-sm">Admin</a>
         </div>
+        <div class="flex items-center gap-1">
+          <div class="dropdown dropdown-end md:hidden">
+            <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Menu">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="h-5 w-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            </div>
+            <div tabindex="0"
+              class="dropdown-content z-50 mt-3 flex w-52 flex-col gap-1 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
+              <a href="/" class="btn btn-ghost btn-sm justify-start">Home</a>
+              <a href="/about" class="btn btn-ghost btn-sm justify-start">About</a>
+              <a href="/blog" class="btn btn-ghost btn-sm justify-start">Blog</a>
+              <a href="/admin/login" class="btn btn-ghost btn-sm justify-start">Admin</a>
+            </div>
+          </div>
+          <div class="dropdown dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="Settings" title="Settings">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="h-5 w-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+              </svg>
+            </div>
+            <ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg">
+              <li class="menu-title">Theme</li>
+              <li><button type="button" data-theme-opt="system" onclick="setTheme('system')">System <span class="opt-check ml-auto hidden">✓</span></button></li>
+              <li><button type="button" data-theme-opt="light" onclick="setTheme('light')">Light <span class="opt-check ml-auto hidden">✓</span></button></li>
+              <li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">Dark <span class="opt-check ml-auto hidden">✓</span></button></li>
+            </ul>
+          </div>
+        </div>
       </nav>
     </header>
+    <div id="nav-backdrop" aria-hidden="true"></div>
     <main class="mx-auto max-w-6xl px-4 py-6">
       {% block content %}{% endblock content %}
     </main>
