feat: design my apps along with app layout

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Button from '@mui/material/Button';
+
+import { IconButton } from './style';
+
+export default function ConditionalIconButton(props: any) {
+  const { Icon, ...buttonProps } = props;
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
+
+  if (matchSmallScreens) {
+    return (
+      <IconButton
+        color={buttonProps.color}
+        type={buttonProps.type}
+        size={buttonProps.size}
+        component={buttonProps.component}
+        to={buttonProps.to}
+      >
+        <Icon />
+      </IconButton>
+    )
+  }
+
+  return (
+    <Button {...buttonProps} />
+  );
+}

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

@@ -0,0 +1,13 @@
+import { styled } from '@mui/material/styles';
+import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
+
+export const IconButton = styled(MuiIconButton)`
+  &.${iconButtonClasses.colorPrimary} {
+    background: ${({ theme }) => theme.palette.primary.main};
+    color: ${({ theme }) => theme.palette.primary.contrastText};
+
+    &:hover {
+      background: ${({ theme }) => theme.palette.primary.dark};
+    }
+  }
+` as typeof MuiIconButton;