base layout

src/client/components/DashboardLayout.tsx

@@ -8,10 +8,19 @@ import {
 	Toolbar,
 	Typography,
 } from "@mui/material";
+import { useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
+import type { FileRouteTypes } from "../routeTree.gen";
 import { RouterButton } from "./RouterButton";
 
-const pages = ["Products", "Pricing", "Blog"];
+type ValidRoutes = FileRouteTypes["to"];
+
+interface Page {
+	title: string;
+	to: ValidRoutes;
+}
+
+const pages: Page[] = [{ title: "Announcements", to: "/" }];
 
 export default function DashboardLayout({
 	children,
@@ -28,16 +37,10 @@ export default function DashboardLayout({
 		setAnchorElNav(null);
 	};
 
+	const navigate = useNavigate();
+
 	return (
-		<Box
-			sx={{
-				position: "relative",
-				display: "flex",
-				overflow: "hidden",
-				height: "100%",
-				width: "100%",
-			}}
-		>
+		<Box>
 			<AppBar position="static">
 				<Toolbar>
 					{/* desktop */}
@@ -78,8 +81,16 @@ export default function DashboardLayout({
 							sx={{ display: { xs: "block", md: "none" } }}
 						>
 							{pages.map((page) => (
-								<MenuItem key={page} onClick={handleCloseNavMenu}>
-									<Typography sx={{ textAlign: "center" }}>{page}</Typography>
+								<MenuItem
+									key={page.to}
+									onClick={() => {
+										handleCloseNavMenu();
+										navigate({ to: page.to });
+									}}
+								>
+									<Typography sx={{ textAlign: "center" }}>
+										{page.title}
+									</Typography>
 								</MenuItem>
 							))}
 						</Menu>
@@ -96,37 +107,28 @@ export default function DashboardLayout({
 					<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
 						{pages.map((page) => (
 							<RouterButton
-								key={page}
+								key={page.to}
 								onClick={handleCloseNavMenu}
 								sx={{ my: 2, color: "white", display: "block" }}
-								to="."
+								to={page.to}
 							>
-								{page}
+								{page.title}
 							</RouterButton>
 						))}
 					</Box>
 				</Toolbar>
 			</AppBar>
 			<Box
+				component="main"
 				sx={{
+					m: 8,
 					display: "flex",
 					flexDirection: "column",
 					flex: 1,
-					minWidth: 0,
+					overflow: "auto",
 				}}
 			>
-				<Toolbar sx={{ displayPrint: "none" }} />
-				<Box
-					component="main"
-					sx={{
-						display: "flex",
-						flexDirection: "column",
-						flex: 1,
-						overflow: "auto",
-					}}
-				>
-					{children}
-				</Box>
+				{children}
 			</Box>
 		</Box>
 	);

src/client/routeTree.gen.ts

@@ -9,27 +9,51 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
 
-export interface FileRoutesByFullPath {}
-export interface FileRoutesByTo {}
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: never
+  fullPaths: '/'
   fileRoutesByTo: FileRoutesByTo
-  to: never
-  id: '__root__'
+  to: '/'
+  id: '__root__' | '/'
   fileRoutesById: FileRoutesById
 }
-export interface RootRouteChildren {}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
 }
 
-const rootRouteChildren: RootRouteChildren = {}
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()

src/client/routes/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return <div>Hello "/"!</div>;
+}