bind the new page

src/App.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Auth } from './components/auth';
+import { Auth, Login, Logout, NavBar, Overview } from './components';
 import { AuthProvider } from './contexts';
 import './App.css';
-import { Overview } from './components/overview';
 
 const App: React.FC = () => (
   <>
     <BrowserRouter>
       <AuthProvider>
-      <Routes>
+        <NavBar />
-        <Route index element={<Login />} />
+        <Routes>
-        <Route path='/auth' element={<Auth />} />
+          <Route index element={<Login />} />
-        <Route path='/overview' element={<Overview />} />
+          <Route path='/auth' element={<Auth />} />
-      </Routes>
+          <Route path='/overview' element={<Overview />} />
+          <Route path='/logout' element={<Logout />} />
+        </Routes>
       </AuthProvider>
     </BrowserRouter>
   </>

src/components/index.ts

@@ -0,0 +1,7 @@
+import { Auth } from './auth';
+import { Login } from './login';
+import { Logout } from './logout';
+import { NavBar } from './navbar';
+import { Overview } from './overview';
+
+export { Auth, Login, Logout, NavBar, Overview };