CampFire/CampFireCritics
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновление навигационной панели

Browse Source
This commit is contained in:
degradin 2025-05-07 15:20:42 +03:00
parent 0d958371e8
commit f5997a6c93
1 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/layout/Header.jsx
View File

@ -1,17 +1,17 @@
import { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import { Link, useNavigate, useLocation } from "react-router-dom"; import { Link, useNavigate, useLocation } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext"; import { useAuth } from "../../contexts/AuthContext";
import { FiSearch, FiMenu, FiX, FiUser } from "react-icons/fi"; import { FiSearch, FiMenu, FiX, FiUser } from "react-icons/fi";
import SearchBar from "../ui/SearchBar"; import SearchBar from "../ui/SearchBar";
import Logo from "../ui/Logo"; import Logo from "../ui/Logo";
function Header() { const Header = () => {
const { user, userProfile, signOut } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isSearchOpen, setIsSearchOpen] = useState(false); const [isSearchOpen, setIsSearchOpen] = useState(false);
const { currentUser, userProfile, logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
// Close mobile menu when route changes // Close mobile menu when route changes
useEffect(() => { useEffect(() => {
@ -35,10 +35,10 @@ function Header() {
const handleLogout = async () => { const handleLogout = async () => {
try { try {
await logout(); await signOut();
navigate("/"); navigate("/");
} catch (error) { } catch (error) {
console.error("Не удалось войти", error); console.error("Не удалось выйти:", error);
} }
}; };
@ -96,7 +96,7 @@ function Header() {
<FiSearch size={20} /> <FiSearch size={20} />
</button> </button>
{currentUser ? ( {user ? (
<div className="relative group"> <div className="relative group">
<button className="flex items-center space-x-2 p-2 rounded-full bg-campfire-charcoal"> <button className="flex items-center space-x-2 p-2 rounded-full bg-campfire-charcoal">
{userProfile?.profilePicture ? ( {userProfile?.profilePicture ? (
@ -110,8 +110,16 @@ function Header() {
)} )}
</button> </button>
<div className="absolute right-0 mt-2 w-48 py-2 bg-campfire-charcoal rounded-md shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"> <div className="absolute right-0 mt-2 w-48 py-2 bg-campfire-charcoal rounded-md shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
{userProfile?.role === 'admin' && (
<Link <Link
to={`/profile/${currentUser.uid}`} to="/admin/media"
className="block px-4 py-2 hover:bg-campfire-dark"
>
Админ панель
</Link>
)}
<Link
to={`/profile/${userProfile?.username}`}
className="block px-4 py-2 hover:bg-campfire-dark" className="block px-4 py-2 hover:bg-campfire-dark"
> >
Профиль Профиль
@ -125,9 +133,20 @@ function Header() {
</div> </div>
</div> </div>
) : ( ) : (
<Link to="/login" className="btn-primary"> <>
<Link
to="/login"
className="text-campfire-light hover:text-campfire-amber transition-colors"
>
Войти Войти
</Link> </Link>
<Link
to="/register"
className="btn-primary"
>
Регистрация
</Link>
</>
)} )}
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
@ -170,7 +189,7 @@ function Header() {
Фильмы Фильмы
</Link> </Link>
<Link <Link
to="/discover/tv" to="/discover/series"
className="text-campfire-light hover:text-campfire-amber transition-colors py-2" className="text-campfire-light hover:text-campfire-amber transition-colors py-2"
> >
Сериалы Сериалы
@ -186,6 +205,6 @@ function Header() {
</div> </div>
</header> </header>
); );
} };
export default Header; export default Header;