Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): tab route link (#314)

Browse source
This commit is contained in:
Gao Sun 2022-03-03 17:42:47 +08:00 committed by GitHub
parent 9e0f60ebc8
commit a265a3434b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/console/src/components/Sidebar/components/Item/index.tsx
View file

@ -1,5 +1,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { ReactChild } from 'react'; import React, { ReactChild } from 'react';
import { TFuncKey, useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { getPath } from '../../utils'; import { getPath } from '../../utils';
@ -7,15 +8,19 @@ import * as styles from './index.module.scss';
type Props = { type Props = {
icon?: ReactChild; icon?: ReactChild;
title: string; titleKey: TFuncKey<'translation', 'admin_console.tabs'>;
isActive?: boolean; isActive?: boolean;
}; };
const Item = ({ icon, title, isActive = false }: Props) => { const Item = ({ icon, titleKey, isActive = false }: Props) => {
const { t } = useTranslation(undefined, {
keyPrefix: 'admin_console.tabs',
});
return ( return (
<Link to={getPath(title)} className={classNames(styles.row, isActive && styles.active)}> <Link to={getPath(titleKey)} className={classNames(styles.row, isActive && styles.active)}>
{icon && <div className={styles.icon}>{icon}</div>} {icon && <div className={styles.icon}>{icon}</div>}
<div className={styles.title}>{title}</div> <div className={styles.title}>{t(titleKey)}</div>
</Link> </Link>
); );
}; };

11
packages/console/src/components/Sidebar/index.tsx
View file

@ -10,22 +10,19 @@ import * as styles from './index.module.scss';
import { getPath } from './utils'; import { getPath } from './utils';
const Sidebar = () => { const Sidebar = () => {
const { t: tSection } = useTranslation(undefined, { const { t } = useTranslation(undefined, {
keyPrefix: 'admin_console.tab_sections', keyPrefix: 'admin_console.tab_sections',
}); });
const { t: tItem } = useTranslation(undefined, {
keyPrefix: 'admin_console.tabs',
});
const location = useLocation(); const location = useLocation();
return ( return (
<div className={styles.sidebar}> <div className={styles.sidebar}>
{sections.map(({ title, items }) => ( {sections.map(({ title, items }) => (
<Section key={title} title={tSection(title)}> <Section key={title} title={t(title)}>
{items.map(({ title, Icon }) => ( {items.map(({ title, Icon }) => (
<Item <Item
key={title} key={title}
title={tItem(title)} titleKey={title}
icon={<Icon />} icon={<Icon />}
isActive={location.pathname === getPath(title)} isActive={location.pathname === getPath(title)}
/> />
@ -33,7 +30,7 @@ const Sidebar = () => {
</Section> </Section>
))} ))}
<div className={styles.spacer} /> <div className={styles.spacer} />
<Item title={tItem('settings')} icon={<Gear />} /> <Item titleKey="settings" icon={<Gear />} />
</div> </div>
); );
}; };