Starting navabarre

webapp/package-lock.json

@@ -15,6 +15,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-i18next": "^13.5.0",
+        "react-router-dom": "^6.20.1",
         "react-scripts": "5.0.1",
         "tailwindcss": "^3.3.6",
         "translate": "^2.0.2",
@@ -3274,6 +3275,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14823,6 +14832,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
+      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
+      "dependencies": {
+        "@remix-run/router": "1.13.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
+      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
+      "dependencies": {
+        "@remix-run/router": "1.13.1",
+        "react-router": "6.20.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

webapp/package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
+    "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.3.6",
     "translate": "^2.0.2",

webapp/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

webapp/src/components/navbarre/list/list.js

@@ -0,0 +1,11 @@
+const list = [
+    ['Home', '/'],
+    ['About', '/about'],
+    ['Game', '/game'],
+    ['Login', '/login'],
+    ['Register', '/register'],
+    ['Profile', '/profile'],
+    ['Logout', '/logout'],
+];
+
+export default list;

webapp/src/components/navbarre/nav-links/index.jsx

@@ -0,0 +1,9 @@
+import Link from 'react';
+
+function NavLinks({text, link}) {
+    return(
+        <Link to={link} className="">{text}</Link>
+    )
+}
+
+export default NavLinks;

webapp/src/components/navbarre/navbarre-home/index.jsx

@@ -0,0 +1,13 @@
+import NavListHome from "../navlist-home";
+import list from "./list";
+
+function NavbarreHome() {
+    return(
+        <nav className="fixed top-0 left-0 h-24">
+            <div></div>
+            <NavListHome list={list}/>
+        </nav>
+    )
+}
+
+export default NavbarreHome;

webapp/src/components/navbarre/navlist-home/index.jsx

@@ -0,0 +1,15 @@
+import NavLinks from "../nav-links";
+
+function NavListHome({list}) {
+    return(
+        <ul className="flex flex-row justify-between items-center h-full">
+            {list.map((item, index) => (
+                <li key={index} className="h-full">
+                    <NavLinks text={item[0]} link={item[1]} />
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default NavListHome;