enhance mobile nav

web/src/components/MobileNav.jsx

···
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
-import { Home, Search, Folder, User, PenSquare, Bookmark } from "lucide-react";
+import { useState, useEffect } from "react";
+import { getUnreadNotificationCount } from "../api/client";
+import {
+  Home,
+  Search,
+  Folder,
+  User,
+  PenSquare,
+  Bookmark,
+  Settings,
+  MoreHorizontal,
+  LogOut,
+  Bell,
+  Highlighter,
+} from "lucide-react";
 
 export default function MobileNav() {
-  const { user, isAuthenticated } = useAuth();
+  const { user, isAuthenticated, logout } = useAuth();
   const location = useLocation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
 
   const isActive = (path) => {
     if (path === "/") return location.pathname === "/";
     return location.pathname.startsWith(path);
   };
 
-  return (
-    <nav className="mobile-bottom-nav">
-      <Link
-        to="/home"
-        className={`mobile-bottom-nav-item ${isActive("/home") ? "active" : ""}`}
-      >
-        <Home size={22} />
-        <span>Home</span>
-      </Link>
+  useEffect(() => {
+    if (isAuthenticated) {
+      getUnreadNotificationCount()
+        .then((data) => setUnreadCount(data.count || 0))
+        .catch(() => {});
+    }
+  }, [isAuthenticated]);
 
-      <Link
-        to="/url"
-        className={`mobile-bottom-nav-item ${isActive("/url") ? "active" : ""}`}
-      >
-        <Search size={22} />
-        <span>Browse</span>
-      </Link>
+  const closeMenu = () => setIsMenuOpen(false);
 
-      {isAuthenticated ? (
+  return (
+    <>
+      {isMenuOpen && (
         <>
-          <Link
-            to="/new"
-            className="mobile-bottom-nav-item mobile-bottom-nav-new"
-          >
-            <div className="mobile-nav-new-btn">
-              <PenSquare size={20} />
-            </div>
-          </Link>
+          <div className="mobile-nav-overlay" onClick={closeMenu} />
+          <div className="mobile-nav-menu">
+            {isAuthenticated ? (
+              <>
+                <Link
+                  to={`/profile/${user.did}`}
+                  className="mobile-menu-profile-card"
+                  onClick={closeMenu}
+                >
+                  {user.avatar ? (
+                    <img
+                      src={user.avatar}
+                      alt=""
+                      className="mobile-nav-avatar"
+                    />
+                  ) : (
+                    <div
+                      className="mobile-nav-avatar"
+                      style={{
+                        background: "var(--bg-secondary)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                    >
+                      <User size={14} />
+                    </div>
+                  )}
+                  <div style={{ display: "flex", flexDirection: "column" }}>
+                    <span
+                      style={{
+                        fontWeight: 600,
+                        fontSize: "0.9rem",
+                        color: "var(--text-primary)",
+                      }}
+                    >
+                      {user.displayName || user.handle}
+                    </span>
+                    <span
+                      style={{
+                        fontSize: "0.8rem",
+                        color: "var(--text-tertiary)",
+                      }}
+                    >
+                      @{user.handle}
+                    </span>
+                  </div>
+                </Link>
 
-          <Link
-            to="/bookmarks"
-            className={`mobile-bottom-nav-item ${isActive("/bookmarks") || isActive("/collections") ? "active" : ""}`}
-          >
-            <Bookmark size={22} />
-            <span>Library</span>
-          </Link>
+                <Link
+                  to="/highlights"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <Highlighter size={20} />
+                  <span>Highlights</span>
+                </Link>
+
+                <Link
+                  to="/bookmarks"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <Bookmark size={20} />
+                  <span>Bookmarks</span>
+                </Link>
 
-          <Link
-            to={user?.did ? `/profile/${user.did}` : "/profile"}
-            className={`mobile-bottom-nav-item ${isActive("/profile") ? "active" : ""}`}
-          >
-            {user?.avatar ? (
-              <img src={user.avatar} alt="" className="mobile-nav-avatar" />
+                <Link
+                  to="/collections"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <Folder size={20} />
+                  <span>Collections</span>
+                </Link>
+
+                <Link
+                  to="/settings"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <Settings size={20} />
+                  <span>Settings</span>
+                </Link>
+
+                <div className="dropdown-divider" />
+
+                <button
+                  className="mobile-menu-item danger"
+                  onClick={() => {
+                    logout();
+                    closeMenu();
+                  }}
+                >
+                  <LogOut size={20} />
+                  <span>Log Out</span>
+                </button>
+              </>
             ) : (
-              <User size={22} />
+              <>
+                <Link
+                  to="/login"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <User size={20} />
+                  <span>Sign In</span>
+                </Link>
+                <Link
+                  to="/collections"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <Folder size={20} />
+                  <span>Collections</span>
+                </Link>
+                <Link
+                  to="/settings"
+                  className="mobile-menu-item"
+                  onClick={closeMenu}
+                >
+                  <Settings size={20} />
+                  <span>Settings</span>
+                </Link>
+              </>
             )}
-            <span>You</span>
-          </Link>
+          </div>
         </>
-      ) : (
-        <>
+      )}
+
+      <nav className="mobile-bottom-nav">
+        <Link
+          to="/home"
+          className={`mobile-bottom-nav-item ${isActive("/home") ? "active" : ""}`}
+          onClick={closeMenu}
+        >
+          <Home size={24} strokeWidth={1.5} />
+        </Link>
+
+        <Link
+          to="/url"
+          className={`mobile-bottom-nav-item ${isActive("/url") ? "active" : ""}`}
+          onClick={closeMenu}
+        >
+          <Search size={24} strokeWidth={1.5} />
+        </Link>
+
+        {isAuthenticated ? (
+          <>
+            <Link
+              to="/new"
+              className="mobile-bottom-nav-item mobile-bottom-nav-new"
+              onClick={closeMenu}
+            >
+              <div className="mobile-nav-new-btn">
+                <PenSquare size={20} strokeWidth={2} />
+              </div>
+            </Link>
+
+            <Link
+              to="/notifications"
+              className={`mobile-bottom-nav-item ${isActive("/notifications") ? "active" : ""}`}
+              onClick={closeMenu}
+            >
+              <div style={{ position: "relative", display: "flex" }}>
+                <Bell size={24} strokeWidth={1.5} />
+                {unreadCount > 0 && (
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: -2,
+                      right: -2,
+                      width: 8,
+                      height: 8,
+                      background: "var(--accent)",
+                      borderRadius: "50%",
+                      border: "2px solid var(--nav-bg)",
+                    }}
+                  />
+                )}
+              </div>
+            </Link>
+          </>
+        ) : (
           <Link
             to="/login"
             className="mobile-bottom-nav-item mobile-bottom-nav-new"
+            onClick={closeMenu}
           >
             <div className="mobile-nav-new-btn">
-              <User size={20} />
+              <User size={20} strokeWidth={2} />
             </div>
           </Link>
+        )}
 
-          <Link
-            to="/collections"
-            className={`mobile-bottom-nav-item ${isActive("/collections") ? "active" : ""}`}
-          >
-            <Folder size={22} />
-            <span>Library</span>
-          </Link>
-
-          <Link to="/login" className={`mobile-bottom-nav-item`}>
-            <User size={22} />
-            <span>Sign In</span>
-          </Link>
-        </>
-      )}
-    </nav>
+        <button
+          className={`mobile-bottom-nav-item ${isMenuOpen ? "active" : ""}`}
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+        >
+          <MoreHorizontal size={24} strokeWidth={1.5} />
+        </button>
+      </nav>
+    </>
   );
 }

web/src/css/layout.css

···
 
 .mobile-bottom-nav-item {
   display: flex;
+  flex: 1;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 4px;
-  padding: 6px 12px;
+  padding: 6px 0;
   color: var(--text-tertiary);
   text-decoration: none;
   font-size: 0.65rem;
   font-weight: 500;
   transition: color 0.15s;
-  min-width: 56px;
+  min-width: 0;
 }
 
 .mobile-bottom-nav-item.active {
···
 }
 
 .mobile-bottom-nav-new {
-  padding: 6px 16px;
+  padding: 6px 0;
 }
 
 .mobile-nav-new-btn {
···
     font-size: 0.85rem;
   }
 }
+
+.mobile-nav-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 150;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  animation: fadeIn 0.15s ease-out;
+}
+
+.mobile-nav-menu {
+  position: fixed;
+  bottom: calc(70px + env(safe-area-inset-bottom));
+  right: 12px;
+  width: 250px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 6px;
+  z-index: 151;
+  box-shadow: var(--shadow-2xl);
+  animation: mobileMenuSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+@keyframes mobileMenuSlide {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.mobile-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  transition: all 0.1s;
+  background: transparent;
+  border: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mobile-menu-item:hover,
+.mobile-menu-item:active {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.mobile-menu-item svg {
+  opacity: 0.8;
+}
+
+.mobile-menu-item.active {
+  background: var(--bg-tertiary);
+  color: var(--accent);
+}
+
+.mobile-menu-item.danger {
+  color: var(--error);
+}
+
+.mobile-menu-item.danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.mobile-menu-profile-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+  margin-bottom: 6px;
+  text-decoration: none;
+  border: 1px solid transparent;
+}
+
+.mobile-menu-profile-card:active {
+  background: var(--bg-hover);
+  transform: scale(0.98);
+}
+
+.mobile-menu-badge {
+  margin-left: auto;
+  background: var(--accent);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 99px;
+}

web/src/pages/Settings.jsx

···
       <h1 className="page-title">Settings</h1>
       <p className="page-description">Manage your preferences and API keys.</p>
 
-      <div className="settings-section">
+      <div className="settings-section layout-settings-section">
         <h2>Layout</h2>
         <div className="layout-options">
           <button
···
                 @media (max-width: 600px) {
                     .layout-options {
                         grid-template-columns: 1fr;
+                    }
+                }
+                @media (max-width: 768px) {
+                    .layout-settings-section {
+                        display: none;
                     }
                 }
             `}</style>