From 6f8b9042c95b9a44d210ce1f7609248551c942bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Mon, 19 May 2025 18:05:14 +0200
Subject: [PATCH] Mobile header, user menu

---
 assets/controllers/login_controller.js  | 11 +++--
 assets/controllers/menu_controller.js   |  9 +++++
 assets/styles/app.css                   |  3 +-
 assets/styles/layout.css                | 53 +++++++++++++++++++++++++
 assets/styles/spinner.css               |  4 +-
 templates/components/Header.html.twig   |  9 +++--
 templates/components/UserMenu.html.twig |  7 +++-
 7 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 assets/controllers/menu_controller.js

diff --git a/assets/controllers/login_controller.js b/assets/controllers/login_controller.js
index 8437ad2..7e8da2f 100644
--- a/assets/controllers/login_controller.js
+++ b/assets/controllers/login_controller.js
@@ -8,7 +8,7 @@ export default class extends Controller {
   async loginAct() {
     const tags = [
       ['u', window.location.origin + '/login'],
-      ['method', 'GET']
+      ['method', 'POST']
     ]
     const ev = {
       created_at: Math.floor(Date.now()/1000),
@@ -20,15 +20,14 @@ export default class extends Controller {
     const signed = await window.nostr.signEvent(ev);
     // base64 encode and send as Auth header
     const result = await fetch('/login', {
-      method: 'GET',
+      method: 'POST',
+      credentials: 'same-origin',
       headers: {
         'Authorization': 'Nostr ' + btoa(JSON.stringify(signed))
       }
     }).then(response => {
-      if (response.ok) return response.json();
-      return false;
-    }).then(res => {
-      return res;
+      if (!response.ok) return false;
+      return 'Authentication Successful';
     })
     if (!!result) {
       this.component.render();
diff --git a/assets/controllers/menu_controller.js b/assets/controllers/menu_controller.js
new file mode 100644
index 0000000..2541785
--- /dev/null
+++ b/assets/controllers/menu_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["menu"];
+
+  toggle() {
+    this.menuTarget.classList.toggle("active");
+  }
+}
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 4a31829..76f618b 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -262,9 +262,8 @@ div:nth-child(odd) .featured-list {
     z-index: 1000; /* Ensure it stays on top */
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
-    padding: 10px 20px;
     background-color: var(--color-bg); /* Black background */
     border-bottom: 1px solid var(--color-border); /* White bottom border */
 }
diff --git a/assets/styles/layout.css b/assets/styles/layout.css
index 6458d3d..79d25de 100644
--- a/assets/styles/layout.css
+++ b/assets/styles/layout.css
@@ -48,13 +48,65 @@ nav a:hover {
     text-decoration: none;
 }
 
+header {
+    position: fixed;
+    width: 100vw;
+    top: 0;
+    left: 0;
+}
+
+/* Hamburger button */
+.hamburger {
+    cursor: pointer;
+    display: none; /* Hidden on desktop */
+}
+
+.header__logo {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+/* Mobile Styles */
+@media (max-width: 768px) {
+    .header__logo {
+        justify-content: space-around;
+    }
+
+    .header__categories {
+        display: none;
+        flex-direction: column;
+        padding-top: 1rem;
+    }
+
+    .header__categories.active {
+        display: flex;
+    }
+
+    .hamburger {
+        display: block;
+        align-self: center;
+    }
+
+    .header__categories ul {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}
+
 /* Main content */
 main {
+    margin-top: 140px;
     flex-grow: 1;
     padding: 1em;
     word-break: break-word;
 }
 
+.user-menu {
+    position: fixed;
+    top: 180px;
+}
+
 /* Right sidebar */
 aside {
     width: 190px;
@@ -90,6 +142,7 @@ dt {
         display: none; /* Hide the sidebars on small screens */
     }
     main {
+        margin-top: 120px;
         width: 100%;
     }
 }
diff --git a/assets/styles/spinner.css b/assets/styles/spinner.css
index 5246806..a92ccdd 100644
--- a/assets/styles/spinner.css
+++ b/assets/styles/spinner.css
@@ -7,8 +7,8 @@
 
 .lds-dual-ring {
     display: inline-block;
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
 }
 .lds-dual-ring:after {
     content: " ";
diff --git a/templates/components/Header.html.twig b/templates/components/Header.html.twig
index 1d0acc5..054cb4e 100644
--- a/templates/components/Header.html.twig
+++ b/templates/components/Header.html.twig
@@ -1,6 +1,9 @@
-<header class="header">
-    <div class="header__logo"><h1 class="brand"><a href="/">newsroom</a></h1></div>
-    <div class="header__categories">
+<header class="header" data-controller="menu" {{ attributes }}>
+    <div class="header__logo">
+        <h1 class="brand"><a href="/">newsroom</a></h1>
+        <button class="hamburger" data-action="click->menu#toggle" aria-label="Menu">&#9776;</button>
+    </div>
+    <div class="header__categories"  data-menu-target="menu">
         <ul>
             {% for category in cats %}
                 <li><twig:Molecules:CategoryLink coordinate="{{ category }}" /></li>
diff --git a/templates/components/UserMenu.html.twig b/templates/components/UserMenu.html.twig
index 1d99adf..8120a2e 100644
--- a/templates/components/UserMenu.html.twig
+++ b/templates/components/UserMenu.html.twig
@@ -1,4 +1,4 @@
-<div {{ attributes.defaults(stimulus_controller('login')) }}>
+<div class="user-menu" {{ attributes.defaults(stimulus_controller('login')) }}>
     {% if app.user %}
         <p>Hello, {{ app.user.displayName }}</p>
         {% if is_granted('ROLE_ADMIN') %}
@@ -31,4 +31,9 @@
     {% else %}
         <twig:Atoms:Button {{ ...stimulus_action('login', 'loginAct') }}>{{ 'heading.logIn'|trans }}</twig:Atoms:Button>
     {% endif %}
+    <div style="text-align: center">
+        <div class="spinner" data-loading>
+            <div class="lds-dual-ring"></div>
+        </div>
+    </div>
 </div>