From fa18662b36927f5b8bdcc768107912021fb78f0a Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Mon, 3 Feb 2025 17:50:14 -0800
Subject: [PATCH] Menu in corner

---
 static/css/style.css      | 65 +++++++++++++++++++++++++++++++++++++++
 static/js/app.js          | 22 +++++++++++++
 templates/index.html.tera |  9 +++++-
 3 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/static/css/style.css b/static/css/style.css
index 785f9f7..54b7a21 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -552,4 +552,69 @@ button:disabled {
     padding: 0.1rem 0.4rem;
     border-radius: 2px;
     font-family: monospace;
+}
+
+/* User menu styles */
+.user-menu {
+    position: relative;
+}
+
+.user-menu-button {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    padding: 0.5rem;
+    cursor: pointer;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    transition: opacity 0.2s ease;
+}
+
+.user-menu-button:hover {
+    opacity: 0.8;
+}
+
+.user-menu-icon {
+    font-size: 1.4rem;
+}
+
+.user-menu-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background-color: var(--sidebar-bg);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    min-width: 150px;
+    display: none;
+    z-index: 1000;
+}
+
+.user-menu-dropdown.show {
+    display: block;
+}
+
+.user-menu-item {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.user-menu-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.user-menu-item#logoutButton {
+    color: var(--primary-red);
+}
+
+.user-menu-item#logoutButton:hover {
+    background-color: rgba(244, 63, 63, 0.1);
 } 
diff --git a/static/js/app.js b/static/js/app.js
index e51fdc6..6e3f98e 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -170,6 +170,28 @@ async function handleFeeds() {
 // Load feeds when page loads
 document.addEventListener('DOMContentLoaded', handleFeeds);
 
+// User menu functionality
+const userMenuButton = document.getElementById('userMenuButton');
+const userMenuDropdown = document.getElementById('userMenuDropdown');
+
+// Toggle menu on button click
+userMenuButton.addEventListener('click', (e) => {
+    e.stopPropagation();
+    userMenuDropdown.classList.toggle('show');
+});
+
+// Close menu when clicking outside
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.user-menu')) {
+        userMenuDropdown.classList.remove('show');
+    }
+});
+
+// Prevent menu from closing when clicking inside it
+userMenuDropdown.addEventListener('click', (e) => {
+    e.stopPropagation();
+});
+
 // Logout functionality
 document.getElementById('logoutButton').addEventListener('click', async () => {
     try {
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 19a632f..7c56264 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -12,7 +12,14 @@
             <button class="add-feed-button" id="addFeedButton">Add Feed</button>
         </nav>
         <h1 class="top-bar-title">RSS Reader</h1>
-        <button class="logout-button" id="logoutButton">Logout</button>
+        <div class="user-menu">
+            <button class="user-menu-button" id="userMenuButton">
+                <span class="user-menu-icon">☰</span>
+            </button>
+            <div class="user-menu-dropdown" id="userMenuDropdown">
+                <button class="user-menu-item" id="logoutButton">Logout</button>
+            </div>
+        </div>
     </header>
 
     <!-- Add Feed Modal -->