✨ Add edit mode button

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -0,0 +1,11 @@
+{
+    "tooltip": "The edit mode enables you to configure your dashboard",
+    "button": {
+        "disabled": "Enter Edit Mode",
+        "enabled": "Exit Edit Mode"
+    },
+    "popover": {
+        "title": "Edit mode is enabled",
+        "text": "You can adjust and configure your apps now"
+    }
+}

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

@@ -0,0 +1,36 @@
+import { Button, Popover, Tooltip, Text } from '@mantine/core';
+import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+
+import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
+
+export const ToggleEditModeAction = () => {
+  const { t } = useTranslation('layout/header/actions/toggle-edit-mode');
+
+  const { enabled, toggleEditMode } = useEditModeStore();
+
+  return (
+    <Tooltip label={t('tooltip')} withinPortal>
+      <Popover opened={enabled} width={250} withArrow>
+        <Popover.Target>
+          <Button
+            onClick={() => toggleEditMode()}
+            leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+            variant="default"
+            radius="md"
+            color="blue"
+            style={{ height: 'auto', alignSelf: 'stretch' }}
+          >
+            {enabled ? t('button.enabled') : t('button.disabled')}
+          </Button>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Text align="center">
+            <Text weight="bold">{t('popover.title')}</Text>
+            {t('popover.text')}
+          </Text>
+        </Popover.Dropdown>
+      </Popover>
+    </Tooltip>
+  );
+};

src/components/layout/header/Header.tsx

@@ -1,10 +1,10 @@
-import { ActionIcon, Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
+import { Box, createStyles, Group, Header as MantineHeader, Text } from '@mantine/core';
 import { openContextModal } from '@mantine/modals';
-import { IconCode } from '@tabler/icons';
 import { useConfigContext } from '../../../config/provider';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
 import { AddElementAction } from './Actions/AddElementAction/AddElementAction';
+import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode';
 import { Search } from './Search';
 import { SettingsMenu } from './SettingsMenu';
 
@@ -23,10 +23,7 @@ export function Header(props: any) {
           <Logo />
         </Box>
         <Group position="right" noWrap>
-          <Search />
+          <Text
-          <AddElementAction />
-
-          <ActionIcon
             onClick={() => {
               openContextModal({
                 modal: 'changeTilePosition',
@@ -36,14 +33,14 @@ export function Header(props: any) {
                 },
               });
             }}
-            variant="default"
+            variant="link"
-            radius="md"
-            size="xl"
-            color="blue"
           >
-            <IconCode />
+            Test: Open Change Pos Modal
-          </ActionIcon>
+          </Text>
 
+          <Search />
+          <AddElementAction />
+          <ToggleEditModeAction />
           <SettingsMenu />
         </Group>
       </Group>

src/tools/translation-namespaces.ts

@@ -5,6 +5,7 @@ export const dashboardNamespaces = [
   'layout/app-shelf-menu',
   'layout/tools',
   'layout/element-selector/selector',
+  'layout/header/actions/toggle-edit-mode',
   'settings/common',
   'settings/general/theme-selector',
   'settings/general/config-changer',