Create MainMenu component

src/app/index.tsx

@@ -8,6 +8,7 @@ import config from "../config"
 import "normalize.css/normalize.css"
 import "react-toastify/dist/ReactToastify.css"
 import styles from "./styles.module.scss"
+import MainMenu from "../components/Navigation/MainMenu"
 
 interface Route {
     route: { routes: RouteConfig[] }
@@ -23,10 +24,15 @@ const App = ({ route }: Route): JSX.Element => (
         </Helmet>
         <header className={styles.header}>
             <div className={styles.logo} />
-            <h1 className={styles.siteName}>
-                <Link to="/">{config.APP.title}</Link>
-            </h1>
-            <div className={styles.siteDescription}>{config.APP.description}</div>
+            <div className={styles.siteNameWrapper}>
+                <h1 className={styles.siteName}>
+                    <Link to="/">{config.APP.title}</Link>
+                </h1>
+                <div className={styles.siteDescription}>{config.APP.description}</div>
+            </div>
+            <div className={styles.menuWrapper}>
+                <MainMenu />
+            </div>
         </header>
         {/* Child routes won't render without this */}
         {renderRoutes(route.routes)}

src/app/styles.module.scss

@@ -32,6 +32,9 @@
     }
 }
 
+.siteNameWrapper {
+}
+
 .siteName {
     margin: 0;
     padding: 0;
@@ -54,3 +57,11 @@
     font-size: 14px;
     color: #555;
 }
+
+.menuWrapper {
+    position: absolute;
+    bottom: 5px;
+    left: 420px;
+    right: 10px;
+    text-align: center;
+}

src/components/Navigation/MainMenu.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react"
+import { useSelector } from "react-redux"
+import { isUserConnected } from "../../store/auth"
+import styles from "./styles.module.scss"
+
+const MainMenu: FC = (): JSX.Element | null => {
+    const connected = useSelector(isUserConnected)
+
+    if (!connected) return null
+
+    return (
+        <nav>
+            <ul className={styles.mainMenu}>
+                <li className={styles.mainMenuItem}>
+                    <a href="/">Mon espace</a>
+                </li>
+                <li className={styles.mainMenuItem}>
+                    <a href="/teams">Equipes</a>
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default MainMenu

src/components/Navigation/styles.module.scss

@@ -0,0 +1,23 @@
+@import "../../theme/variables";
+
+.mainMenu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.mainMenuItem {
+    display: inline-block;
+    margin: 0 4px;
+
+    a {
+        font-size: 0.9em;
+        font-weight: bold;
+        color: $color-black;
+        text-decoration: none;
+
+        &:hover {
+            color: $color-grey-dark;
+        }
+    }
+}

src/theme/variables.scss

@@ -2,6 +2,7 @@ $color-white: #fff;
 $color-black: #000;
 $color-orange: #ea4d0a;
 $color-yellow: #fdd137;
+$color-grey-dark: #555;
 
 $border-large: 4px solid $color-black;
 $border-thin: 2px solid $color-black;