+ Test

Added a test programm to upload images for characters

frontend/src/components/header.css

@@ -0,0 +1,44 @@
+.header {
+  background-color: #2e2e3f;
+  padding: 0.3rem 0;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1200;
+  border-bottom: 1px solid #444;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 32px;
+}
+
+.navList {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 1rem;
+}
+
+.navItem {
+  margin: 0;
+}
+
+.navLink {
+  color: #fff;
+  font-size: 1.1rem;
+  text-decoration: none;
+  padding: 0.2rem 0.8rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  background-color: #1e1e2f;
+}
+
+.navLink:hover {
+  background-color: #764ACB;
+  color: #fff;
+}

frontend/src/components/header.jsx

@@ -1,61 +1,42 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './header.css';
 
 const Header = ({ isLoggedIn }) => {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    navigate('/login');
+    window.location.reload();
+  };
+
   return (
-    <header style={styles.header}>
-      <nav style={styles.nav}>
-        <ul style={styles.navList}>
-          <li style={styles.navItem}>
-            <Link to="/" style={styles.navLink}>Home</Link>
+    <header className="header">
+      <nav className="nav">
+        <ul className="navList">
+          <li className="navItem">
+            <Link to="/" className="navLink">Home</Link>
           </li>
           {!isLoggedIn && (
-          <><li style={styles.navItem}>
-              <Link to="/login" style={styles.navLink}>Login</Link>
-            </li><li style={styles.navItem}>
-                <Link to="/register" style={styles.navLink}>Register</Link>
-              </li></>
+            <>
+              <li className="navItem">
+                <Link to="/login" className="navLink">Login</Link>
+              </li>
+              <li className="navItem">
+                <Link to="/register" className="navLink">Register</Link>
+              </li>
+            </>
           )}
           {isLoggedIn && (
-            <li style={styles.navItem}>
-              <Link to="/profile" style={styles.navLink}>Profile</Link>
+            <li className="navItem">
+              <Link to="/profile" className="navLink">Profile</Link>
             </li>
           )}
         </ul>
       </nav>
     </header>
   );
-}
-
-const styles = {
-  header: {
-    backgroundColor: '#333',
-    padding: '10px 0',
-    position: 'fixed',
-    width: '100%',
-    top: 0,
-    left: 0,
-    zIndex: 1000,
-  },
-  nav: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  navList: {
-    listStyle: 'none',
-    display: 'flex',
-    margin: 0,
-    padding: 0,
-  },
-  navItem: {
-    margin: '0 15px',
-  },
-  navLink: {
-    color: '#fff',
-    textDecoration: 'none',
-    fontSize: '16px',
-  }
 };
 
-export default Header;
+export default Header;