nice update

client/src/components/Layout.jsx

@@ -1,18 +1,52 @@
+import { useEffect, useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useAuth } from '../AuthContext';
 import { formatCredits } from '../api';
+import DropFeed from './DropFeed';
+
+const FEED_KEY = 'caseforge-feed-drop';
 
 export default function Layout() {
   const { user, logout } = useAuth();
+  const [feedOpen, setFeedOpen] = useState(() => {
+    try {
+      return localStorage.getItem(FEED_KEY) === '1';
+    } catch {
+      return false;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(FEED_KEY, feedOpen ? '1' : '0');
+    } catch {
+      /* ignore */
+    }
+  }, [feedOpen]);
 
   return (
-    <div className="app-shell">
+    <div className={`app-shell${feedOpen ? ' feed-open' : ''}`}>
       <header className="topnav">
         <NavLink to="/dashboard" className="brand">
           CaseForge
         </NavLink>
         <nav className="nav-links">
-          <NavLink to="/dashboard">Dashboard</NavLink>
+          {user && user.role !== 'admin' && (
+            <>
+              <NavLink to="/dashboard">Inventory</NavLink>
+              <NavLink to="/cases">Cases</NavLink>
+              <NavLink to="/bet">Bet Item</NavLink>
+              <NavLink to="/shop">Shop</NavLink>
+              <button
+                type="button"
+                className={`nav-toggle${feedOpen ? ' active' : ''}`}
+                onClick={() => setFeedOpen((v) => !v)}
+                aria-pressed={feedOpen}
+              >
+                Feed Drop
+              </button>
+            </>
+          )}
           <NavLink to="/leaderboard">Leaderboard</NavLink>
           {user?.role === 'admin' && <NavLink to="/admin">Admin</NavLink>}
           {user && (
@@ -20,7 +54,12 @@ export default function Layout() {
           )}
           {user ? (
             <>
-              <span className="muted">{user.username}</span>
+              <NavLink to="/profile" className="nav-user" title="Profile">
+                {user.avatarUrl ? (
+                  <img src={user.avatarUrl} alt="" className="nav-avatar" />
+                ) : null}
+                <span className="muted">{user.username}</span>
+              </NavLink>
               <button type="button" className="btn ghost" onClick={logout}>
                 Logout
               </button>
@@ -30,9 +69,12 @@ export default function Layout() {
           )}
         </nav>
       </header>
-      <main className="main">
-        <Outlet />
-      </main>
+      <div className="app-body">
+        {feedOpen && user && user.role !== 'admin' && <DropFeed />}
+        <main className="main">
+          <Outlet />
+        </main>
+      </div>
     </div>
   );
 }