liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move the navigation to it's own file

Browse Source
This commit is contained in:
Spectralitree 2021-06-26 20:24:35 +02:00
parent ee2de19b28
commit c6747e2f65
2 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.js
View File

@ -1,20 +1,18 @@
import React, { useState, useCallback} from 'react'; import React, { useState, useCallback} from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom'; import { Router, Switch, Route, Redirect } from 'react-router-dom';
import * as BS from 'react-bootstrap' import * as BS from 'react-bootstrap'
import Toggle from 'react-toggle'
import useDarkMode from 'use-dark-mode';
import './App.scss'; import './App.scss';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import "react-toggle/style.css" import "react-toggle/style.css"
import { FaSun, FaMoon } from "react-icons/fa";
import Dash from './Pages/Dash.js' import Dash from './Pages/Dash.js'
import history from "./History.js"; import history from "./History.js"
import Footer from './Components/Footer.js' import Footer from './Components/Footer.js'
import Public from './Pages/Public.js' import Public from './Pages/Public.js'
import Home from './Pages/Home.js' import Home from './Pages/Home.js'
import Settings from './Pages/Settings.js' import Settings from './Pages/Settings.js'
import Navbar from './Components/Navbar.js'
export default function App() { export default function App() {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -23,38 +21,11 @@ export default function App() {
const [, updateState] = useState(); const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []); const forceUpdate = useCallback(() => updateState({}), []);
const darkMode = useDarkMode(false);
function logOut() {
setIsSubmit(false);
localStorage.removeItem("token");
localStorage.removeItem("user");
history.push("/pk-webs");
forceUpdate();
}
return ( return (
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}> <div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
<Router history={history} basename="/pk-webs"> <Router history={history} basename="/pk-webs">
<BS.Navbar className="mb-5 align-items-center"> <Navbar forceUpdate={forceUpdate} setIsSumbit={setIsSubmit} />
<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>
<div className="content"> <div className="content">
<BS.Container> <BS.Container>
<Switch> <Switch>

44
src/Components/Navbar.js Normal file
View File

@ -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;