react-router-dom

frontend/src/App.tsx

@@ -1,10 +1,16 @@
 import { useEffect, useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
 import Navigation from './components/Navigation/Navigation';
 import DocsGPT from './components/DocsGPT';
+import APIKeyModal from './components/APIKeyModal';
 import './App.css';
 
-function App() {
+export default function App() {
+  //Currently using primitive state management. Will most likely be replaced with Redux.
   const [isMobile, setIsMobile] = useState(true);
+  const [isMenuOpen, setIsMenuOpen] = useState(true);
+  const [isApiModalOpen, setIsApiModalOpen] = useState(true);
+  const [apiKey, setApiKey] = useState('');
 
   const handleResize = () => {
     if (window.innerWidth > 768 && isMobile) {
@@ -24,11 +30,26 @@ function App() {
   }, []);
 
   return (
-    <div className={`${isMobile ? 'flex-col' : 'flex-row'} flex`}>
-      <Navigation isMobile={isMobile} />
-      <DocsGPT />
+    <div
+      className={`${
+        isMobile ? 'flex-col' : 'flex-row'
+      } relative flex transition-all`}
+    >
+      <APIKeyModal
+        apiKey={apiKey}
+        setApiKey={setApiKey}
+        isApiModalOpen={isApiModalOpen}
+        setIsApiModalOpen={setIsApiModalOpen}
+      />
+      <Navigation
+        isMobile={isMobile}
+        isMenuOpen={isMenuOpen}
+        setIsMenuOpen={setIsMenuOpen}
+        setIsApiModalOpen={setIsApiModalOpen}
+      />
+      <Routes>
+        <Route path="/" element={<DocsGPT isMenuOpen={isMenuOpen} />} />
+      </Routes>
     </div>
   );
 }
-
-export default App;