feat: update links in drawer
This commit is contained in:
@@ -3,16 +3,22 @@ import { DrawerProps } from '@mui/material/Drawer';
|
|||||||
import Toolbar from '@mui/material/Toolbar';
|
import Toolbar from '@mui/material/Toolbar';
|
||||||
import List from '@mui/material/List';
|
import List from '@mui/material/List';
|
||||||
import Divider from '@mui/material/Divider';
|
import Divider from '@mui/material/Divider';
|
||||||
import ListItem from '@mui/material/ListItem';
|
import DashboardIcon from '@mui/icons-material/Dashboard';
|
||||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
import AppsIcon from '@mui/icons-material/Apps';
|
||||||
import ListItemText from '@mui/material/ListItemText';
|
import LanguageIcon from '@mui/icons-material/Language';
|
||||||
import InboxIcon from '@mui/icons-material/MoveToInbox';
|
import OfflineBoltIcon from '@mui/icons-material/OfflineBolt';
|
||||||
import MailIcon from '@mui/icons-material/Mail';
|
|
||||||
|
|
||||||
|
|
||||||
|
import ListItemLink from 'components/ListItemLink';
|
||||||
import HideOnScroll from 'components/HideOnScroll';
|
import HideOnScroll from 'components/HideOnScroll';
|
||||||
|
import useFormatMessage from 'hooks/useFormatMessage';
|
||||||
|
import * as URLS from 'config/urls';
|
||||||
import { Drawer as BaseDrawer } from './style';
|
import { Drawer as BaseDrawer } from './style';
|
||||||
|
|
||||||
|
|
||||||
export default function Drawer(props: DrawerProps) {
|
export default function Drawer(props: DrawerProps) {
|
||||||
|
const formatMessage = useFormatMessage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseDrawer
|
<BaseDrawer
|
||||||
{...props}
|
{...props}
|
||||||
@@ -21,27 +27,34 @@ export default function Drawer(props: DrawerProps) {
|
|||||||
<HideOnScroll unmountOnExit>
|
<HideOnScroll unmountOnExit>
|
||||||
<Toolbar />
|
<Toolbar />
|
||||||
</HideOnScroll>
|
</HideOnScroll>
|
||||||
|
|
||||||
<List>
|
<List>
|
||||||
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
|
<ListItemLink
|
||||||
<ListItem button key={text}>
|
icon={<DashboardIcon />}
|
||||||
<ListItemIcon>
|
primary={formatMessage('drawer.dashboard')}
|
||||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
to={URLS.DASHBOARD}
|
||||||
</ListItemIcon>
|
/>
|
||||||
<ListItemText primary={text} />
|
|
||||||
</ListItem>
|
<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>
|
</List>
|
||||||
|
|
||||||
<Divider />
|
<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>
|
</BaseDrawer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
35
packages/web/src/components/ListItemLink/index.tsx
Normal file
35
packages/web/src/components/ListItemLink/index.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
4
packages/web/src/config/urls.ts
Normal file
4
packages/web/src/config/urls.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export const DASHBOARD = '/dashboard';
|
||||||
|
export const APPS = '/apps';
|
||||||
|
export const FLOWS = '/flows';
|
||||||
|
export const EXPLORE = '/explore';
|
@@ -1,5 +1,9 @@
|
|||||||
{
|
{
|
||||||
"brandText": "automatisch",
|
"brandText": "automatisch",
|
||||||
"searchPlaceholder": "Search...",
|
"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"
|
||||||
}
|
}
|
Reference in New Issue
Block a user