feat: add custom additional drawer link (#1586)

packages/web/src/components/SettingsLayout/index.tsx

@@ -9,6 +9,7 @@ import PaymentIcon from '@mui/icons-material/Payment';
 
 import * as URLS from 'config/urls';
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
+import useFormatMessage from 'hooks/useFormatMessage';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 
@@ -22,8 +23,8 @@ function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
       Icon: AccountCircleIcon,
       primary: 'settingsDrawer.myProfile',
       to: URLS.SETTINGS_PROFILE,
-    }
-  ]
+    },
+  ];
 
   if (isCloud) {
     items.push({
@@ -36,19 +37,12 @@ function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
   return items;
 }
 
-const drawerBottomLinks = [
-  {
-    Icon: ArrowBackIosNewIcon,
-    primary: 'settingsDrawer.goBack',
-    to: '/',
-  },
-];
-
 export default function SettingsLayout({
   children,
 }: SettingsLayoutProps): React.ReactElement {
   const { isCloud } = useAutomatischInfo();
   const theme = useTheme();
+  const formatMessage = useFormatMessage();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
@@ -56,6 +50,14 @@ export default function SettingsLayout({
   const closeDrawer = () => setDrawerOpen(false);
   const drawerLinks = createDrawerLinks({ isCloud });
 
+  const drawerBottomLinks = [
+    {
+      Icon: ArrowBackIosNewIcon,
+      primary: formatMessage('settingsDrawer.goBack'),
+      to: '/',
+    },
+  ];
+
   return (
     <>
       <AppBar