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

src/components/layout/Header.jsx

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