⬆️ Mantine 5.3

src/components/layout/header/Header.tsx

@@ -1,4 +1,7 @@
-import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
+import { ActionIcon, Box, createStyles, Group, Header as MantineHeader } 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';
@@ -12,6 +15,8 @@ export function Header(props: any) {
   const { classes } = useStyles();
   const { classes: cardClasses } = useCardStyles();
 
+  const { config } = useConfigContext();
+
   return (
     <MantineHeader height={HeaderHeight} className={cardClasses.card}>
       <Group p="xs" noWrap grow>
@@ -22,6 +27,25 @@ export function Header(props: any) {
           <Search />
           <AddElementAction />
           <ToolsMenu />
+
+          <ActionIcon
+            onClick={() => {
+              openContextModal({
+                modal: 'changeTilePosition',
+                title: 'Change tile position',
+                innerProps: {
+                  tile: config?.services[0],
+                },
+              });
+            }}
+            variant="default"
+            radius="md"
+            size="xl"
+            color="blue"
+          >
+            <IconCode />
+          </ActionIcon>
+
           <SettingsMenu />
         </Group>
       </Group>