Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -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 React, { ReactChild } from 'react';
import { TFuncKey, useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { getPath } from '../../utils';
@ -7,15 +8,19 @@ import * as styles from './index.module.scss';
type Props = {
icon?: ReactChild;
title: string;
titleKey: TFuncKey<'translation', 'admin_console.tabs'>;
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 (
<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>}
<div className={styles.title}>{title}</div>
<div className={styles.title}>{t(titleKey)}</div>
</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';
const Sidebar = () => {
const { t: tSection } = useTranslation(undefined, {
const { t } = useTranslation(undefined, {
keyPrefix: 'admin_console.tab_sections',
});
const { t: tItem } = useTranslation(undefined, {
keyPrefix: 'admin_console.tabs',
});
const location = useLocation();
return (
<div className={styles.sidebar}>
{sections.map(({ title, items }) => (
<Section key={title} title={tSection(title)}>
<Section key={title} title={t(title)}>
{items.map(({ title, Icon }) => (
<Item
key={title}
title={tItem(title)}
titleKey={title}
icon={<Icon />}
isActive={location.pathname === getPath(title)}
/>
@ -33,7 +30,7 @@ const Sidebar = () => {
</Section>
))}
<div className={styles.spacer} />
<Item title={tItem('settings')} icon={<Gear />} />
<Item titleKey="settings" icon={<Gear />} />
</div>
);
};