📱 Make the design way more responsive for mobile

src/components/layout/Layout.tsx

@@ -1,16 +1,37 @@
-import { AppShell, createStyles } from '@mantine/core';
+import { AppShell, createStyles, Group } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+import {
+  CalendarModule,
+  TotalDownloadsModule,
+  WeatherModule,
+  DateModule,
+  SystemModule,
+} from '../modules';
 
 const useStyles = createStyles((theme) => ({
   main: {},
 }));
 
 export default function Layout({ children, style }: any) {
+  const drawerContent = (
+    <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>
+  );
   const { classes, cx } = useStyles();
   return (
-    <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
+    <AppShell
+      aside={<Aside />}
+      header={<Header data={drawerContent} />}
+      footer={<Footer links={[]} />}
+    >
       <main
         className={cx(classes.main)}
         style={{