feat: update links in drawer

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

@@ -3,16 +3,22 @@ import { DrawerProps } from '@mui/material/Drawer';
 import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import AppsIcon from '@mui/icons-material/Apps';
+import LanguageIcon from '@mui/icons-material/Language';
+import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
 
+
+import ListItemLink from 'components/ListItemLink';
 import HideOnScroll from 'components/HideOnScroll';
+import useFormatMessage from 'hooks/useFormatMessage';
+import * as URLS from 'config/urls';
 import { Drawer as BaseDrawer } from './style';
 
+
 export default function Drawer(props: DrawerProps) {
+  const formatMessage = useFormatMessage();
+
   return (
     <BaseDrawer
       {...props}
@@ -21,27 +27,34 @@ export default function Drawer(props: DrawerProps) {
       <HideOnScroll unmountOnExit>
         <Toolbar />
       </HideOnScroll>
+
       <List>
-        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-          <ListItem button key={text}>
-            <ListItemIcon>
-              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-            </ListItemIcon>
-            <ListItemText primary={text} />
-          </ListItem>
-        ))}
+        <ListItemLink
+          icon={<DashboardIcon />}
+          primary={formatMessage('drawer.dashboard')}
+          to={URLS.DASHBOARD}
+        />
+
+        <ListItemLink
+          icon={<OfflineBoltIcon />}
+          primary={formatMessage('drawer.flows')}
+          to={URLS.FLOWS}
+        />
+
+        <ListItemLink
+          icon={<AppsIcon />}
+          primary={formatMessage('drawer.apps')}
+          to={URLS.APPS}
+        />
+
+        <ListItemLink
+          icon={<LanguageIcon />}
+          primary={formatMessage('drawer.explore')}
+          to={URLS.EXPLORE}
+        />
       </List>
+
       <Divider />
-      <List>
-        {['All mail', 'Trash', 'Spam'].map((text, index) => (
-          <ListItem button key={text}>
-            <ListItemIcon>
-              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-            </ListItemIcon>
-            <ListItemText primary={text} />
-          </ListItem>
-        ))}
-      </List>
     </BaseDrawer>
   );
 }

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

@@ -0,0 +1,35 @@
+import { useMemo, forwardRef } from 'react';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { Link, LinkProps } from 'react-router-dom';
+
+type ListItemLinkProps = {
+  icon: React.ReactNode;
+  primary: string;
+  to: string;
+}
+
+export default function ListItemLink(props: ListItemLinkProps) {
+  const { icon, primary, to } = props;
+
+  const CustomLink = useMemo(
+    () =>
+      forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InLineLink(
+        linkProps,
+        ref,
+      ) {
+        return <Link ref={ref} to={to} {...linkProps} />;
+      }),
+    [to],
+  );
+
+  return (
+    <li>
+      <ListItem button component={CustomLink}>
+        <ListItemIcon>{icon}</ListItemIcon>
+        <ListItemText primary={primary} />
+      </ListItem>
+    </li>
+  );
+};

packages/web/src/config/urls.ts

@@ -0,0 +1,4 @@
+export const DASHBOARD = '/dashboard';
+export const APPS = '/apps';
+export const FLOWS = '/flows';
+export const EXPLORE = '/explore';

packages/web/src/locales/en.json

@@ -1,5 +1,9 @@
 {
   "brandText": "automatisch",
   "searchPlaceholder": "Search...",
-  "welcomeText": "Here comes the dashboard homepage."
+  "welcomeText": "Here comes the dashboard homepage.",
+  "drawer.dashboard": "Dashboard",
+  "drawer.flows": "Flows",
+  "drawer.apps": "Apps",
+  "drawer.explore": "Explore"
 }