webserver-framework-frontend/src/App.js

import React, { useEffect } 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';

function App() {

  const [user] = useLoginContext();
  
  useEffect(() => {
    fetchUser();
  }, []);

  const menuItems = [
    { to: '/home', label: 'Home' },
    { to: '/users', label: 'Users' },
    { to: '/admin', label: 'Admin' }

];

  return (
    <div className='app'>
      
      <header>
        <UserControls />
      </header>
      
      <div className='background'>

          <BrowserRouter>

          {user ? 
            <Sidebar>
              SIDEBAR
              <SidebarMenu menuItems={menuItems} />
            </Sidebar>
            : null}

            <div className='main-content'>
              <ErrorBoundary>
                <Routes>
                <Route path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} />
                <Route path='/users/*' element={<PrivateRoute><Users /></PrivateRoute >} />
                <Route path='/admin/*' element={<PrivateRoute><Admin /></PrivateRoute >} />
                <Route path='/login/*' element={<UnauthedRoute><Login /></UnauthedRoute>} />
                <Route path='*' element={<Navigate to='/home' />} />
                </Routes>
              </ErrorBoundary>
            </div>


          </BrowserRouter>

        </div>
    
    </div>
  );
}

export default App;