website: add to mobile nav

website/src/components/SidebarAd/index.js

@@ -8,7 +8,6 @@ import styles from './styles.module.css';
 
 const BACKGROUNDS = [
   styles.backgroundBlue,
-  styles.backgroundGreen,
   styles.backgroundOrange,
   styles.backgroundPurple,
   styles.backgroundRed,

website/src/components/SidebarAd/styles.module.css

@@ -22,10 +22,6 @@
   background-image: linear-gradient(39deg, rgb(255, 81, 47), rgb(240, 152, 25));
 }
 
-.backgroundGreen {
-  background-image: linear-gradient(198deg, rgb(29, 151, 108), rgb(147, 249, 185));
-}
-
 .backgroundBlue {
   background-image: linear-gradient(153deg, rgb(116, 116, 191), rgb(52, 138, 199));
 }

website/src/theme/DocSidebar/index.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {useState} from 'react';
+import clsx from 'clsx';
+import {
+  useThemeConfig,
+  useAnnouncementBar,
+  MobileSecondaryMenuFiller,
+} from '@docusaurus/theme-common';
+import useWindowSize from '@theme/hooks/useWindowSize';
+import useScrollPosition from '@theme/hooks/useScrollPosition';
+import Logo from '@theme/Logo';
+import IconArrow from '@theme/IconArrow';
+import {translate} from '@docusaurus/Translate';
+import {DocSidebarItems} from '@theme/DocSidebarItem';
+import styles from './styles.module.css';
+import SidebarAd from '../../components/SidebarAd';
+
+function useShowAnnouncementBar() {
+  const {isClosed} = useAnnouncementBar();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(!isClosed);
+  useScrollPosition(({scrollY}) => {
+    if (!isClosed) {
+      setShowAnnouncementBar(scrollY === 0);
+    }
+  });
+  return showAnnouncementBar;
+}
+
+function HideableSidebarButton({onClick}) {
+  return (
+    <button
+      type="button"
+      title={translate({
+        id: 'theme.docs.sidebar.collapseButtonTitle',
+        message: 'Collapse sidebar',
+        description: 'The title attribute for collapse button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.collapseButtonAriaLabel',
+        message: 'Collapse sidebar',
+        description: 'The title attribute for collapse button of doc sidebar',
+      })}
+      className={clsx(
+        'button button--secondary button--outline',
+        styles.collapseSidebarButton,
+      )}
+      onClick={onClick}>
+      <IconArrow className={styles.collapseSidebarButtonIcon} />
+    </button>
+  );
+}
+
+function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
+  const showAnnouncementBar = useShowAnnouncementBar();
+  const {
+    navbar: {hideOnScroll},
+    hideableSidebar,
+  } = useThemeConfig();
+  const {isClosed: isAnnouncementBarClosed} = useAnnouncementBar();
+  return (
+    <div
+      className={clsx(styles.sidebar, {
+        [styles.sidebarWithHideableNavbar]: hideOnScroll,
+        [styles.sidebarHidden]: isHidden,
+      })}>
+      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <nav
+        className={clsx('menu thin-scrollbar', styles.menu, {
+          [styles.menuWithAnnouncementBar]:
+            !isAnnouncementBarClosed && showAnnouncementBar,
+        })}>
+        <ul className="menu__list">
+          <DocSidebarItems items={sidebar} activePath={path} />
+        </ul>
+      </nav>
+      {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
+    </div>
+  );
+}
+
+const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => {
+  return (
+    <ul className="menu__list">
+      <DocSidebarItems
+        items={sidebar}
+        activePath={path}
+        onItemClick={() => toggleSidebar()}
+      />
+      <div className="margin--md">
+        <SidebarAd />
+      </div>
+    </ul>
+  );
+};
+
+function DocSidebarMobile(props) {
+  return (
+    <MobileSecondaryMenuFiller
+      component={DocSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+
+const DocSidebarDesktopMemo = React.memo(DocSidebarDesktop);
+const DocSidebarMobileMemo = React.memo(DocSidebarMobile);
+export default function DocSidebar(props) {
+  const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
+
+  const shouldRenderSidebarDesktop =
+    windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
+
+  const shouldRenderSidebarMobile = windowSize === 'mobile';
+  return (
+    <>
+      {shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}
+      {shouldRenderSidebarMobile && <DocSidebarMobileMemo {...props} />}
+    </>
+  );
+}

website/src/theme/DocSidebar/styles.module.css

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  --collapse-button-bg-color-dark: #2e333a;
+}
+
+@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;
+  }
+
+  .menu {
+    flex-grow: 1;
+    padding: 0.5rem;
+  }
+
+  .menuWithAnnouncementBar {
+    margin-bottom: var(--docusaurus-announcement-bar-height);
+  }
+
+  .collapseSidebarButton {
+    display: block !important;
+    background-color: var(--ifm-button-background-color);
+    height: 40px;
+    position: sticky;
+    bottom: 0;
+    border-radius: 0;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
+
+  .collapseSidebarButtonIcon {
+    transform: rotate(180deg);
+    margin-top: 4px;
+  }
+  html[dir='rtl'] .collapseSidebarButtonIcon {
+    transform: rotate(0);
+  }
+
+  html[data-theme='dark'] .collapseSidebarButton {
+    background-color: var(--collapse-button-bg-color-dark);
+  }
+
+  html[data-theme='dark'] .collapseSidebarButton:hover,
+  html[data-theme='dark'] .collapseSidebarButton:focus {
+    background-color: var(--ifm-color-emphasis-200);
+  }
+}
+
+.sidebarLogo,
+.collapseSidebarButton {
+  display: none;
+}
+
+.sidebarMenuIcon {
+  vertical-align: middle;
+}
+
+.sidebarMenuCloseIcon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  font-size: 1.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 0.9;
+  width: 24px;
+}