Merge branch 'gridstack' of https://github.com/manuel-rw/homarr into gridstack

src/components/Dashboard/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { MobileRibbons } from './Mobile/Ribbon/MobileRibbon';
 import { DashboardDetailView } from './Views/DetailView';
 import { DashboardEditView } from './Views/EditView';
 import { useEditModeStore } from './Views/useEditModeStore';
@@ -10,7 +11,14 @@ export const Dashboard = () => {
   return (
     <>
       {/* The following elemens are splitted because gridstack doesn't reinitialize them when using same item. */}
-      {isEditMode ? <DashboardEditView /> : <DashboardDetailView />}
+      {isEditMode ? (
+        <>
+          <DashboardEditView />
+          <MobileRibbons />
+        </>
+      ) : (
+        <DashboardDetailView />
+      )}
     </>
   );
 };

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

@@ -0,0 +1,53 @@
+import { ActionIcon, createStyles, useMantineTheme } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
+
+export const MobileRibbons = () => {
+  const theme = useMantineTheme();
+  const { classes, cx } = useStyles();
+
+  const screenSmallerThanSm = useMediaQuery(`(min-width: ${theme.breakpoints.sm}px)`);
+
+  if (screenSmallerThanSm) {
+    return <></>;
+  }
+
+  return (
+    <div className={classes.root}>
+      <ActionIcon className={cx(classes.button, classes.removeBorderLeft)} variant="default">
+        <IconChevronRight />
+      </ActionIcon>
+
+      <ActionIcon className={cx(classes.button, classes.removeBorderRight)} variant="default">
+        <IconChevronLeft />
+      </ActionIcon>
+    </div>
+  );
+};
+
+const useStyles = createStyles(() => ({
+  root: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    pointerEvents: 'none',
+  },
+  button: {
+    height: 100,
+    width: 36,
+    pointerEvents: 'auto',
+  },
+  removeBorderLeft: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+  removeBorderRight: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+}));

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -14,20 +14,28 @@ export const ToggleEditModeAction = () => {
 
   const smallerThanSm = useScreenSmallerThan('sm');
 
+  const toggleButtonClicked = () => {
+    toggleEditMode();
+    setPopoverManuallyHidden(false);
+  };
+
   return (
     <Tooltip label={t('tooltip')} withinPortal>
       <Popover opened={enabled && !smallerThanSm && !popoverManuallyHidden} width={250} withArrow>
         <Popover.Target>
           {smallerThanSm ? (
-            <ActionIcon variant="default" radius="md" size="xl" color="blue">
+            <ActionIcon
+              onClick={() => toggleButtonClicked()}
+              variant="default"
+              radius="md"
+              size="xl"
+              color="blue"
+            >
               {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
             </ActionIcon>
           ) : (
             <Button
-              onClick={() => {
-                toggleEditMode();
-                setPopoverManuallyHidden(false);
-              }}
+              onClick={() => toggleButtonClicked()}
               leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
               variant="default"
               radius="md"