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;