From 0ddd3b0cd00f607d0ef84253381eb164d8655c8a Mon Sep 17 00:00:00 2001
From: Siggi Simonarson <siggisim@gmail.com>
Date: Mon, 22 May 2023 11:18:01 -0700
Subject: [PATCH] Marketing page: Fix docs sidebar on mobile (#4036)

Co-authored-by: Siggi Simonarson <siggi@siggis-mbp-2.lan>
---
 website/src/theme/DocSidebar/index.js         | 121 ------------------
 .../src/theme/DocSidebar/styles.module.css    | 106 ---------------
 2 files changed, 227 deletions(-)
 delete mode 100644 website/src/theme/DocSidebar/index.js
 delete mode 100644 website/src/theme/DocSidebar/styles.module.css

diff --git a/website/src/theme/DocSidebar/index.js b/website/src/theme/DocSidebar/index.js
deleted file mode 100644
index f9bb9c1991b..00000000000
--- a/website/src/theme/DocSidebar/index.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * 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 { NavbarSecondaryMenuFiller, ThemeClassNames, useThemeConfig, useWindowSize } from "@docusaurus/theme-common";
-import { useAnnouncementBar, useScrollPosition } from "@docusaurus/theme-common/internal";
-import { translate } from "@docusaurus/Translate";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import DocSidebarItems from "@theme/DocSidebarItems";
-import IconArrow from "@theme/Icon/Arrow";
-import Logo from "@theme/Logo";
-import clsx from "clsx";
-import React, { useState } from "react";
-
-import styles from "./styles.module.css";
-
-function useShowAnnouncementBar() {
-  const { isActive } = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
-  useScrollPosition(
-    ({ scrollY }) => {
-      if (isActive) {
-        setShowAnnouncementBar(scrollY === 0);
-      }
-    },
-    [isActive]
-  );
-  return isActive && 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 shouldShowScrollbar = useIsBrowser() ? !/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) : false;
-  const showAnnouncementBar = useShowAnnouncementBar();
-  const {
-    navbar: { hideOnScroll },
-    hideableSidebar,
-  } = useThemeConfig();
-  return (
-    <div
-      className={clsx(styles.sidebar, {
-        [styles.sidebarWithHideableNavbar]: hideOnScroll,
-        [styles.sidebarHidden]: isHidden,
-      })}>
-      {" "}
-      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      <nav
-        className={clsx("menu", styles.menu, {
-          [styles.menuWithAnnouncementBar]: showAnnouncementBar,
-          "thin-scrollbar": shouldShowScrollbar,
-        })}>
-        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
-          <DocSidebarItems items={sidebar} activePath={path} level={1} />
-        </ul>
-      </nav>
-      {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
-    </div>
-  );
-} // eslint-disable-next-line react/function-component-definition
-
-const DocSidebarMobileSecondaryMenu = ({ toggleSidebar, sidebar, path }) => (
-  <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
-    <DocSidebarItems
-      items={sidebar}
-      activePath={path}
-      onItemClick={(item) => {
-        // Mobile sidebar should only be closed if the category has a link
-        if (item.type === "category" && item.href) {
-          toggleSidebar();
-        }
-
-        if (item.type === "link") {
-          toggleSidebar();
-        }
-      }}
-      level={1}
-    />
-  </ul>
-);
-
-function DocSidebarMobile(props) {
-  return <NavbarSecondaryMenuFiller 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} />}
-    </>
-  );
-}
diff --git a/website/src/theme/DocSidebar/styles.module.css b/website/src/theme/DocSidebar/styles.module.css
deleted file mode 100644
index 4c42f3d47ee..00000000000
--- a/website/src/theme/DocSidebar/styles.module.css
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * 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;
-}