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