Added basic pages with routes.

Robert-M-Lucas · Apr 15, 2024 · 7694bfe · 7694bfe
1 parent 9127f20
commit 7694bfe
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -7,22 +7,29 @@ interface Props {
 export function Header({ user }: Props) {
     const {width, height} = useWindowDimensions();
     const aspect_ratio = (width == 0 ? 1 : width) / (height == 0 ? 1 : height);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const use_narrow = aspect_ratio < 1.3;
 
     return <header className="p-3 text-bg-dark">
+
         <div className="container">
             <div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+
+                {/*App Name reloads home page*/}
                 <div className="col-sm-auto" style={{marginRight:"20px"}}>
                     <a href="/" className="d-flex align-items-center mb-2 mb-lg-0 text-white" style={{textDecoration: "none"}}>
-                        <h3 style={{marginBottom:"0", textAlign:"center"}}>{use_narrow ? "Narrow" : "Header"}</h3>
+                        <h3 style={{marginBottom:"0", textAlign:"center"}}>{use_narrow ? "Narrow" : "Budget19"}</h3>
                     </a>
                 </div>
 
+                {/*Pages*/}
                 <ul className={"nav " + (use_narrow ? "me-3 " : "col-12 ") + "col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"}>
-                    <li><a href="/" className="nav-link px-2 text-white  fw-bold ">Page 1</a></li>
 
-                    <li><a href="/" className="nav-link px-2 text-white ">Page 2</a></li>
+                    {/*Links to dashboard with tiles*/}
+                    <li><a href="/dash" className="nav-link px-2 text-white">Dashboard</a></li>
+
+                    {/*Links to transactions page with table of expenses*/}
+                    <li><a href="/transactions" className="nav-link px-2 text-white">Transactions</a></li>
+
                 </ul>
 
                 <div className="text-end">

diff --git a/src/router.tsx b/src/router.tsx
@@ -93,20 +93,29 @@ const tileset_weird: Array<{ text: string; rows: number; cols: number }> = [
 ];
 
 export const router = createBrowserRouter([
+    // Header Links:
     {
         path: "/",
         element: <IndexPage/>,
         errorElement: <_404Page/>
     },
+    {
+        path: "/dash",
+        element: <DashboardPage tiles={tileset_many}/>,
+    },
+    {
+        path: "/transactions",
+        element: <SampleModal/>,
+    },
+    // -->
+
+
     {
         path: "/user-test",
         element: <IndexPage user={"testUserName"}/>,
         errorElement: <_404Page/>
     },
-    {
-        path: "/dash",
-        element: <DashboardPage tiles={tileset_defult}/>,
-    },
+
     {
         path: "/dash-2",
         element: <DashboardPage tiles={tileset_column}/>,