Implement basic structure

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>
+    );
+}