Starting Game MainMenu

webapp/src/components/content/game/cardmission/index.jsx

@@ -0,0 +1,11 @@
+function CardMission({mission}) {
+    return(
+        <div className="h-60 w-72 bg-slate-200 flex flex-col justify-start items-center gap-5">
+            <h2>Test</h2>
+            <div className="h-28 w-28 rounded-full bg-black"></div>
+            <button className="px-4 py-3 text-white bg-darkBlue">Play</button>
+        </div>
+    )
+}
+
+export default CardMission;

webapp/src/components/content/game/mainmenu/index.jsx

@@ -0,0 +1,11 @@
+import CardMission from "../cardmission";
+
+function MainMenu() {
+    return(
+        <main className="h-screen w-screens pl-32 bg-red-900 flex flex-row flex-wrap gap-4 p-4">
+            <CardMission />
+        </main>
+    );
+}
+
+export default MainMenu;

webapp/src/components/logo/index.jsx

@@ -0,0 +1,8 @@
+function Logo() {
+    return(
+        <div className="h-12 w-12 bg-red-500">
+        </div>
+    )
+}
+
+export default Logo;

webapp/src/components/navbarre/game/index.jsx

@@ -0,0 +1,15 @@
+import Logo from "../../logo";
+import NavListGame from "./navlist";
+import list from "../list";
+
+function NavbarreGame() {
+    return (
+        <nav className="h-full w-28 fixed top-0 left-0 bg-darkBlue flex flex-col justify-between items-center py-4 text-white">
+            <Logo />
+            <NavListGame list={list}/>
+            <div>by GPO</div>
+        </nav>
+    );
+}
+
+export default NavbarreGame;

webapp/src/components/navbarre/game/navlist/index.jsx

@@ -0,0 +1,20 @@
+// import NavLinks from "../navlinks";
+// import Link from "react";
+
+function NavListGame({list}) {
+    list.map((item, index) => {
+        console.log("Item: " + item + " Index: " + index);
+    });
+
+    return(
+        <ul className="flex flex-col justify-between items-center gap-3">
+            {list.map((item, index) => (
+                <li key={index} className="h-full flex justify-center items-center">
+                    <a href={item[1]} className="text-align">{item[0]}</a>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default NavListGame;

webapp/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import Home from "./pages/home";
 import Login from "./pages/login";
+import Game from "./pages/game";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -12,6 +13,7 @@ root.render(
           <Routes>
               <Route path="/" element={<Home />}/>
               <Route path="/login" element={<Login />}/>
+              <Route path="/game" element={<Game />}/>
           </Routes>
       </BrowserRouter>
   </React.StrictMode>

webapp/src/pages/game/index.jsx

@@ -0,0 +1,13 @@
+import NavbarreGame from "../../components/navbarre/game";
+import MainMenu from "../../components/content/game/mainmenu";
+
+function Game () {
+    return(
+        <div className="w-full h-full">
+            <NavbarreGame />
+            <MainMenu />
+        </div>
+    );
+}
+
+export default Game;