From bd49ee38926dd7f05970ed4d4ceb68bedce21567 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Wed, 4 Feb 2026 00:03:10 -0300
Subject: [PATCH] Add logged-out navigation menu component

- Simplified menu showing only Sign in button
- Uses HTMX for authentication redirect
- Follows existing UI component patterns
- Responsive design with CSS variables
---
 ui/suite/partials/navigation_menu.html | 63 ++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 ui/suite/partials/navigation_menu.html

diff --git a/ui/suite/partials/navigation_menu.html b/ui/suite/partials/navigation_menu.html
new file mode 100644
index 0000000..505da40
--- /dev/null
+++ b/ui/suite/partials/navigation_menu.html
@@ -0,0 +1,63 @@
+<div class="navigation-menu" id="navigation-menu">
+    <nav class="nav-menu-content">
+        <a href="/auth/login"
+           class="nav-menu-item nav-sign-in"
+           hx-get="/auth/login"
+           hx-swap="none"
+           hx-on::after-request="window.location.href='/login'">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+                <polyline points="10 17 15 12 10 7"></polyline>
+                <line x1="15" y1="12" x2="3" y2="12"></line>
+            </svg>
+            <span>Sign in</span>
+        </a>
+    </nav>
+</div>
+
+<style>
+    .navigation-menu {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+        min-width: 200px;
+        z-index: 1000;
+        overflow: hidden;
+        animation: slideIn 0.2s ease;
+    }
+
+    @keyframes slideIn {
+        from { opacity: 0; transform: translateY(-10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    .nav-menu-content {
+        padding: 8px;
+    }
+
+    .nav-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 12px 14px;
+        border-radius: 8px;
+        text-decoration: none;
+        color: white;
+        font-size: 15px;
+        transition: all 0.15s ease;
+        cursor: pointer;
+    }
+
+    .nav-sign-in {
+        background: var(--primary);
+    }
+
+    .nav-sign-in:hover {
+        background: var(--primary-dark);
+    }
+
+    .nav-sign-in svg {
+        flex-shrink: 0;
+    }
+</style>
\ No newline at end of file