✨ Add mobile ribbon sidebars

src/components/Dashboard/Dashboard.tsx

@@ -11,14 +11,8 @@ export const Dashboard = () => {
   return (
     <>
       {/* The following elemens are splitted because gridstack doesn't reinitialize them when using same item. */}
-      {isEditMode ? (
+      {isEditMode ? <DashboardEditView /> : <DashboardDetailView />}
-        <>
+      <MobileRibbons />
-          <DashboardEditView />
-          <MobileRibbons />
-        </>
-      ) : (
-        <DashboardDetailView />
-      )}
     </>
   );
 };

src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx

@@ -1,36 +1,68 @@
-import { ActionIcon, createStyles, useMantineTheme } from '@mantine/core';
+import { ActionIcon, createStyles } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
+import { useDisclosure } from '@mantine/hooks';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
+import { useConfigContext } from '../../../../config/provider';
+import { useScreenLargerThan } from '../../../../tools/hooks/useScreenLargerThan';
+import { MobileRibbonSidebarDrawer } from './MobileRibbonSidebarDrawer';
 
 export const MobileRibbons = () => {
-  const theme = useMantineTheme();
   const { classes, cx } = useStyles();
+  const { config } = useConfigContext();
+  const [openedRight, rightSidebar] = useDisclosure(false);
+  const [openedLeft, leftSidebar] = useDisclosure(false);
+  const screenLargerThanMd = useScreenLargerThan('md');
 
-  const screenSmallerThanSm = useMediaQuery(`(min-width: ${theme.breakpoints.sm}px)`);
+  if (screenLargerThanMd || !config) {
-
-  if (screenSmallerThanSm) {
     return <></>;
   }
 
+  const layoutSettings = config.settings.customization.layout;
+
   return (
     <div className={classes.root}>
-      <ActionIcon className={cx(classes.button, classes.removeBorderLeft)} variant="default">
+      {layoutSettings.enabledLeftSidebar ? (
-        <IconChevronRight />
+        <>
-      </ActionIcon>
+          <ActionIcon
+            onClick={leftSidebar.open}
+            className={cx(classes.button, classes.removeBorderLeft)}
+            variant="default"
+          >
+            <IconChevronRight />
+          </ActionIcon>
+          <MobileRibbonSidebarDrawer
+            onClose={leftSidebar.close}
+            opened={openedLeft}
+            location="left"
+          />
+        </>
+      ) : null}
 
-      <ActionIcon className={cx(classes.button, classes.removeBorderRight)} variant="default">
+      {layoutSettings.enabledRightSidebar ? (
-        <IconChevronLeft />
+        <>
-      </ActionIcon>
+          <ActionIcon
+            onClick={rightSidebar.open}
+            className={cx(classes.button, classes.removeBorderRight)}
+            variant="default"
+          >
+            <IconChevronLeft />
+          </ActionIcon>
+          <MobileRibbonSidebarDrawer
+            onClose={rightSidebar.close}
+            opened={openedRight}
+            location="right"
+          />
+        </>
+      ) : null}
     </div>
   );
 };
 
 const useStyles = createStyles(() => ({
   root: {
-    position: 'absolute',
+    position: 'fixed',
     top: 0,
     left: 0,
-    width: '100vw',
+    width: '100%',
     height: '100%',
     display: 'flex',
     alignItems: 'center',

src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx

@@ -0,0 +1,27 @@
+import { Drawer, Title } from '@mantine/core';
+import { DashboardSidebar } from '../../Wrappers/Sidebar/Sidebar';
+
+interface MobileRibbonSidebarDrawerProps {
+  onClose: () => void;
+  opened: boolean;
+  location: 'left' | 'right';
+}
+
+export const MobileRibbonSidebarDrawer = ({
+  location,
+  ...props
+}: MobileRibbonSidebarDrawerProps) => {
+  return (
+    <Drawer
+      position={location}
+      title={<Title order={4}>{location} sidebar</Title>}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+      {...props}
+    >
+      <DashboardSidebar location={location} />
+    </Drawer>
+  );
+};

src/components/Dashboard/Views/DashboardView.tsx

@@ -1,6 +1,7 @@
 import { Group, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 import { useConfigContext } from '../../../config/provider';
+import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan';
 import { CategoryType } from '../../../types/category';
 import { WrapperType } from '../../../types/wrapper';
 import { DashboardCategory } from '../Wrappers/Category/Category';
@@ -9,11 +10,14 @@ import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
 
 export const DashboardView = () => {
   const wrappers = useWrapperItems();
-  const clockModule = useConfigContext().config?.integrations.clock;
+  const layoutSettings = useConfigContext()?.config?.settings.customization.layout;
+  const showSidebars = useScreenLargerThan('md');
 
   return (
     <Group align="top" h="100%">
-      <DashboardSidebar location="left" />
+      {layoutSettings?.enabledLeftSidebar && showSidebars ? (
+        <DashboardSidebar location="left" />
+      ) : null}
       <Stack mx={-10} style={{ flexGrow: 1 }}>
         {wrappers.map((item) =>
           item.type === 'category' ? (
@@ -23,7 +27,9 @@ export const DashboardView = () => {
           )
         )}
       </Stack>
-      <DashboardSidebar location="right" />
+      {layoutSettings?.enabledRightSidebar && showSidebars ? (
+        <DashboardSidebar location="right" />
+      ) : null}
     </Group>
   );
 };