uodate UI

frontend/src/App.css

@@ -141,14 +141,10 @@ sup {
 }
 
 .version {
-  position: absolute;
-  right: 40px;
-  top: 20px;
   font-family: "Open Sans", sans-serif;
   color: #f5f5f5;
-  text-shadow: 0 0 5px #ff3, 0 0 10px #ff3, 0 0 15px #ff3, 0 0 20px #f90,
-    0 0 30px #f90, 0 0 40px #c33, 0 0 50px #c33, 0 0 75px #c33;
-  animation: flicker 1s infinite;
+  text-shadow: 0 0 5px rgb(51, 68, 255), 0 0 10px rgb(51, 221, 255), 0 0 15px rgb(51, 139, 255), 0 0 20px rgb(21, 0, 255),
+    0 0 30px rgb(0, 255, 208), 0 0 40px rgb(51, 204, 161), 0 0 50px rgb(51, 125, 204), 0 0 75px rgb(77, 51, 204);
   font-family: "Rubik Burned", system-ui;
   font-weight: 100;
   font-style: normal;
@@ -163,10 +159,4 @@ sup {
     width: 100px;
     padding: 10px;
   }
-
-  .version {
-    right: 10px;
-    top: 5px;
-    font-size: x-small;
-  }
 }

frontend/src/App.js

@@ -1,33 +1,60 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Routes, Link, useLocation } from 'react-router-dom';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faSquareCaretLeft , faSquareCaretRight, faEllipsisVertical, faPlay} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import HomePage from './pages/homePage';
-import FilmsPage from './pages/filmsPage';
-import TvShowsPage from './pages/tvshowsPage';
-import FilmDetailsPage from './pages/filmDetailsPage';
-import { FilmProvider } from './context/FilmContext';
-import config from './config';
-import './App.css';
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Link,
+  useLocation,
+} from "react-router-dom";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faSquareCaretLeft,
+  faSquareCaretRight,
+  faSquareCaretDown,
+  faEllipsisVertical,
+  faPlay,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import HomePage from "./pages/homePage";
+import FilmsPage from "./pages/filmsPage";
+import TvShowsPage from "./pages/tvshowsPage";
+import FilmDetailsPage from "./pages/filmDetailsPage";
+import { FilmProvider } from "./context/FilmContext";
+import config from "./config";
+import "./App.css";
+import MenueModal from "./components/modals/menueModal";
 
