From d63f8131524017fb2f7593e5d52111a0d292fa60 Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Mon, 6 Dec 2021 18:33:34 +0200
Subject: [PATCH] Navigation bar from side to top.

---
 src/components/Header.tsx                 |  3 ---
 src/components/LanguagePicker.tsx         |  3 ++-
 src/components/NavBar.tsx                 | 18 ++++++++++++++++++
 src/components/SideNav.tsx                | 13 -------------
 src/components/styles/header.scss         |  6 ------
 src/components/styles/languagePicker.scss |  5 +++--
 src/components/styles/navBar.scss         |  5 +++++
 src/components/styles/sideNav.scss        |  3 ---
 src/pages/Main.tsx                        | 15 +++++----------
 src/pages/styles/main.scss                |  5 +++++
 10 files changed, 38 insertions(+), 38 deletions(-)
 create mode 100644 src/components/NavBar.tsx
 delete mode 100644 src/components/SideNav.tsx
 create mode 100644 src/components/styles/navBar.scss
 delete mode 100644 src/components/styles/sideNav.scss

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f149504..fec4a0c 100644
--- a/src/components/Header.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
index 757ed3f..61e9d65 100644
--- a/src/components/LanguagePicker.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..cf6f2e6
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
deleted file mode 100644
index d67f77d..0000000
--- a/src/components/SideNav.tsx
+++ /dev/null
@@ -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>
-    )
-}
\ No newline at end of file
diff --git a/src/components/styles/header.scss b/src/components/styles/header.scss
index c621690..4d7700e 100644
--- a/src/components/styles/header.scss
+++ b/src/components/styles/header.scss
@@ -11,9 +11,3 @@
 .App-header h1 {
   color: white;
 }
-
-.LanguagePicker-container {
-  display: flex;
-  justify-content: end;
-  width: 24%;
-}
diff --git a/src/components/styles/languagePicker.scss b/src/components/styles/languagePicker.scss
index 1e7ab41..a014158 100644
--- a/src/components/styles/languagePicker.scss
+++ b/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;
 }
diff --git a/src/components/styles/navBar.scss b/src/components/styles/navBar.scss
new file mode 100644
index 0000000..bae5853
--- /dev/null
+++ b/src/components/styles/navBar.scss
@@ -0,0 +1,5 @@
+.NavBar {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 1em;
+}
diff --git a/src/components/styles/sideNav.scss b/src/components/styles/sideNav.scss
deleted file mode 100644
index 9f805b8..0000000
--- a/src/components/styles/sideNav.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.SideNav {
-  width: 333px;
-}
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index d12cb31..70d564f 100644
--- a/src/pages/Main.tsx
+++ b/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 />
-                {page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
-                <div style={{ width: 333 }} />
-            </section>
-        </>
+        <section className="Main">
+            <NavBar />
+            {page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />}
+        </section>
     )
 }
\ No newline at end of file
diff --git a/src/pages/styles/main.scss b/src/pages/styles/main.scss
index e69de29..ff64676 100644
--- a/src/pages/styles/main.scss
+++ b/src/pages/styles/main.scss
@@ -0,0 +1,5 @@
+.Main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}