Update app routing

src/App.tsx

@@ -1,27 +1,45 @@
 import { useEffect } from 'react';
 import { Switch } from 'react-router-dom';
-import { ProtectedRoute, AuthRoute } from './components';
+import { useReactiveVar } from '@apollo/client';
-import { tokenVar } from './graphql/state';
+import { ProtectedRoute, AuthRoute, Navbar, Sidebar } from './components';
+import { roleVar, tokenVar } from './graphql/state';
 import {
   AdditionalInfo,
   ForgotPassword,
   Login,
   RecoverAccount,
   Signup,
-  Main,
+  Project,
+  Settings,
 } from './pages';
 
 const App = () => {
-  useEffect(() => {
+  const token = useReactiveVar(tokenVar);
-    const token = localStorage.getItem('token');
+  const role = useReactiveVar(roleVar);
 
-    if (token) tokenVar(token);
+  useEffect(() => {
+    const localStorageToken = localStorage.getItem('token');
+
+    if (localStorageToken) tokenVar(localStorageToken);
   }, []);
 
   return (
+    <>
+      {token && (
+        <>
+          <Navbar withSidebar={role !== 'admin'} />
+          {role !== 'admin' && <Sidebar />}
+        </>
+      )}
       <Switch>
         <ProtectedRoute path='/' exact>
-        <Main />
+          <Project />
+        </ProtectedRoute>
+        <ProtectedRoute path='/project' exact>
+          <Project />
+        </ProtectedRoute>
+        <ProtectedRoute path='/settings' exact>
+          <Settings />
         </ProtectedRoute>
         <AuthRoute path='/login' exact>
           <Login />
@@ -39,6 +57,7 @@ const App = () => {
           <RecoverAccount />
         </AuthRoute>
       </Switch>
+    </>
   );
 };