Mobile header, user menu

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();

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");
+  }
+}

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 */
 }

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%;
     }
 }

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: " ";

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>

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>