diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index a41e7e3f5..a05a1ffeb 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/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 ? : }
+ {isEditMode ? (
+ <>
+
+
+ >
+ ) : (
+
+ )}
>
);
};
diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx b/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx
new file mode 100644
index 000000000..29da1710d
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+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,
+ },
+}));
\ No newline at end of file
diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
index 18c2025e7..ad53764c8 100644
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/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 (
{smallerThanSm ? (
-
+ toggleButtonClicked()}
+ variant="default"
+ radius="md"
+ size="xl"
+ color="blue"
+ >
{enabled ? : }
) : (