HeagBoKaT/cats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Telegram-стиль, синий акцент, bubble-карточки

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 10:42:13 +03:00
parent ea0df060e8
commit b277e0f177
13 changed files with 524 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
client/src/components/Navbar.tsx
View File

@@ -1,53 +1,47 @@
import { Link, useNavigate } from 'react-router-dom';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { LogOut, Plus, Home, Cat } from 'lucide-react';
export default function Navbar() {
const { user, logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
if (!user) return null;
return (
<nav className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-md shadow-sm">
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
<Link to="/feed" className="flex items-center gap-2 group">
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-sm transition-transform group-hover:scale-105">
<Cat className="h-4.5 w-4.5 text-white" />
</div>
<span className="text-base font-bold tracking-tight text-foreground">
Catstagram
</span>
<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">
Catstagram
</Link>
<div className="flex items-center gap-0.5">
<Link to="/feed">
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary">
<Home className="h-4.5 w-4.5" />
</Button>
<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">
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary">
<Plus className="h-4.5 w-4.5" />
</Button>
<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">
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl">
<Avatar className="h-7 w-7">
<AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
</Button>
<Avatar className="h-7 w-7 ml-0.5">
<AvatarFallback className="text-[9px] bg-[#2aabee] text-white">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
</Link>
<button
onClick={() => { logout(); navigate('/login'); }}
className="flex h-9 w-9 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
>
<LogOut className="h-4 w-4" />
</button>
</div>
</div>
</nav>