adding a better navbar

public/s/css/f0ck.css

@@ -3122,6 +3122,7 @@ input#s_avatar {
   color: #888;
   font-size: 0.9em;
 }
+
 /* Search Overlay */
 #search-overlay {
   position: fixed;
@@ -3233,6 +3234,7 @@ input#s_avatar {
   background: #e74c3c;
   color: white;
 }
+
 .btn-danger:hover {
   background: #c0392b;
 }
@@ -3241,6 +3243,122 @@ input#s_avatar {
   background: #555;
   color: white;
 }
+
 .btn-secondary:hover {
   background: #666;
 }
+
+/* Nav User Dropdown */
+.nav-user-dropdown {
+  position: relative;
+  margin-left: 15px;
+}
+
+.nav-user-btn {
+  background: transparent;
+  border: 1px solid var(--nav-border-color);
+  color: var(--white);
+  padding: 6px 12px;
+  border-radius: 0;
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.nav-user-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--nav-border-color-hover);
+}
+
+.nav-user-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  min-width: 150px;
+  background: var(--dropdown-bg);
+  border: 1px solid var(--nav-border-color);
+  border-radius: 0;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  z-index: 10000;
+  overflow: hidden;
+}
+
+.nav-user-menu.show {
+  display: block;
+}
+
+.nav-user-menu a {
+  display: block;
+  padding: 10px 15px;
+  color: var(--white);
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.nav-user-menu a:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-user-divider {
+  height: 1px;
+  background: var(--nav-border-color);
+  margin: 5px 0;
+}
+/* Nav Left Group - Flexbox for dropdown + links */
+.nav-left-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.nav-links a {
+    color: var(--white);
+    text-decoration: none;
+    font-size: 14px;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.nav-links a:hover {
+    opacity: 1;
+}
+
+.nav-links svg {
+    vertical-align: middle;
+}
+
+/* Mobile responsive navbar */
+@media (max-width: 600px) {
+    .navbar {
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+    
+    .nav-left-group {
+        order: 2;
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .nav-links {
+        gap: 8px;
+    }
+    
+    .nav-user-btn {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+    
+    .nav-links a {
+        font-size: 12px;
+    }
+}

public/s/js/f0ck.js

@@ -9,6 +9,21 @@ window.requestAnimFrame = (function () {
 (() => {
   let video;
 
+  // User dropdown toggle
+  const userToggle = document.getElementById('nav-user-toggle');
+  const userMenu = document.getElementById('nav-user-menu');
+  if (userToggle && userMenu) {
+    userToggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      userMenu.classList.toggle('show');
+    });
+    document.addEventListener('click', (e) => {
+      if (!userMenu.contains(e.target) && !userToggle.contains(e.target)) {
+        userMenu.classList.remove('show');
+      }
+    });
+  }
+
   // Initialize background preference
   if (localStorage.getItem('background') == undefined) {
     localStorage.setItem('background', 'true');
@@ -272,6 +287,11 @@ window.requestAnimFrame = (function () {
         const main = document.getElementById('main');
         main.innerHTML = '<div class="container"></div>';
         container = main.querySelector('.container');
+      } else if (!container && document.getElementById('main')) {
+        // Transition from User Profile or other pages without .container
+        const main = document.getElementById('main');
+        main.innerHTML = '<div class="container"></div>';
+        container = main.querySelector('.container');
       } else if (container) {
         // Check if we are on Tags Overview logic (which reuses .container)
         const tagsOverview = container.querySelector('.tags');

views/snippets/navbar.html

@@ -2,8 +2,20 @@
 <!-- logged in -->
 <nav class="navbar navbar-expand-lg">
   <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
-  <div class="navigation-links-guest">
-    <ol>
+  <div class="nav-left-group">
+    <div class="nav-user-dropdown">
+      <button class="nav-user-btn" id="nav-user-toggle">
+        {{ session.user }} ▾
+      </button>
+      <div class="nav-user-menu" id="nav-user-menu">
+        <a href="/user/{{ session.user.toLowerCase() }}">profile</a>
+        <a href="/user/{{ session.user.toLowerCase() }}/favs">favs</a>
+        <a href="/settings">settings</a>
+        <div class="nav-user-divider"></div>
+        <a href="/logout">logout</a>
+      </div>
+    </div>
+    <div class="nav-links">
       <a href="/tags">tags</a>
       <a href="/about">about</a>
       @if(!/^\/\d$/.test(url.pathname))
@@ -14,7 +26,7 @@
           <path
             d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
         </svg></a>
-    </ol>
+    </div>
   </div>
   <!-- show pagination only for tags and main page -->
   @if(!/^\/\d+$/.test(url.pathname))