feat(frontend): light/dark mode switch

1 files changed, 29 insertions, 0 deletions

diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
new file mode 100644
index 00000000..5ac74e7a
--- /dev/null
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -0,0 +1,29 @@
+import MenuIcon from '@mui/icons-material/Menu';
+import AppBar from '@mui/material/AppBar';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+import ToggleDarkModeButton from './ToggleDarkModeButton';
+
+export default function TopBar(): JSX.Element {
+  return (
+    <AppBar position="static" color="primary">
+      <Toolbar>
+        <IconButton
+          edge="start"
+          sx={{ mr: 2 }}
+          color="inherit"
+          aria-label="menu"
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" component="h1" flexGrow={1}>
+          Refinery
+        </Typography>
+        <ToggleDarkModeButton />
+      </Toolbar>
+    </AppBar>
+  );
+}