D3visionNL
2dfb996cde
- Fixed random things. - Added a footer. - Changed menu styling to be more pleasing. - Made menu turn into hamburger dropdown menu so this dashboard is somewhat okay to use on mobile. - Made a log out menu button for the mobile people. - Made the entire layout work on mobile. - Fixed the shit I broke along the way. It's 2:30am now, time for bed.
106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
|
||
|
||
import './css/App.css';
|
||
import Home from './pages/Home';
|
||
import ErrorBoundary from './util/ErrorBoundary';
|
||
import Sidebar, { SidebarMenu } from './components/Sidebar';
|
||
import UserControls from './components/UserControls';
|
||
import { useLoginContext } from './structures/UserContext';
|
||
import Login from './pages/Login';
|
||
import { fetchUser } from './util/Util';
|
||
import PrivateRoute from './structures/PrivateRoute';
|
||
import { UnauthedRoute } from './structures/UnauthedRoute';
|
||
import Users from './pages/Users';
|
||
import Admin from './pages/Admin';
|
||
import TitledPage from './components/TitledPage';
|
||
import Register from './pages/Register';
|
||
|
||
function App() {
|
||
|
||
const [user, updateUser] = useLoginContext();
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
await fetchUser();
|
||
updateUser();
|
||
setLoading(false);
|
||
})();
|
||
}, []);
|
||
|
||
const menuItems = [
|
||
{ to: '/home', label: 'Home', items: [{ to: '/profile', label: 'Profile', relative: true }] },
|
||
{ to: '/users', label: 'Users' },
|
||
{ to: '/admin', label: 'Admin' }
|
||
];
|
||
|
||
if (loading) return null;
|
||
|
||
return (
|
||
<div className='app is-full-screen'>
|
||
|
||
<div className='background'>
|
||
|
||
<BrowserRouter>
|
||
|
||
{user ?
|
||
<div>
|
||
<header className="card">
|
||
<UserControls />
|
||
</header>
|
||
<Sidebar>
|
||
<SidebarMenu menuItems={menuItems} />
|
||
</Sidebar>
|
||
</div>
|
||
: null}
|
||
|
||
<div className={`main-content ${user ? "" : "login"}`}>
|
||
<ErrorBoundary>
|
||
<Routes>
|
||
|
||
<Route path='/home/*' element={<PrivateRoute>
|
||
<TitledPage title='Home'>
|
||
<Home />
|
||
</TitledPage>
|
||
</PrivateRoute >} />
|
||
|
||
<Route path='/users/*' element={<PrivateRoute>
|
||
<TitledPage title='Users' >
|
||
<Users />
|
||
</TitledPage>
|
||
</PrivateRoute >} />
|
||
|
||
<Route path='/admin/*' element={<PrivateRoute>
|
||
<Admin />
|
||
</PrivateRoute >} />
|
||
|
||
<Route path='/login/*' element={<UnauthedRoute>
|
||
<Login />
|
||
</UnauthedRoute>} />
|
||
|
||
<Route path='/register/*' element={<UnauthedRoute>
|
||
<Register />
|
||
</UnauthedRoute>} />
|
||
|
||
<Route path='*' element={<Navigate to='/home' />} />
|
||
|
||
</Routes>
|
||
</ErrorBoundary>
|
||
|
||
<div className={`footer ${user ? "" : "login"}`}>
|
||
<p className='m-0'>Made with ❤️ by <a href="https://corgi.wtf" target="_blank" rel="noreferrer">Navy.gif</a> | CSS by <a href="https://d3vision.dev" target="_blank" rel="noreferrer">D3vision</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
</BrowserRouter>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|