From d0c016aab616a290bfaa47b354638103ccdf891d Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Wed, 4 Jan 2023 20:33:29 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Improve=20design=20and=20add=20t?=
 =?UTF-8?q?ranslations=20for=20mobile=20ribbons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/layout/mobile/drawer.json   |  3 ++
 .../Ribbon/MobileRibbonSidebarDrawer.tsx      | 36 ++++++++++++-------
 src/tools/translation-namespaces.ts           |  1 +
 3 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 public/locales/en/layout/mobile/drawer.json

diff --git a/public/locales/en/layout/mobile/drawer.json b/public/locales/en/layout/mobile/drawer.json
new file mode 100644
index 000000000..ac34cee62
--- /dev/null
+++ b/public/locales/en/layout/mobile/drawer.json
@@ -0,0 +1,3 @@
+{
+  "title": "{{position}} sidebar"
+}
\ No newline at end of file
diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx b/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx
index b09749ea2..8a60c345d 100644
--- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx
+++ b/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} />
-  </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} />
+    </Drawer>
+  );
+};
diff --git a/src/tools/translation-namespaces.ts b/src/tools/translation-namespaces.ts
index dd33af58a..1715194db 100644
--- a/src/tools/translation-namespaces.ts
+++ b/src/tools/translation-namespaces.ts
@@ -6,6 +6,7 @@ export const dashboardNamespaces = [
   'layout/modals/change-position',
   'layout/modals/about',
   'layout/header/actions/toggle-edit-mode',
+  'layout/mobile/drawer',
   'settings/common',
   'settings/general/theme-selector',
   'settings/general/config-changer',