💄 Improve design and add translations for mobile ribbons

public/locales/en/layout/mobile/drawer.json

@@ -0,0 +1,3 @@
+{
+  "title": "{{position}} sidebar"
+}

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) => (
+}: MobileRibbonSidebarDrawerProps) => {
+  const { t } = useTranslation('layout/mobile/drawer');
+  return (
     <Drawer
+      padding={10}
       position={location}
-    title={<Title order={4}>{location} sidebar</Title>}
+      title={<Title order={4}>{t('title', { position: location })}</Title>}
       style={{
         display: 'flex',
         justifyContent: 'center',
       }}
+      styles={{
+        title: {
+          width: '100%',
+        },
+      }}
       {...props}
     >
       <DashboardSidebar location={location} />
     </Drawer>
   );
+};

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',