UI: полноценный красивый интерфейс, iOS-style дизайн, все страницы

client/src/components/Navbar.tsx

@@ -1,43 +1,53 @@
-import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { House, Plus } from 'lucide-react';
 
 export default function Navbar() {
-  const { user, logout } = useAuth();
-  const navigate = useNavigate();
+  const { user } = useAuth();
   const location = useLocation();
 
   if (!user) return null;
 
+  const navItems = [
+    { to: '/feed', label: 'Лента', icon: House },
+    { to: '/upload', label: 'Добавить', icon: Plus },
+  ];
+
   return (
-    <nav className="sticky top-0 z-50 border-b bg-white">
-      <div className="mx-auto flex h-11 max-w-[660px] items-center justify-between px-4">
-        <Link to="/feed" className="text-[17px] font-semibold tracking-tight">
+    <nav className="sticky top-0 z-50 bg-[var(--surface)]/90 backdrop-blur-xl border-b border-[var(--border)]">
+      <div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4">
+        <Link
+          to="/feed"
+          className="text-[18px] font-bold tracking-tight"
+          style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}
+        >
           Catstagram
         </Link>
 
-        <div className="flex items-center gap-1.5">
-          <Link
-            to="/feed"
-            className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
-              location.pathname === '/feed' ? 'bg-[#2aabee] text-white' : 'text-[#8e8e93] hover:text-black'
-            }`}
-          >
-            <span className="text-base leading-none">🏠</span>
-            <span className="hidden sm:inline">Лента</span>
-          </Link>
-          <Link
-            to="/upload"
-            className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
-              location.pathname === '/upload' ? 'bg-[#2aabee] text-white' : 'text-[#8e8e93] hover:text-black'
-            }`}
-          >
-            <span className="text-base leading-none">➕</span>
-            <span className="hidden sm:inline">Добавить</span>
-          </Link>
-          <Link to="/profile">
-            <Avatar className="h-7 w-7 ml-0.5">
-              <AvatarFallback className="text-[9px] bg-[#2aabee] text-white">
+        <div className="flex items-center gap-1">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = location.pathname === item.to;
+            return (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={`flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13px] font-medium transition-all ${
+                  isActive
+                    ? 'bg-[var(--primary-light)] text-[var(--primary)]'
+                    : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]'
+                }`}
+              >
+                <Icon className={`h-4 w-4 ${isActive ? 'stroke-[2.5]' : 'stroke-[1.5]'}`} />
+                <span className="hidden sm:inline">{item.label}</span>
+              </Link>
+            );
+          })}
+
+          <Link to="/profile" className="ml-1">
+            <Avatar className="h-8 w-8 border-2 border-transparent hover:border-[var(--primary)] transition-all">
+              <AvatarFallback className="text-[11px] avatar-initials">
                 {user.username.charAt(0).toUpperCase()}
               </AvatarFallback>
             </Avatar>
@@ -46,4 +56,4 @@ export default function Navbar() {
       </div>
     </nav>
   );
-}
+}