Add menues

frontend/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "react-swipeable": "^7.0.1",
     "swiper": "^11.1.4"

frontend/src/App.css

@@ -1,50 +0,0 @@
-/* index.css */
-
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.swipeable-cards-container {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.swipeable-card {
-    width: 300px;
-    height: 400px;
-    margin: 10px;
-    background-color: #f2f2f2;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.5em;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.6s ease;
-    transform-style: preserve-3d;
-}
-
-.swipeable-card.flipped {
-    transform: rotateY(180deg);
-}
-
-.swipeable-card:active {
-    transform: scale(0.95);
-}
-
-.swipeable-card-content {
-    backface-visibility: hidden;
-}
-
-.swipeable-card-back {
-    position: absolute;
-    transform: rotateY(180deg);
-    backface-visibility: hidden;
-}

frontend/src/App.tsx

@@ -1,23 +1,13 @@
 import React from 'react';
-import {Link, Route, Routes} from 'react-router-dom';
-import Home from './pages/Home';
-import About from './pages/About';
-import './App.css'
+import './App.css';
+import TopMenu from './components/TopMenu';
+import Menu from './components/Menu';
 
 function App() {
     return (
         <>
-            <h1 className="text-3xl font-bold underline">Top</h1>
-            <nav>
-                <ul>
-                    <li><Link to="/">Home</Link></li>
-                    <li><Link to="/about">About</Link></li>
-                </ul>
-            </nav>
-            <Routes>
-                <Route path="/" element={<Home/>}/>
-                <Route path="/about" element={<About/>}/>
-            </Routes>
+            <TopMenu />
+            <Menu/>
         </>
     )
 }

frontend/src/components/Menu.css

@@ -0,0 +1,23 @@
+/* Menu.css */
+
+.menu {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #333;
+    display: flex;
+    justify-content: space-around;
+    padding: 22px 0;
+}
+
+.menu-button {
+    color: white;
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+.menu-button:hover {
+    color: #aaa;
+}

frontend/src/components/Menu.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Link, Route, Routes} from 'react-router-dom';
+import Home from '../pages/Home';
+import About from '../pages/About';
+import { IoIosHome } from "react-icons/io";
+import './Menu.css';
+
+function Menu() {
+    return (
+        <>
+            <div className="menu">
+                <button className="menu-button"><Link to="/"><span className="icon-[mdi-light--home] text-4xl"> <IoIosHome /></span></Link></button>
+                <button className="menu-button"><Link to="/about">About</Link></button>
+            </div>
+            <Routes>
+                <Route path="/" element={<Home/>}/>
+                <Route path="/about" element={<About/>}/>
+            </Routes>
+
+        </>
+    );
+}
+
+export default Menu;

frontend/src/components/SwipeableCard.css

@@ -0,0 +1,32 @@
+.swipeable-card {
+    width: 300px;
+    height: 400px;
+    margin: 10px;
+    background-color: #f2f2f2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.6s ease;
+    transform-style: preserve-3d;
+}
+
+.swipeable-card.flipped {
+    transform: rotateY(180deg);
+}
+
+.swipeable-card:active {
+    transform: scale(0.95);
+}
+
+.swipeable-card-content {
+    backface-visibility: hidden;
+}
+
+.swipeable-card-back {
+    position: absolute;
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+}

frontend/src/components/SwipeableCard.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
+import './SwipeableCard.css'
 
 interface SwipeableCardProps {
     content: string;

frontend/src/components/TopMenu.css

@@ -0,0 +1,24 @@
+/* TopMenu.css */
+
+.top-menu {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background-color: #333;
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0;
+    z-index: 1000; /* Ensures the menu stays on top */
+}
+
+.menu-button {
+    color: white;
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+}
+
+.menu-button:hover {
+    color: #aaa;
+}

frontend/src/components/TopMenu.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './TopMenu.css';
+import {IoIosSettings} from "react-icons/io";
+
+function TopMenu() {
+    return (
+        <div className="top-menu">
+            <button className="menu-button">
+                <span className="icon-[mdi-light--home] text-2xl"> <IoIosSettings/></span>
+            </button>
+        </div>
+    );
+}
+
+export default TopMenu;

frontend/src/pages/Home.css

@@ -0,0 +1,8 @@
+.swipeable-cards-container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+

frontend/src/pages/Home.tsx

@@ -1,14 +1,7 @@
 import React, {useState} from 'react';
 
-// Import Swiper styles
-import "swiper/css";
-import "swiper/css/effect-coverflow";
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
 import SwipeableCard from "../components/SwipeableCard.tsx";
-
-// Initialize Swiper modules
-// SwiperCore.use([Navigation, Pagination]);
+import './Home.css'
 
 function Home() {
     const [cards] = useState([