From c6747e2f659e145abc0063f00b6fb1ddd7709be3 Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Sat, 26 Jun 2021 20:24:35 +0200
Subject: [PATCH] move the navigation to it's own file

---
 src/App.js               | 35 +++-----------------------------
 src/Components/Navbar.js | 44 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 32 deletions(-)
 create mode 100644 src/Components/Navbar.js

diff --git a/src/App.js b/src/App.js
index a6b0e694..b284bb90 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,18 @@
 import React, { useState, useCallback} from 'react';
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import  * as BS from 'react-bootstrap'
-import Toggle from 'react-toggle'
-import useDarkMode from 'use-dark-mode';
 
 import './App.scss';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "react-toggle/style.css"
-import { FaSun, FaMoon } from "react-icons/fa";
 
 import Dash from './Pages/Dash.js'
-import history from "./History.js";
+import history from "./History.js"
 import Footer from './Components/Footer.js'
 import Public from './Pages/Public.js'
 import Home from './Pages/Home.js'
 import Settings from './Pages/Settings.js'
+import Navbar from './Components/Navbar.js'
 
 export default function App() {
   const [isLoading, setIsLoading] = useState(false);
@@ -23,38 +21,11 @@ export default function App() {
 
   const [, updateState] = useState();
   const forceUpdate = useCallback(() => updateState({}), []);
-  const darkMode = useDarkMode(false);
-
-  function logOut() {
-    setIsSubmit(false);
-    localStorage.removeItem("token");
-    localStorage.removeItem("user");
-    history.push("/pk-webs");
-    forceUpdate();
-  }
 
   return (
     <div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
       <Router history={history} basename="/pk-webs">
-      <BS.Navbar className="mb-5 align-items-center">
-            <BS.Navbar.Brand href="/pk-webs">
-                pk-webs
-            </BS.Navbar.Brand>
-            <BS.NavDropdown id="menu" className="mr-auto" title="Menu">
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
-            { localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }
-
-            </BS.NavDropdown>
-            <BS.Nav className="mr-2 d-flex align-items-center row">
-            <Toggle
-                defaultChecked={true}
-                icons={false}
-                onChange={darkMode.toggle} />
-                {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
-            </BS.Nav>
-        </BS.Navbar>
+        <Navbar forceUpdate={forceUpdate} setIsSumbit={setIsSubmit} />
         <div className="content">
           <BS.Container>
             <Switch>
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
new file mode 100644
index 00000000..160c0bc3
--- /dev/null
+++ b/src/Components/Navbar.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import  * as BS from 'react-bootstrap'
+import Toggle from 'react-toggle'
+import { FaSun, FaMoon } from "react-icons/fa";
+import useDarkMode from 'use-dark-mode';
+
+import history from "../History.js";
+
+const Navbar = ({ setIsSubmit, forceUpdate}) => {
+    const darkMode = useDarkMode(false);
+
+    function logOut() {
+        setIsSubmit(false);
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        history.push("/pk-webs");
+        forceUpdate();
+      }
+
+    return(
+        <BS.Navbar className="mb-5 align-items-center">
+            <BS.Navbar.Brand href="/pk-webs">
+                pk-webs
+            </BS.Navbar.Brand>
+            <BS.NavDropdown id="menu" className="mr-auto" title="Menu">
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
+            { localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }
+
+            </BS.NavDropdown>
+            <BS.Nav className="mr-2 d-flex align-items-center row">
+            <Toggle
+                defaultChecked={true}
+                icons={false}
+                onChange={darkMode.toggle} />
+                {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
+            </BS.Nav>
+        </BS.Navbar>
+    );
+}
+
+export default Navbar;
\ No newline at end of file