webserver-framework-frontend/src/App.js

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

function App() {

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

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

];

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

          <BrowserRouter>

            <Sidebar>
              SIDEBAR
              <SidebarMenu menuItems={menuItems}>

              </SidebarMenu>
            </Sidebar>

            <div className='main-content'>
              <ErrorBoundary>
                <Routes>
                  <Route exact path='/' element={<Home />} />
                </Routes>
              </ErrorBoundary>
            </div>


          </BrowserRouter>

        </div>
      : <Login />}
    
    </div>
  );
}

export default App;