feat: could position widgets at left

src/components/layout/Aside.tsx

@@ -1,7 +1,5 @@
-import { Aside as MantineAside, createStyles, Group } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
-import { WeatherModule, DateModule, CalendarModule, TotalDownloadsModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { Aside as MantineAside, createStyles } from '@mantine/core';
+import Widgets from './Widgets';
 
 const useStyles = createStyles((theme) => ({
   hide: {
@@ -18,8 +16,6 @@ const useStyles = createStyles((theme) => ({
 
 export default function Aside(props: any) {
   const { classes, cx } = useStyles();
-  const matches = useMediaQuery('(min-width: 800px)');
-
   return (
     <MantineAside
       pr="md"
@@ -34,16 +30,7 @@ export default function Aside(props: any) {
         base: 'auto',
       }}
     >
-      <>
-        {matches && (
-          <Group my="sm" grow direction="column" style={{ width: 300 }}>
-            <ModuleWrapper module={CalendarModule} />
-            <ModuleWrapper module={TotalDownloadsModule} />
-            <ModuleWrapper module={WeatherModule} />
-            <ModuleWrapper module={DateModule} />
-          </Group>
-        )}
-      </>
+      <Widgets />
     </MantineAside>
   );
 }

src/components/layout/Layout.tsx

@@ -2,8 +2,10 @@ import { AppShell, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
+import Navbar from './Navbar';
 import { HeaderConfig } from './HeaderConfig';
 import { Background } from './Background';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   main: {},
@@ -11,8 +13,16 @@ const useStyles = createStyles((theme) => ({
 
 export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
+  const { config } = useConfig();
+  const widgetPosition = config?.settings?.widgetPosition === 'left';
+
   return (
-    <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
+    <AppShell
+      header={<Header />}
+      navbar={widgetPosition ? <Navbar /> : <></>}
+      aside={widgetPosition ? <></> : <Aside />}
+      footer={<Footer links={[]} />}
+    >
       <HeaderConfig />
       <Background />
       <main

src/components/layout/Navbar.tsx

@@ -1,24 +1,37 @@
-import { Group, Navbar as MantineNavbar } from '@mantine/core';
-import { WeatherModule, DateModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { createStyles, Navbar as MantineNavbar } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
 
 export default function Navbar() {
+  const { classes, cx } = useStyles();
+
   return (
     <MantineNavbar
-      hiddenBreakpoint="lg"
+      pl="md"
+      hiddenBreakpoint="sm"
       hidden
+      className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
       }}
     >
-      <Group mt="sm" direction="column" align="center">
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={WeatherModule} />
-      </Group>
+      <Widgets />
     </MantineNavbar>
   );
 }

src/components/layout/Widgets.tsx

@@ -0,0 +1,21 @@
+import { Group } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../modules';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+
+export default function Widgets(props: any) {
+  const matches = useMediaQuery('(min-width: 800px)');
+
+    return (
+        <>
+        {matches && (
+            <Group my="sm" grow direction="column" style={{ width: 300 }}>
+                <ModuleWrapper module={CalendarModule} />
+                <ModuleWrapper module={TotalDownloadsModule} />
+                <ModuleWrapper module={WeatherModule} />
+                <ModuleWrapper module={DateModule} />
+            </Group>
+        )}
+        </>
+    );
+}