diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index 187cbee809d3..defe49b14c43 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -38,7 +38,7 @@ function DocPageContent({
   const {pluginId, permalinkToSidebar, docsSidebars, version} = versionMetadata;
   const sidebarName = permalinkToSidebar[currentDocRoute.path];
   const sidebar = docsSidebars[sidebarName];
-
+  console.log(sidebar);
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   const [hiddenSidebar, setHiddenSidebar] = useState(false);
   const toggleSidebar = useCallback(() => {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
index fa7a51b8301e..9b77aac3fc54 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
@@ -29,6 +29,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);
@@ -46,6 +50,7 @@ function DocSidebarItemCategory({
   onItemClick,
   collapsible,
   activePath,
+  link,
   ...props
 }) {
   const {items, label} = item;
@@ -61,6 +66,7 @@ function DocSidebarItemCategory({
     }
     return isActive ? false : item.collapsed;
   });
+  const [initialLink, setInitialLink] = useState('');
 
   const menuListRef = useRef<HTMLUListElement>(null);
   const [menuListHeight, setMenuListHeight] = useState<string | undefined>(
@@ -78,17 +84,32 @@ function DocSidebarItemCategory({
     if (justBecameActive && collapsed) {
       setCollapsed(false);
     }
+    if (link && !collapsed) {
+      for (const i in items) {
+        if (items.hasOwnProperty(i)) {
+          const childItem = items[i];
+          if (childItem.type === 'link') {
+            if (link.id.includes(childItem.label.toLowerCase())) {
+              setInitialLink(childItem.href);
+            }
+          }
+        }
+      }
+    }
   }, [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],
   );
@@ -103,17 +124,27 @@ 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,
         })}
+        {...(isInternalUrl(initialLink)
+          ? {
+              isNavLink: true,
+              exact: 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}
@@ -129,6 +160,7 @@ function DocSidebarItemCategory({
           <DocSidebarItem
             tabIndex={collapsed ? '-1' : '0'}
             key={childItem.label}
+            link={link}
             item={childItem}
             onItemClick={onItemClick}
             collapsible={collapsible}
@@ -268,6 +300,7 @@ function DocSidebar({
             <DocSidebarItem
               key={item.label}
               item={item}
+              link={item.link}
               onItemClick={(e) => {
                 e.target.blur();
                 setShowResponsiveSidebar(false);
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index d76e5a3f4dc1..37941dcf15c4 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -73,11 +73,11 @@ declare module '@theme/DocPaginator' {
 }
 
 declare module '@theme/DocSidebar' {
-  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
+  // import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
 
   export type Props = {
     readonly path: string;
-    readonly sidebar: readonly PropSidebarItem[];
+    readonly sidebar: any;
     readonly sidebarCollapsible?: boolean;
     readonly onCollapse: () => void;
     readonly isHidden: boolean;
diff --git a/website/sidebars.js b/website/sidebars.js
index 2866dcae1de8..b07f47fedd6e 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -15,12 +15,14 @@ module.exports = {
     {
       type: 'category',
       label: 'Getting Started',
+      link: {type: 'doc', id: 'introduction'},
       collapsed: false,
       items: ['installation', 'configuration', 'typescript-support'],
     },
     {
       type: 'category',
       label: 'Guides',
+      link: {type: 'doc', id: 'deployment'},
       items: [
         'guides/creating-pages',
         'styling-layout',
@@ -37,6 +39,7 @@ module.exports = {
     {
       type: 'category',
       label: 'Advanced Guides',
+      link: {type: 'doc', id: 'presets'},
       items: ['using-plugins', 'using-themes', 'presets'],
     },
   ],