feat: Add Layout with AppBar and Drawer

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

@@ -0,0 +1,62 @@
+import MuiAppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import MenuIcon from '@mui/icons-material/Menu';
+import SearchIcon from '@mui/icons-material/Search';
+
+import HideOnScroll from 'components/HideOnScroll';
+import { FormattedMessage } from 'react-intl';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { Search, SearchIconWrapper, InputBase } from './style';
+
+type AppBarProps = {
+  onMenuClick: () => void;
+};
+
+export default function AppBar({ onMenuClick }: AppBarProps) {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <HideOnScroll>
+        <MuiAppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+          <Toolbar>
+            <IconButton
+              size="large"
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={onMenuClick}
+              sx={{ mr: 2 }}
+            >
+              {/* TODO: make Drawer in Layout togglable. */}
+              <MenuIcon />
+            </IconButton>
+
+            <Typography
+              variant="h6"
+              noWrap
+              component="div"
+              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+            >
+              <FormattedMessage id="automatisch" />
+            </Typography>
+
+            <Search>
+              <SearchIconWrapper>
+                <SearchIcon />
+              </SearchIconWrapper>
+
+              <InputBase
+                placeholder={formatMessage('searchPlaceholder')}
+                inputProps={{ 'aria-label': 'search' }}
+              />
+            </Search>
+          </Toolbar>
+        </MuiAppBar>
+      </HideOnScroll>
+    </Box>
+  );
+}

packages/web/src/components/AppBar/style.ts

@@ -0,0 +1,44 @@
+import { styled, alpha } from '@mui/material/styles';
+import MuiInputBase from '@mui/material/InputBase';
+
+export const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(1),
+    width: 'auto',
+  },
+}));
+
+export const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export const InputBase = styled(MuiInputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '12ch',
+      '&:focus': {
+        width: '20ch',
+      },
+    },
+  },
+}));