first commit

client/src/components/Navbar.tsx

@@ -0,0 +1,43 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { LogOut, Plus, Home, User } from 'lucide-react';
+
+export default function Navbar() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  if (!user) return null;
+
+  return (
+    <nav className="sticky top-0 z-50 border-b bg-white">
+      <div className="mx-auto flex h-12 max-w-5xl items-center justify-between px-4">
+        <Link to="/feed" className="text-base font-semibold tracking-tight">
+          Catstagram
+        </Link>
+
+        <div className="flex items-center gap-0.5">
+          <Link to="/feed" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
+            <Home className="h-4 w-4" />
+          </Link>
+          <Link to="/upload" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
+            <Plus className="h-4 w-4" />
+          </Link>
+          <Link to="/profile" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
+            <Avatar className="h-6 w-6">
+              <AvatarFallback className="text-[9px] bg-foreground text-background">
+                {user.username.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          </Link>
+          <button
+            onClick={() => { logout(); navigate('/login'); }}
+            className="flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
+          >
+            <LogOut className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}