diff --git a/src/app/index.tsx b/src/app/index.tsx
index cddecaf..aa4495e 100755
--- a/src/app/index.tsx
+++ b/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 => (
-
- {config.APP.title}
-
- {config.APP.description}
+
+
+ {config.APP.title}
+
+
{config.APP.description}
+
+
+
+
{/* Child routes won't render without this */}
{renderRoutes(route.routes)}
diff --git a/src/app/styles.module.scss b/src/app/styles.module.scss
index 65a04e6..494b962 100755
--- a/src/app/styles.module.scss
+++ b/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;
+}
diff --git a/src/components/Navigation/MainMenu.tsx b/src/components/Navigation/MainMenu.tsx
new file mode 100644
index 0000000..6bea368
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default MainMenu
diff --git a/src/components/Navigation/styles.module.scss b/src/components/Navigation/styles.module.scss
new file mode 100644
index 0000000..f723e53
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 5c9b523..e1b5783 100755
--- a/src/theme/variables.scss
+++ b/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;