feat: design my apps along with app layout

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

@@ -1,19 +1,27 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 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 MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import SettingsIcon from '@mui/icons-material/Settings';
 
 import HideOnScroll from 'components/HideOnScroll';
 import { FormattedMessage } from 'react-intl';
 
 type AppBarProps = {
-  onMenuClick: () => void;
+  drawerOpen: boolean;
+  onDrawerOpen: () => void;
+  onDrawerClose: () => void;
 };
 
-export default function AppBar({ onMenuClick }: AppBarProps) {
+export default function AppBar({ drawerOpen, onDrawerOpen, onDrawerClose }: AppBarProps) {
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <HideOnScroll>
@@ -24,17 +32,17 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
               edge="start"
               color="inherit"
               aria-label="open drawer"
-              onClick={onMenuClick}
+              onClick={drawerOpen ? onDrawerClose : onDrawerOpen}
               sx={{ mr: 2 }}
             >
-              <MenuIcon />
+              {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
             </IconButton>
 
             <Typography
               variant="h6"
               noWrap
               component="div"
-              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+              sx={{ flexGrow: 1 }}
             >
               <FormattedMessage id="brandText" />
             </Typography>