feat(v2): add logo and title in doc sidebar (#2161)

* feat(v2): add logo and title in doc sidebar

* fix: hide sidebar logo on small screens

packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css

@@ -13,6 +13,8 @@
   border-right: 1px solid var(--ifm-contents-border-color);
   box-sizing: border-box;
   width: 300px;
+  position: relative;
+  top: calc(-1 * var(--ifm-navbar-height));
 }
 
 .docMainContainer {

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

@@ -7,7 +7,8 @@
 
 import React, {useState, useCallback} from 'react';
 import classnames from 'classnames';
-
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 
 import styles from './styles.module.css';
@@ -104,6 +105,10 @@ function mutateSidebarCollapsingState(item, location) {
 
 function DocSidebar(props) {
   const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
+  const {
+    siteConfig: {themeConfig: {navbar: {title, logo = {}} = {}}} = {},
+  } = useDocusaurusContext();
+  const logoUrl = useBaseUrl(logo.src);
 
   const {
     docsSidebars,
@@ -132,6 +137,10 @@ function DocSidebar(props) {
 
   return (
     <div className={styles.sidebar}>
+      <div className={styles.sidebarLogo}>
+        {logo != null && <img src={logoUrl} alt={logo.alt} />}
+        {title != null && <strong>{title}</strong>}
+      </div>
       <div
         className={classnames('menu', 'menu--responsive', {
           'menu--show': showResponsiveSidebar,

packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css

@@ -11,7 +11,8 @@
     overflow-y: auto;
     padding: 0.5rem;
     position: sticky;
-    top: var(--ifm-navbar-height);
+    top: 0;
+    padding-top: var(--ifm-navbar-height);
   }
 
   .sidebar::-webkit-scrollbar {
@@ -31,6 +32,23 @@
   .sidebar::-webkit-scrollbar-thumb:hover {
     background: #555;
   }
+
+  .sidebarLogo {
+    display: flex !important;
+    align-items: center;
+    position: absolute;
+    top: var(--ifm-navbar-padding-horizontal);
+    padding: 0 0 0 var(--ifm-navbar-padding-vertical);
+  }
+
+  .sidebarLogo img {
+    margin-right: 0.5rem;
+    height: 2rem;
+  }
+}
+
+.sidebarLogo {
+  display: none;
 }
 
 .sidebarMenuIcon {