feat: add primitive profile settings

packages/web/src/components/SettingsLayout/index.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+
+import * as URLS from 'config/urls';
+import AppBar from 'components/AppBar';
+import Drawer from 'components/Drawer';
+
+type SettingsLayoutProps = {
+  children: React.ReactNode;
+}
+
+const drawerLinks = [
+  {
+    Icon: AccountCircleIcon,
+    primary: 'settingsDrawer.myProfile',
+    to: URLS.SETTINGS_PROFILE,
+  },
+];
+
+const drawerBottomLinks = [
+  {
+    Icon: ArrowBackIosNewIcon,
+    primary: 'settingsDrawer.goBack',
+    to: '/',
+  }
+];
+
+export default function SettingsLayout({ children }: SettingsLayoutProps): React.ReactElement {
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
+
+  const openDrawer = () => setDrawerOpen(true);
+  const closeDrawer = () => setDrawerOpen(false);
+
+  return (
+    <>
+      <AppBar drawerOpen={isDrawerOpen} onDrawerOpen={openDrawer} onDrawerClose={closeDrawer} />
+
+      <Box sx={{ display: 'flex', }}>
+        <Drawer
+          links={drawerLinks}
+          bottomLinks={drawerBottomLinks}
+          open={isDrawerOpen}
+          onOpen={openDrawer}
+          onClose={closeDrawer}
+        />
+
+        <Box sx={{ flex: 1, }}>
+          <Toolbar />
+
+          {children}
+        </Box>
+      </Box>
+    </>
+  );
+}