docs: restructured docs sidebar (#2156)

* restructured docs sidebar

* resolved incorrect URLs

www/docs/src/theme/DocSidebar/Desktop/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import Logo from '@theme/Logo';
+import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
+import Content from '@theme/DocSidebar/Desktop/Content';
+import styles from './styles.module.css';
+import DocSidebarItem from '@theme/DocSidebarItem';
+
+function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
+  const {
+    navbar: {hideOnScroll},
+    docs: {
+      sidebar: {hideable},
+    },
+    sidebarFooter = [],
+  } = useThemeConfig();
+
+  return (
+    <div
+      className={clsx(
+        styles.sidebar,
+        hideOnScroll && styles.sidebarWithHideableNavbar,
+        isHidden && styles.sidebarHidden,
+      )}>
+      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <Content path={path} sidebar={sidebar} />
+      <ul className={
+        clsx(
+          styles.sidebarFooterList
+        )
+      }>
+        {sidebarFooter.map((item, index) => (
+          <DocSidebarItem key={index} item={item} index={index} level={1} />
+        ))}
+      </ul>
+      {hideable && <CollapseButton onClick={onCollapse} />}
+    </div>
+  );
+}
+export default React.memo(DocSidebarDesktop);

www/docs/src/theme/DocSidebar/Desktop/styles.module.css

@@ -0,0 +1,49 @@
+@media (min-width: 997px) {
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    height: 100%;
+    position: sticky;
+    top: 0;
+    padding-top: var(--ifm-navbar-height);
+    width: var(--doc-sidebar-width);
+    transition: opacity 50ms ease;
+  }
+
+  .sidebarWithHideableNavbar {
+    padding-top: 0;
+  }
+
+  .sidebarHidden {
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .sidebarLogo {
+    display: flex !important;
+    align-items: center;
+    margin: 0 var(--ifm-navbar-padding-horizontal);
+    min-height: var(--ifm-navbar-height);
+    max-height: var(--ifm-navbar-height);
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  .sidebarLogo img {
+    margin-right: 0.5rem;
+    height: 2rem;
+  }
+}
+
+.sidebarLogo {
+  display: none;
+}
+
+.sidebarFooterList {
+  border-top: 1px solid var(--ifm-toc-border-color);
+  list-style: none;
+  padding: 1.7em;
+}