-
-library.add(faSquareCaretLeft, faSquareCaretRight, faEllipsisVertical, faPlay);
+library.add(
+  faSquareCaretLeft,
+  faSquareCaretRight,
+  faSquareCaretDown,
+  faEllipsisVertical,
+  faPlay
+);
 
 function Navbar() {
   const location = useLocation();
   const [hoveredLink, setHoveredLink] = React.useState(null);
   const [prevLink, setPrevLink] = React.useState(null);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+  const handleModalOpen = () => {
+    setIsModalOpen(!isModalOpen);
+  };
 
   React.useEffect(() => {
-    const activeLink = document.querySelector(`.nav-link[href="${location.pathname}"]`);
+    const activeLink = document.querySelector(
+      `.nav-link[href="${location.pathname}"]`
+    );
     if (activeLink) {
       setPrevLink(activeLink);
     }
   }, [location.pathname]);
 
   const handleMouseEnter = (e) => {
-    setPrevLink(document.querySelector('.nav-link.active'));
+    setPrevLink(document.querySelector(".nav-link.active"));
     setHoveredLink(e.target);
   };
 
@@ -36,13 +63,12 @@ function Navbar() {
   };
 
   return (
-    
     <nav>
       <ul className="nav-links">
         <li>
           <Link
             to="/"
-            className={`nav-link ${location.pathname === '/' ? 'active' : ''}`}
+            className={`nav-link ${location.pathname === "/" ? "active" : ""}`}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
@@ -52,7 +78,9 @@ function Navbar() {
         <li>
           <Link
             to="/films"
-            className={`nav-link ${location.pathname === '/films' ? 'active' : ''}`}
+            className={`nav-link ${
+              location.pathname === "/films" ? "active" : ""
+            }`}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
@@ -62,7 +90,9 @@ function Navbar() {
         <li>
           <Link
             to="/tvshows"
-            className={`nav-link ${location.pathname === '/tvshows' ? 'active' : ''}`}
+            className={`nav-link ${
+              location.pathname === "/tvshows" ? "active" : ""
+            }`}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
           >
@@ -70,7 +100,12 @@ function Navbar() {
           </Link>
         </li>
         <li>
-        <FontAwesomeIcon className='nav-link-menue' icon="fa-solid fa-ellipsis-vertical" size='xl'/>
+          <FontAwesomeIcon
+            className="nav-link-menue"
+            icon="fa-solid fa-square-caret-down"
+            size="xl"
+            onClick={handleModalOpen}
+          />
         </li>
       </ul>
       <span
@@ -95,7 +130,7 @@ function Navbar() {
             : {}
         }
       />
-      <sup className='version'>{config.version}</sup>
+      <MenueModal isOpen={isModalOpen} onRequestClose={setIsModalOpen} />
     </nav>
   );
 }
@@ -109,14 +144,14 @@ function App() {
             <Navbar />
           </header>
           <main>
-          <Routes>
-            <Route path="/" element={<HomePage />} />
-            <Route path="/films" element={<FilmsPage />} />
-            <Route path="/tvshows" element={<TvShowsPage />} />
-            <Route path="/film" >
-              <Route path="/film/:title" element={<FilmDetailsPage />} />
-            </Route>
-          </Routes>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/films" element={<FilmsPage />} />
+              <Route path="/tvshows" element={<TvShowsPage />} />
+              <Route path="/film">
+                <Route path="/film/:title" element={<FilmDetailsPage />} />
+              </Route>
+            </Routes>
           </main>
         </div>
       </Router>

frontend/src/components/modals/menueModal.css

@@ -0,0 +1,92 @@
+.menue-modal {
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: linear-gradient(135deg, #171717, #31506e); /* Deep blue gradient */
+    padding: 30px;
+    border: none;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+    color: #f0f0f0; /* Light gray text color */
+    text-align: center;
+    width: 90%;
+    max-width: 900px;
+    z-index: 1001;
+    animation: fadeIn 0.3s ease-out;
+  }
+  
+  .menue-modal-overlay {
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    border: none;
+  }
+  
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: none;
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+  }
+  
+  .confirm-button {
+    background: #3f55d2; /* Soft blue for the confirm button */
+    color: #fff;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background 0.3s ease;
+  }
+  
+  .confirm-button:hover {
+    background: #4244b3; /* Slightly darker blue on hover */
+  }
+  
+  .cancel-button {
+    background: #b0bec5; /* Light silver-blue for the cancel button */
+    color: #000; /* Dark text color for contrast */
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: background 0.3s ease;
+  }
+  
+  .cancel-button:hover {
+    background: #90a4ae; /* Slightly darker silver-blue on hover */
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .menue-modal {
+      width: 85%;
+      padding: 20px;
+    }
+  
+    .modal-title {
+      font-size: 2rem;
+    }
+  
+    .confirm-button, .cancel-button {
+      padding: 10px 20px;
+      font-size: 1rem;
+    }
+  }
+  

frontend/src/components/modals/menueModal.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Modal from "react-modal";
+import "./menueModal.css";
+import config from "../../config";
+
+Modal.setAppElement("#root");
+
+const MenueModal = ({ isOpen, onRequestClose }) => {
+    
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      contentLabel="Menue Modal"
+      className="menue-modal"
+      overlayClassName="menue-modal-overlay"
+    >
+      <div className="modal-content">
+        <label className="version">{config.version}</label>
+      </div>
+    </Modal>
+  );
+};
+
+export default MenueModal;