Go to selected page

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -34,6 +34,7 @@ declare module '@docusaurus/plugin-content-docs-types' {
   export type PropSidebarItemCategory = PropsSidebarItemBase & {
     type: 'category';
     label: string;
+    link?: object;
     items: PropSidebarItem[];
     collapsed?: boolean;
   };

packages/docusaurus-plugin-content-docs/src/sidebars.ts

@@ -97,7 +97,7 @@ function assertItem<K extends string>(
 function assertIsCategory(
   item: unknown,
 ): asserts item is SidebarItemCategoryJSON {
-  assertItem(item, ['items', 'label', 'collapsed', 'customProps']);
+  assertItem(item, ['items', 'label', 'collapsed', 'link', 'customProps']);
   if (typeof item.label !== 'string') {
     throw new Error(
       `Error loading ${JSON.stringify(item)}. "label" must be a string.`,

packages/docusaurus-plugin-content-docs/src/types.ts

@@ -108,6 +108,7 @@ export type SidebarItemCategory = SidebarItemBase & {
   label: string;
   items: SidebarItem[];
   collapsed: boolean;
+  link?: object;
 };
 
 export type SidebarItem =

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -32,6 +32,10 @@ function usePrevious(value) {
   return ref.current;
 }
 
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 const isActiveSidebarItem = (item, activePath) => {
   if (item.type === 'link') {
     return isSamePath(item.href, activePath);
@@ -49,6 +53,7 @@ function DocSidebarItemCategory({
   onItemClick,
   collapsible,
   activePath,
+  link,
   ...props
 }) {
   const {items, label} = item;
@@ -64,6 +69,7 @@ function DocSidebarItemCategory({
     }
     return isActive ? false : item.collapsed;
   });
+  const [initialLink, setInitialLink] = useState('');
 
   const menuListRef = useRef<HTMLUListElement>(null);
   const [menuListHeight, setMenuListHeight] = useState<string | undefined>(
@@ -81,17 +87,36 @@ function DocSidebarItemCategory({
     if (justBecameActive && collapsed) {
       setCollapsed(false);
     }
+
+    if (link) {
+      if (Object.hasOwnProperty.call(link, 'type')) {
+        switch (link.type) {
+          case 'doc':
+            setInitialLink(link.id);
+            break;
+          case 'link':
+            setInitialLink(link.href);
+            break;
+          default:
+            setInitialLink('');
+            break;
+        }
+      }
+    }
   }, [isActive, wasActive, collapsed]);
 
   const handleItemClick = useCallback(
-    (e) => {
-      e.preventDefault();
-
+    async (e) => {
+      if (!collapsed) {
+        e.preventDefault();
+      }
       if (!menuListHeight) {
         handleMenuListHeight();
       }
-
-      setTimeout(() => setCollapsed((state) => !state), 100);
+      setCollapsed((state) => {
+        return !state;
+      });
+      await sleep(100);
     },
     [menuListHeight],
   );
@@ -106,17 +131,26 @@ function DocSidebarItemCategory({
         'menu__list-item--collapsed': collapsed,
       })}
       key={label}>
-      <a
+      <Link
+        to={initialLink}
         className={clsx('menu__link', {
           'menu__link--sublist': collapsible,
           'menu__link--active': collapsible && isActive,
-          [styles.menuLinkText]: !collapsible,
+          [styles.menuLinkText]: !collapsible && initialLink === '',
         })}
+        {...(isInternalUrl(initialLink)
+          ? {
+              isNavLink: true,
+              onClick: onItemClick,
+            }
+          : {
+              target: '_blank',
+              rel: 'noreferrer noopener',
+            })}
         onClick={collapsible ? handleItemClick : undefined}
-        href={collapsible ? '#!' : undefined}
         {...props}>
         {label}
-      </a>
+      </Link>
       <ul
         className="menu__list"
         ref={menuListRef}
@@ -132,6 +166,7 @@ function DocSidebarItemCategory({
           <DocSidebarItem
             tabIndex={collapsed ? '-1' : '0'}
             key={childItem.label}
+            link={link}
             item={childItem}
             onItemClick={onItemClick}
             collapsible={collapsible}
@@ -268,6 +303,7 @@ function DocSidebar({
             <DocSidebarItem
               key={item.label}
               item={item}
+              link={item.type === 'category' ? item.link : ''}
               onItemClick={(e) => {
                 e.target.blur();
                 setShowResponsiveSidebar(false);

packages/docusaurus-theme-classic/src/types.d.ts

@@ -77,7 +77,7 @@ declare module '@theme/DocSidebar' {
 
   export type Props = {
     readonly path: string;
-    readonly sidebar: readonly PropSidebarItem[];
+    readonly sidebar: PropSidebarItem[];
     readonly sidebarCollapsible?: boolean;
     readonly onCollapse: () => void;
     readonly isHidden: boolean;

website/docusaurus.config.js

@@ -282,6 +282,7 @@ const LocaleConfigs = isI18nStaging
   ],
   themeConfig: {
     hideableSidebar: true,
+    sidebarCollapsible: true,
     colorMode: {
       defaultMode: 'light',
       disableSwitch: false,

website/sidebars.js

@@ -15,12 +15,14 @@ module.exports = {
     {
       type: 'category',
       label: 'Getting Started',
+      link: {type: 'link', href: 'https://google.com'},
       collapsed: false,
       items: ['installation', 'configuration', 'typescript-support'],
     },
     {
       type: 'category',
       label: 'Guides',
+      link: {type: 'doc', id: 'creating-pages'},
       items: [
         'guides/creating-pages',
         {