⬆️ Upgrade layout for new React and NextJS versions

src/components/layout/Header.tsx

@@ -56,48 +56,6 @@ export function Header(props: any) {
           <DockerMenuButton />
           <SettingsMenuButton />
           <AddItemShelfButton />
-          <ActionIcon className={classes.burger} variant="default" radius="md" size="xl">
-            <Burger
-              opened={!hidden}
-              onClick={(_) => {
-                toggleHidden();
-                toggleOpened();
-              }}
-            />
-          </ActionIcon>
-          <Drawer
-            size="auto"
-            padding="xl"
-            position="right"
-            hidden={hidden}
-            title={<Title order={3}>Modules</Title>}
-            opened
-            onClose={() => {
-              toggleHidden();
-            }}
-          >
-            <Transition
-              mounted={opened}
-              transition="pop-top-right"
-              duration={300}
-              timingFunction="ease"
-              onExit={() => toggleOpened()}
-            >
-              {(styles) => (
-                <div style={styles}>
-                  <ScrollArea offsetScrollbars style={{ height: '90vh' }}>
-                    <Group my="sm" grow direction="column" style={{ width: 300 }}>
-                      <ModuleWrapper module={CalendarModule} />
-                      <ModuleWrapper module={TotalDownloadsModule} />
-                      <ModuleWrapper module={WeatherModule} />
-                      <ModuleWrapper module={DateModule} />
-                      <ModuleWrapper module={DashdotModule} />
-                    </Group>
-                  </ScrollArea>
-                </div>
-              )}
-            </Transition>
-          </Drawer>
         </Group>
       </Group>
     </Head>

src/components/layout/Layout.tsx

@@ -6,6 +6,7 @@ import Navbar from './Navbar';
 import { HeaderConfig } from './HeaderConfig';
 import { Background } from './Background';
 import { useConfig } from '../../tools/state';
+import { useMediaQuery } from '@mantine/hooks';
 
 const useStyles = createStyles((theme) => ({
   main: {},
@@ -19,8 +20,8 @@ export default function Layout({ children, style }: any) {
   return (
     <AppShell
       header={<Header />}
-      navbar={widgetPosition ? <Navbar /> : <></>}
+      navbar={widgetPosition ? <Navbar /> : undefined}
-      aside={widgetPosition ? <></> : <Aside />}
+      aside={widgetPosition ? undefined : <Aside />}
       footer={<Footer links={[]} />}
     >
       <HeaderConfig />

src/components/layout/Widgets.tsx

@@ -5,11 +5,7 @@ import { DashdotModule } from '../modules/dash.';
 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} />
@@ -17,7 +13,5 @@ export default function Widgets(props: any) {
       <ModuleWrapper module={DateModule} />
       <ModuleWrapper module={DashdotModule} />
     </Group>
-      )}
-    </>
   );
 }