📱 Make the design way more responsive for mobile

src/components/layout/Aside.tsx

@@ -1,4 +1,5 @@
-import { Aside as MantineAside, Group } from '@mantine/core';
+import { Aside as MantineAside, createStyles, Group } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import {
   WeatherModule,
   DateModule,
@@ -8,12 +9,29 @@ import {
 } from '../modules';
 import { ModuleWrapper } from '../modules/moduleWrapper';
 
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
+
 export default function Aside(props: any) {
+  const { classes, cx } = useStyles();
+  const matches = useMediaQuery('(min-width: 800px)');
+
   return (
     <MantineAside
       pr="md"
-      hiddenBreakpoint="md"
+      hiddenBreakpoint="sm"
       hidden
+      className={cx(classes.hide)}
       style={{
         border: 'none',
       }}
@@ -21,13 +39,15 @@ export default function Aside(props: any) {
         base: 'auto',
       }}
     >
-      <Group my="sm" grow direction="column" style={{ width: 300 }}>
-        <ModuleWrapper module={CalendarModule} />
-        <ModuleWrapper module={TotalDownloadsModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={SystemModule} />
-      </Group>
+      {matches && (
+        <Group my="sm" grow direction="column" style={{ width: 300 }}>
+          <ModuleWrapper module={CalendarModule} />
+          <ModuleWrapper module={TotalDownloadsModule} />
+          <ModuleWrapper module={WeatherModule} />
+          <ModuleWrapper module={DateModule} />
+          <ModuleWrapper module={SystemModule} />
+        </Group>
+      )}
     </MantineAside>
   );
 }