Navigation bar from side to top.

src/components/Header.tsx

@@ -7,9 +7,6 @@ export const Header = () => {
         <header className="App-header">
             <h1><FormattedMessage id="common.title" /></h1>
             <p><i><FormattedMessage id="common.subtitle" /></i></p>
-            <div className="LanguagePicker-container">
-                <LanguagePicker />
-            </div>
         </header>
     )
 }

src/components/LanguagePicker.tsx

@@ -1,4 +1,5 @@
 import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined';
+import GlobalOutlined from '@ant-design/icons/lib/icons/GlobalOutlined';
 import { Dropdown, Menu } from 'antd';
 import { useRecoilState } from 'recoil';
 import { currentLanguage } from '../atoms/language';
@@ -18,7 +19,7 @@ export const LanguagePicker = () => {
 
     return (
         <Dropdown overlay={menu} trigger={["click"]}>
-            <span className="dropdown">{lang} <DownOutlined /></span>
+            <span className="dropdown"><GlobalOutlined /> <DownOutlined /></span>
         </Dropdown>
     )
 }

src/components/NavBar.tsx

@@ -0,0 +1,18 @@
+import "./styles/navBar.scss";
+import { Link } from 'react-router-dom';
+import { LanguagePicker } from './LanguagePicker';
+import { Button, Menu } from 'antd';
+
+export const NavBar = () => {
+    return (
+        <Menu className="NavBar" mode="horizontal">
+            <Menu.Item><Link to="/menu">Menu</Link></Menu.Item>
+            <Menu.Item><Link to="/program">Program</Link></Menu.Item>
+            <Menu.Item><Link to="/program">Info</Link></Menu.Item>
+            <Menu.Item><Button type="primary">asd</Button></Menu.Item>
+            <Menu.Item>
+                <LanguagePicker />
+            </Menu.Item>
+        </Menu>
+    )
+}

src/components/SideNav.tsx

@@ -1,13 +0,0 @@
-import "./styles/sideNav.scss";
-import { Link } from 'react-router-dom';
-
-export const SideNav = () => {
-    return (
-        <aside className="SideNav">
-            <ul>
-                <li><Link to="/menu">Menu</Link></li>
-                <li><Link to="/program">Program</Link></li>
-            </ul>
-        </aside>
-    )
-}

src/components/styles/header.scss

@@ -11,9 +11,3 @@
 .App-header h1 {
   color: white;
 }
-
-.LanguagePicker-container {
-  display: flex;
-  justify-content: end;
-  width: 24%;
-}

src/components/styles/languagePicker.scss

@@ -1,6 +1,7 @@
 .ant-dropdown-trigger.dropdown {
-  width: 50px;
+  padding-right: 7px;
+  padding-left: 7px;
+  padding-top: 1px;
   border-radius: 5%;
   margin-bottom: 10px;
-  background-color: dimgray;
 }

src/components/styles/navBar.scss

@@ -0,0 +1,5 @@
+.NavBar {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 1em;
+}

src/components/styles/sideNav.scss

@@ -1,3 +0,0 @@
-.SideNav {
-  width: 333px;
-}

src/pages/Main.tsx

@@ -2,8 +2,7 @@ import "./styles/main.scss";
 
 import { useParams } from "react-router-dom";
 import { Menu } from '../components/Menu';
-import { Header } from '../components/Header';
-import { SideNav } from '../components/SideNav';
+import { NavBar } from '../components/NavBar';
 import { Program } from '../components/Program';
 import { NotFound } from '../components/NotFound';
 
@@ -15,13 +14,9 @@ export const Main = () => {
     const { page } = useParams<MainParams>()
 
     return (
-        <>
-            <Header />
-            <section className="App-content">
-                <SideNav />
+        <section className="Main">
+            <NavBar />
             {page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
-                <div style={{ width: 333 }} />
         </section>
-        </>
     )
 }

src/pages/styles/main.scss

@@ -0,0 +1,5 @@
+.Main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}