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