Router Revamp

src/components/layout.tsx

@@ -17,7 +17,9 @@ const DefaultLayout: React.FC<LayoutProps> = ({ children=null }) => {
       ) : (
         <Navbar />
       )}
-      {children}
+      <div style={{marginTop: "105px"}}>
+        {children}
+      </div>
     </>
   );
 };

src/components/shared/NavBar.tsx

@@ -20,13 +20,13 @@ function Navbar() {
     <div>
       <div className={styles.overallHeader}>
         <div>
-          <a href="/public">
+          <Link to="/">
             <img
               src={fintechLogo}
               alt="fintech Logo"
               className={styles.fintechLogo}
             />
-          </a>
+          </Link>
         </div>
         <div>
           <Link to="/announcements" className={styles.Link}>

src/components/shared/NavBarMobile.tsx

@@ -12,11 +12,13 @@ function NavBarMobile() {
     <header>
       <div className={styles.overallHeader}>
         <div>
+          <Link to="/">
           <img
             src={fintechLogo}
             alt="fintech Logo"
             className={styles.fintechLogo}
           />
+          </Link>
         </div>
         <div>
           {showSideBar ? (

src/components/shared/Announcements.tsx → src/pages/Announcements.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 const Announcements: React.FC = () => {
+  console.log("i am here ")
   return (
     <div>
       <h1>Announcements</h1>

src/components/shared/Home.tsx → src/pages/Home.tsx

@@ -1,11 +1,8 @@
 import React from "react";
-import Navbar from "./NavBar.tsx";
-import NavbarMobile from "./NavBarMobile.tsx";
 
 const Home: React.FC = () => {
   return (
     <div>
-      <Navbar />
       <h1>Home</h1>
     </div>
   );

src/components/shared/Members.tsx → src/pages/Members.tsx

@@ -3,7 +3,7 @@ import React from "react";
 const Members: React.FC = () => {
   return (
     <div>
-      <h1>members</h1>
+      <h1>Members</h1>
     </div>
   );
 };

src/routes/App.tsx

@@ -1,9 +1,10 @@
 import DefaultLayout from "components/layout.tsx";
+import { Outlet } from "react-router-dom";
 
 
 const App = () => {
     return (
-      <DefaultLayout/>
+      <DefaultLayout children={<Outlet />}/>
     );
 };
 

src/routes/router.tsx

@@ -1,6 +1,40 @@
 import { createBrowserRouter } from "react-router-dom";
-import routesConfig from "routes/routesConfig.ts";
+import TestPage from "./shared/TestPage.tsx";
+import App from "./App.tsx";
+import Home from "@/pages/Home.tsx";
+import Announcements from "@/pages/Announcements.tsx";
+import Members from "@/pages/Members.tsx";
+import Tasks from "@/pages/Tasks.tsx";
+import Events from "@/pages/Events.tsx";
 
-const router = createBrowserRouter(routesConfig);
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [{
+      path: '/',
+      element: <Home />
+    },
+    {
+      path: 'announcements',
+      element: <Announcements />
+    },
+    {
+      path: 'members',
+      element: <Members />
+    },
+    {
+      path: 'events',
+      element: <Events />
+    }, {
+      path: 'tasks',
+      element: <Tasks />
+    }]
+  },
+  {
+    path: "/test",
+    Component: TestPage,
+  }
+]);
 
 export default router;