renamed NavBar to TopBar to avoid conflicts with Bootstrap's Navbar

src/App.js

@@ -1,6 +1,7 @@
 import "./css/overlay.css";
 import Layout from "./components/Layout";
 import Loader from "./components/Loader";
+import Settings from "./components/Settings";
 // import Test from "./components/Test";
 import React, { useState, useEffect } from "react";
 import { io } from "socket.io-client";
@@ -50,6 +51,7 @@ function App() {
               path="/home"
               element={<Layout socket={socketInstance} />}
             />
+            <Route exact path="/settings" element={<Settings />} />
             <Route path="*" element={"not found"} />
           </Routes>
         </Router>

src/components/Layout.js

@@ -2,7 +2,7 @@ import "../css/layout.css";
 import { useState, useEffect } from "react";
 import Paper from "./Paper";
 import View3D from "./View3D";
-import TopBar from "./Navbar";
+import TopBar from "./TopBar";
 import SplitPane from "react-split-pane";
 
 function Layout({ socket }) {

src/components/Loader.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { FcOpenedFolder, FcFile } from "react-icons/fc";
 import { useNavigate } from "react-router-dom";
 import { Table } from "react-bootstrap";
-import TopBar from "./Navbar";
+import TopBar from "./TopBar";
 import "../css/loader.css";
 import "../css/overlay.css";
 

src/components/Settings.js

@@ -0,0 +1,7 @@
+import TopBar from "./TopBar";
+
+function Settings() {
+  return <></>;
+}
+
+export default Settings;