docs: enhanced sidebar context (#4165)

www/docs/src/theme/DocItem/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React from "react"
 import clsx from "clsx"
 import { useWindowSize } from "@docusaurus/theme-common"
 import { useDoc } from "@docusaurus/theme-common/internal"
@@ -12,7 +12,7 @@ import DocItemContent from "@theme/DocItem/Content"
 import DocBreadcrumbs from "@theme/DocBreadcrumbs"
 import type { Props } from "@theme/DocItem/Layout"
 import Footer from "@theme/Footer"
-import { SidebarContext } from "@site/src/context/sidebar"
+import { useSidebar } from "@site/src/providers/Sidebar"
 
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
@@ -40,7 +40,7 @@ function useDocTOC() {
 
 export default function DocItemLayout({ children }: Props): JSX.Element {
   const docTOC = useDocTOC()
-  const sidebarContext = useContext(SidebarContext)
+  const sidebarContext = useSidebar()
   return (
     <div className="row tw-m-0">
       <div

www/docs/src/theme/DocPage/Layout/Main/index.tsx

@@ -1,12 +1,12 @@
-import React, { useContext } from "react"
+import React from "react"
 import clsx from "clsx"
 import { useDocsSidebar } from "@docusaurus/theme-common/internal"
 import type { Props } from "@theme/DocPage/Layout/Main"
-import { SidebarContext } from "@site/src/context/sidebar"
+import { useSidebar } from "@site/src/providers/Sidebar"
 
 export default function DocPageLayoutMain({ children }: Props): JSX.Element {
   const sidebar = useDocsSidebar()
-  const sidebarContext = useContext(SidebarContext)
+  const sidebarContext = useSidebar()
   return (
     <main
       className={clsx(

www/docs/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode, useRef, useContext } from "react"
+import React, { type ReactNode, useRef } from "react"
 import clsx from "clsx"
 import { ThemeClassNames } from "@docusaurus/theme-common"
 import { useDocsSidebar } from "@docusaurus/theme-common/internal"
@@ -6,7 +6,7 @@ import { useLocation } from "@docusaurus/router"
 import DocSidebar from "@theme/DocSidebar"
 import type { Props } from "@theme/DocPage/Layout/Sidebar"
 import { SwitchTransition, CSSTransition } from "react-transition-group"
-import { SidebarContext } from "@site/src/context/sidebar"
+import { useSidebar } from "@site/src/providers/Sidebar"
 
 // Reset sidebar state when sidebar changes
 // Use React key to unmount/remount the children
@@ -25,7 +25,7 @@ export default function DocPageLayoutSidebar({
   hiddenSidebarContainer,
 }: Props): JSX.Element {
   const { pathname } = useLocation()
-  const sidebarContext = useContext(SidebarContext)
+  const sidebarContext = useSidebar()
   const { name } = useDocsSidebar()
   const sidebarRef = useRef(null)
 

www/docs/src/theme/DocPage/Layout/index.tsx

@@ -1,16 +1,16 @@
-import React, { useContext } from "react"
+import React from "react"
 import { useDocsSidebar } from "@docusaurus/theme-common/internal"
 import Layout from "@theme/Layout"
 import BackToTopButton from "@theme/BackToTopButton"
 import DocPageLayoutSidebar from "@theme/DocPage/Layout/Sidebar"
 import DocPageLayoutMain from "@theme/DocPage/Layout/Main"
 import type { Props } from "@theme/DocPage/Layout"
-import { SidebarContext } from "@site/src/context/sidebar"
 import clsx from "clsx"
+import { useSidebar } from "@site/src/providers/Sidebar"
 
 export default function DocPageLayout({ children }: Props): JSX.Element {
   const sidebar = useDocsSidebar()
-  const sidebarContext = useContext(SidebarContext)
+  const sidebarContext = useSidebar()
   return (
     <Layout wrapperClassName={clsx("tw-flex tw-flex-[1_0_auto]")}>
       <BackToTopButton />

www/docs/src/theme/DocPage/index.tsx

@@ -17,6 +17,7 @@ import NotFound from "@theme/NotFound"
 import SearchMetadata from "@theme/SearchMetadata"
 import type { Props } from "@theme/DocPage"
 import { SidebarContext } from "@site/src/context/sidebar"
+import SidebarProvider from "@site/src/providers/Sidebar"
 
 function DocPageMetadata(props: Props): JSX.Element {
   const { versionMetadata } = props
@@ -46,53 +47,6 @@ export default function DocPage(props: Props): JSX.Element {
   }
   const { docElement, sidebarName, sidebarItems } = currentDocRouteMetadata
 
-  const [hiddenSidebar, setHiddenSidebar] = useState(false)
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
-  const [floatingSidebar, setFloatingSidebar] = useState(false)
-  const toggleSidebar = useCallback(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false)
-    }
-    // onTransitionEnd won't fire when sidebar animation is disabled
-    // fixes https://github.com/facebook/docusaurus/issues/8918
-    if (!hiddenSidebar && prefersReducedMotion()) {
-      setHiddenSidebar(true)
-    }
-    setHiddenSidebarContainer((value) => !value)
-  }, [setHiddenSidebarContainer, hiddenSidebar])
-
-  useEffect(() => {
-    function isEditingContent(event: KeyboardEvent) {
-      const element = event.target as HTMLElement
-      const tagName = element.tagName
-      return (
-        element.isContentEditable ||
-        tagName === "INPUT" ||
-        tagName === "SELECT" ||
-        tagName === "TEXTAREA"
-      )
-    }
-
-    function sidebarShortcut(e: KeyboardEvent) {
-      if (
-        (e.metaKey || e.ctrlKey) &&
-        e.key.toLowerCase() === "i" &&
-        !isEditingContent(e)
-      ) {
-        e.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener("keydown", sidebarShortcut)
-
-    return () => {
-      window.removeEventListener("keydown", sidebarShortcut)
-    }
-  })
-
-  console.log(sidebarName)
-
   return (
     <>
       <DocPageMetadata {...props} />
@@ -107,20 +61,9 @@ export default function DocPage(props: Props): JSX.Element {
       >
         <DocsVersionProvider version={versionMetadata}>
           <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
-            <SidebarContext.Provider
-              value={{
-                hasSidebar: sidebarName !== undefined,
-                hiddenSidebar,
-                setHiddenSidebar,
-                hiddenSidebarContainer,
-                setHiddenSidebarContainer,
-                floatingSidebar,
-                setFloatingSidebar,
-                onCollapse: toggleSidebar,
-              }}
-            >
+            <SidebarProvider sidebarName={sidebarName}>
               <DocPageLayout>{docElement}</DocPageLayout>
-            </SidebarContext.Provider>
+            </SidebarProvider>
           </DocsSidebarProvider>
         </DocsVersionProvider>
       </HtmlClassNameProvider>

www/docs/src/theme/Navbar/Content/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, type ReactNode } from "react"
+import React, { type ReactNode } from "react"
 import { useThemeConfig } from "@docusaurus/theme-common"
 import {
   splitNavbarItems,
@@ -13,7 +13,7 @@ import Tooltip from "@site/src/components/Tooltip"
 import { ThemeConfig } from "@medusajs/docs"
 import useIsBrowser from "@docusaurus/useIsBrowser"
 import clsx from "clsx"
-import { SidebarContext } from "@site/src/context/sidebar"
+import { useSidebar } from "@site/src/providers/Sidebar"
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -70,7 +70,7 @@ export default function NavbarContent(): JSX.Element {
       sidebar: { hideable },
     },
   } = useThemeConfig() as ThemeConfig
-  const sidebarContext = useContext(SidebarContext)
+  const sidebarContext = useSidebar()
   const isBrowser = useIsBrowser()
 
   const isApple = isBrowser