Menu in corner

static/css/style.css

@@ -553,3 +553,68 @@ button:disabled {
     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);
+} 

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 {

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 -->