Merge branch 'manuel-rw-gridstack' into gridstack-wip-meierschlumpf

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

@@ -1,4 +1,4 @@
-import { ActionIcon, createStyles } from '@mantine/core';
+import { ActionIcon, createStyles, Space } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
 import { useConfigContext } from '../../../../config/provider';
@@ -35,7 +35,9 @@ export const MobileRibbons = () => {
             location="left"
           />
         </>
-      ) : null}
+      ) : (
+        <Space />
+      )}
 
       {layoutSettings.enabledRightSidebar ? (
         <>

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

@@ -1,4 +1,5 @@
 import { Drawer, Title } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { DashboardSidebar } from '../../Wrappers/Sidebar/Sidebar';
 
 interface MobileRibbonSidebarDrawerProps {
@@ -10,16 +11,25 @@ interface MobileRibbonSidebarDrawerProps {
 export const MobileRibbonSidebarDrawer = ({
   location,
   ...props
-}: MobileRibbonSidebarDrawerProps) => (
-  <Drawer
-    position={location}
-    title={<Title order={4}>{location} sidebar</Title>}
-    style={{
-      display: 'flex',
-      justifyContent: 'center',
-    }}
-    {...props}
-  >
-    <DashboardSidebar location={location} isGridstackReady />
-  </Drawer>
-);
+}: MobileRibbonSidebarDrawerProps) => {
+  const { t } = useTranslation('layout/mobile/drawer');
+  return (
+    <Drawer
+      padding={10}
+      position={location}
+      title={<Title order={4}>{t('title', { position: location })}</Title>}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+      styles={{
+        title: {
+          width: '100%',
+        },
+      }}
+      {...props}
+    >
+      <DashboardSidebar location={location} isGridstackReady />
+    </Drawer>
+  );
+};