Implement basic structure

src/App.tsx

@@ -1,23 +1,22 @@
-import { Card, CardContent, Container, ThemeProvider, Typography } from '@mui/material';
+import { ThemeProvider } from '@mui/material';
 import { Theme } from './Theme.ts';
+import { BrowserRouter, Route, Routes } from 'react-router';
+import { Content } from './layout/Content.tsx';
+import { Home } from './pages/Home.tsx';
+import { About } from './pages/About.tsx';
 
 function App() {
     return (
         <>
             <ThemeProvider theme={Theme}>
-                <Container>
+                <BrowserRouter>
-                    <Card>
+                    <Content>
-                        <CardContent sx={{ height: '2000px' }}>
+                        <Routes>
-                            <Typography
+                            <Route index path='home' element={<Home />} />
-                                // sx={(theme) => ({ color: theme.palette.text.secondary })}
+                            <Route path='about' element={<About />} />
-                                fontSize={36}
+                        </Routes>
-                                fontFamily='hammersmith-one'
+                    </Content>
-                            >
+                </BrowserRouter>
-                                Hello, World!
-                            </Typography>
-                        </CardContent>
-                    </Card>
-                </Container>
             </ThemeProvider>
         </>
     );

src/layout/Content.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@mui/material';
+import React, { type PropsWithChildren, type ReactElement } from 'react';
+import { TopBar } from './TopBar.tsx';
+
+export type ContentProps = PropsWithChildren;
+
+export function Content({ children }: ContentProps): ReactElement {
+    return (
+        <Box sx={{ width: { xs: '100%', md: '80%' }, margin: 'auto' }}>
+            <TopBar />
+            {children}
+        </Box>
+    );
+}

src/layout/TopBar.tsx

@@ -0,0 +1,29 @@
+import React, { type ReactElement } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useLocation, useNavigate } from 'react-router';
+
+const ValidTabs = ['home', 'about', 'contact'] as const satisfies string[];
+
+export function TopBar(): ReactElement {
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
+    const selectedTab =
+        ValidTabs.find((tabName) => pathname.toLowerCase().startsWith('/' + tabName)) ??
+        ValidTabs[0];
+
+    return (
+        <Box sx={{ width: '100%', marginBottom: '10px', boxShadow: '0 3px 5px -5px white' }}>
+            <Tabs
+                variant='fullWidth'
+                centered
+                sx={{ fontSize: 32 }}
+                value={selectedTab}
+                onChange={(_, value) => navigate('/' + value)}
+            >
+                {ValidTabs.map((tab) => (
+                    <Tab key={tab} label={tab} value={tab} />
+                ))}
+            </Tabs>
+        </Box>
+    );
+}

src/pages/About.tsx

@@ -0,0 +1,5 @@
+import { Fragment, type ReactElement } from 'react';
+
+export function About(): ReactElement {
+    return <Fragment>Hello, About.</Fragment>;
+}

src/pages/Home.tsx

@@ -0,0 +1,11 @@
+import React, { type ReactElement } from 'react';
+import { Card, CardContent, CardHeader } from '@mui/material';
+
+export function Home(): ReactElement {
+    return (
+        <Card>
+            <CardHeader title='Home'></CardHeader>
+            <CardContent>Hello, others</CardContent>
+        </Card>
+    );
+}