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

feat(console): open docs on documentation tab clicked (#1444)

Browse source
This commit is contained in:
Xiao Yijun 2022-07-07 16:26:18 +08:00 committed by GitHub
parent d9ba72985d
commit 340c641f4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,9 +11,10 @@ type Props = {
titleKey: TFuncKey<'translation', 'admin_console.tabs'>;
isActive?: boolean;
modal?: (isOpen: boolean, onCancel: () => void) => ReactNode;
externalLink?: string;
};
const Item = ({ icon, titleKey, modal, isActive = false }: Props) => {
const Item = ({ icon, titleKey, modal, externalLink, isActive = false }: Props) => {
const { t } = useTranslation(undefined, {
keyPrefix: 'admin_console.tabs',
});
@ -29,28 +30,37 @@ const Item = ({ icon, titleKey, modal, isActive = false }: Props) => {
[icon, t, titleKey]
);
if (!modal) {
if (modal) {
return (
<Link to={getPath(titleKey)} className={classNames(styles.row, isActive && styles.active)}>
<>
<button
className={styles.row}
onClick={() => {
setIsOpen(true);
}}
>
{content}
</button>
{modal(isOpen, () => {
setIsOpen(false);
})}
</>
);
}
if (externalLink) {
return (
// eslint-disable-next-line react/jsx-no-target-blank
<a href={externalLink} target="_blank" className={styles.row} rel="noopener">
{content}
</Link>
</a>
);
}
return (
<>
<button
className={styles.row}
onClick={() => {
setIsOpen(true);
}}
>
{content}
</button>
{modal(isOpen, () => {
setIsOpen(false);
})}
</>
<Link to={getPath(titleKey)} className={classNames(styles.row, isActive && styles.active)}>
{content}
</Link>
);
};

2
packages/console/src/components/AppContent/components/Sidebar/hook.tsx
View file

@ -21,6 +21,7 @@ type SidebarItem = {
title: TFuncKey<'translation', 'admin_console.tabs'>;
isHidden?: boolean;
modal?: (isOpen: boolean, onCancel: () => void) => ReactNode;
externalLink?: string;
};
type SidebarSection = {
@ -106,6 +107,7 @@ export const useSidebarMenuItems = (): {
{
Icon: Document,
title: 'documentation',
externalLink: 'https://docs.logto.io',
},
],
},

3
packages/console/src/components/AppContent/components/Sidebar/index.tsx
View file

@ -21,7 +21,7 @@ const Sidebar = () => {
{sections.map(({ title, items }) => (
<Section key={title} title={t(title)}>
{items.map(
({ title, Icon, isHidden, modal }) =>
({ title, Icon, isHidden, modal, externalLink }) =>
!isHidden && (
<Item
key={title}
@ -29,6 +29,7 @@ const Sidebar = () => {
icon={<Icon />}
isActive={location.pathname.startsWith(getPath(title))}
modal={modal}
externalLink={externalLink}
/>
)
)}