docs: redesign docs collapsible categories (#1748)
* docs: redesign docs collapsible categories Closes #1341 * Fix people creation from People table page --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs
101
docs/src/theme/DocSidebarItem/Category/index.js
Normal file
101
docs/src/theme/DocSidebarItem/Category/index.js
Normal file
@ -0,0 +1,101 @@
|
||||
import Link from "@docusaurus/Link";
|
||||
import isInternalUrl from "@docusaurus/isInternalUrl";
|
||||
import {
|
||||
Collapsible,
|
||||
ThemeClassNames,
|
||||
useCollapsible,
|
||||
} from "@docusaurus/theme-common";
|
||||
import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
|
||||
import DocSidebarItems from "@theme/DocSidebarItems";
|
||||
import IconExternalLink from "@theme/Icon/ExternalLink";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import * as icons from "../../icons";
|
||||
|
||||
const DocSidebarItemCategory = ({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) => {
|
||||
const {
|
||||
href,
|
||||
label,
|
||||
className,
|
||||
collapsible,
|
||||
autoAddBaseUrl,
|
||||
customProps = {},
|
||||
items,
|
||||
} = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isInternalLink = isInternalUrl(href);
|
||||
const IconComponent = customProps?.icon ? icons[customProps.icon] : undefined;
|
||||
|
||||
const { collapsed, setCollapsed } = useCollapsible({
|
||||
initialState: () => collapsible && !isActive && item.collapsed,
|
||||
});
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemCategory,
|
||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
||||
"menu__list-item",
|
||||
`menu__list-item--level${level}`,
|
||||
className
|
||||
)}
|
||||
key={label}
|
||||
>
|
||||
<Link
|
||||
className={clsx("menu__link", {
|
||||
"menu__link--active": isActive,
|
||||
"menu__link--external": !!href && !isInternalLink,
|
||||
})}
|
||||
autoAddBaseUrl={autoAddBaseUrl}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
aria-expanded={collapsible ? !collapsed : undefined}
|
||||
to={href}
|
||||
onClick={(e) => {
|
||||
onItemClick?.(item);
|
||||
|
||||
if (!collapsible) return;
|
||||
|
||||
if (href) {
|
||||
setCollapsed(false);
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
setCollapsed((previousCollapsed) => !previousCollapsed);
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{IconComponent ? (
|
||||
<span className="icon-and-text">
|
||||
<i className="sidebar-item-icon">
|
||||
<IconComponent />
|
||||
</i>
|
||||
{label}
|
||||
</span>
|
||||
) : (
|
||||
label
|
||||
)}
|
||||
|
||||
{!!href && !isInternalLink && <IconExternalLink />}
|
||||
</Link>
|
||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
||||
<DocSidebarItems
|
||||
items={items}
|
||||
tabIndex={collapsed ? -1 : 0}
|
||||
onItemClick={onItemClick}
|
||||
activePath={activePath}
|
||||
level={level + 1}
|
||||
/>
|
||||
</Collapsible>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocSidebarItemCategory;
|
||||
@ -1,37 +1,11 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
|
||||
import Link from '@docusaurus/Link';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import IconExternalLink from '@theme/Icon/ExternalLink';
|
||||
import styles from './styles.module.css';
|
||||
import {
|
||||
TbFaceIdError,
|
||||
TbTerminal2,
|
||||
TbCloud,
|
||||
TbServer,
|
||||
TbBolt,
|
||||
TbApps,
|
||||
TbTopologyStar,
|
||||
TbChartDots,
|
||||
TbBug,
|
||||
TbVocabulary,
|
||||
TbArrowBigRight,
|
||||
TbDeviceDesktop,
|
||||
TbBrandWindows,
|
||||
TbBugOff,
|
||||
TbBrandVscode,
|
||||
TbFolder,
|
||||
TbEyeglass,
|
||||
TbZoomQuestion,
|
||||
TbBrandFigma,
|
||||
TbPaint,
|
||||
TbChecklist,
|
||||
TbKeyboard,
|
||||
TbPencil,
|
||||
} from "react-icons/tb";
|
||||
|
||||
import Link from "@docusaurus/Link";
|
||||
import isInternalUrl from "@docusaurus/isInternalUrl";
|
||||
import { ThemeClassNames } from "@docusaurus/theme-common";
|
||||
import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
|
||||
import IconExternalLink from "@theme/Icon/ExternalLink";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import * as icons from "../../icons";
|
||||
|
||||
const DocSidebarItemLink = ({
|
||||
item,
|
||||
@ -41,63 +15,40 @@ const DocSidebarItemLink = ({
|
||||
index,
|
||||
...props
|
||||
}) => {
|
||||
const {href, label, className, autoAddBaseUrl, customProps = {}} = item;
|
||||
const { href, label, className, autoAddBaseUrl, customProps = {} } = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isInternalLink = isInternalUrl(href);
|
||||
let icons = {
|
||||
'TbTerminal2': TbTerminal2,
|
||||
'TbCloud': TbCloud,
|
||||
'TbArrowBigRight': TbArrowBigRight,
|
||||
'TbServer': TbServer,
|
||||
'TbBolt': TbBolt,
|
||||
'TbApps': TbApps,
|
||||
'TbTopologyStar': TbTopologyStar,
|
||||
'TbChartDots': TbChartDots,
|
||||
'TbBug': TbBug,
|
||||
'TbVocabulary': TbVocabulary,
|
||||
'TbBrandWindows': TbBrandWindows,
|
||||
'TbBugOff': TbBugOff,
|
||||
'TbBrandVscode': TbBrandVscode,
|
||||
'TbDeviceDesktop': TbDeviceDesktop,
|
||||
'TbFolder': TbFolder,
|
||||
'TbEyeglass': TbEyeglass,
|
||||
'TbZoomQuestion': TbZoomQuestion,
|
||||
'TbBrandFigma': TbBrandFigma,
|
||||
'TbPaint': TbPaint,
|
||||
'TbChecklist': TbChecklist,
|
||||
'TbKeyboard': TbKeyboard,
|
||||
'TbChecklist': TbChecklist,
|
||||
'TbPencil': TbPencil,
|
||||
};
|
||||
const IconComponent = customProps?.icon
|
||||
? icons[customProps.icon]
|
||||
: icons.TbFaceIdError;
|
||||
|
||||
let IconComponent = customProps && customProps.icon ? icons[customProps.icon] : TbFaceIdError;
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
'menu__list-item',
|
||||
className,
|
||||
"menu__list-item",
|
||||
`menu__list-item--level${level}`,
|
||||
className
|
||||
)}
|
||||
key={label}>
|
||||
key={label}
|
||||
>
|
||||
<Link
|
||||
className={clsx(
|
||||
'menu__link',
|
||||
!isInternalLink && styles.menuExternalLink,
|
||||
{
|
||||
'menu__link--active': isActive,
|
||||
},
|
||||
)}
|
||||
className={clsx("menu__link", {
|
||||
"menu__link--active": isActive,
|
||||
"menu__link--external": !isInternalLink,
|
||||
})}
|
||||
autoAddBaseUrl={autoAddBaseUrl}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
to={href}
|
||||
{...(isInternalLink && {
|
||||
onClick: onItemClick ? () => onItemClick(item) : undefined,
|
||||
})}
|
||||
{...props}>
|
||||
{...props}
|
||||
>
|
||||
<span className="icon-and-text">
|
||||
<i className="sidebar-item-icon">
|
||||
<IconComponent />
|
||||
<IconComponent size={customProps.iconSize} />
|
||||
</i>
|
||||
{label}
|
||||
</span>
|
||||
@ -105,6 +56,6 @@ const DocSidebarItemLink = ({
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DocSidebarItemLink;
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.menuExternalLink {
|
||||
align-items: center;
|
||||
}
|
||||
27
docs/src/theme/icons.js
Normal file
27
docs/src/theme/icons.js
Normal file
@ -0,0 +1,27 @@
|
||||
export {
|
||||
TbApps,
|
||||
TbArrowBackUp,
|
||||
TbArrowBigRight,
|
||||
TbBolt,
|
||||
TbBrandFigma,
|
||||
TbBrandVscode,
|
||||
TbBrandWindows,
|
||||
TbBug,
|
||||
TbBugOff,
|
||||
TbChartDots,
|
||||
TbChecklist,
|
||||
TbCloud,
|
||||
TbDeviceDesktop,
|
||||
TbEyeglass,
|
||||
TbFaceIdError,
|
||||
TbFolder,
|
||||
TbKeyboard,
|
||||
TbPaint,
|
||||
TbPencil,
|
||||
TbPlus,
|
||||
TbServer,
|
||||
TbTerminal2,
|
||||
TbTopologyStar,
|
||||
TbVocabulary,
|
||||
TbZoomQuestion,
|
||||
} from "react-icons/tb";
|
||||
Reference in New Issue
Block a user