docs: general design fixes (#2545)

* general fixes to the docs design

* fix condition checking for auto color scheme

docs/content/troubleshooting/documentation-error.md

@@ -1,7 +1,23 @@
-# Documentation Error
+# Troubleshooting Documentation Errors
+
+## React Hook Errors
 
 If you have installed the dependencies in the root of the Medusa repository (that is, if you have a `node_modules` directory at the root of the Medusa repository), this will cause an error when running the documentation website. 
 
 This is because the content resides in `docs/content`. When that content is being imported from there, a mix up can happen between the dependencies in the root of the Medusa repository and the dependencies in `www/docs` which causes an `invalid hook call` error.
 
 For that reason, when the `start` and `build` scripts in `www/docs` are used, the `clean-node-modules` script is called. This script deleted the `node_modules` directory in the root of the Medusa repository.
+
+## Out of Memory Error
+
+If you receive the following error when you run the `build` command in `www/docs`:
+
+```bash
+FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
+```
+
+Then, run the `build` command with the `NODE_OPTIONS` environment variable set:
+
+```bash npm2yarn
+NODE_OPTIONS="--max-old-space-size=8192" npm run build
+```

www/docs/src/css/_sidebar.css

@@ -236,4 +236,8 @@ html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__l
 
 .navbar-github-link {
   overflow: visible;
+}
+
+.sidebar-desktop:not(.scrolling) nav::-webkit-scrollbar {
+  --ifm-scrollbar-size: 0px;
 }

www/docs/src/theme/CodeBlock/index.js

@@ -1,4 +1,4 @@
-import React, {isValidElement} from 'react';
+import React, {isValidElement, useCallback, useEffect, useState} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import ElementContent from '@theme/CodeBlock/Content/Element';
@@ -36,7 +36,7 @@ export default function CodeBlock({children: rawChildren, ...props}) {
     <div className='code-wrapper'>
       <div className='code-header'>
         <Tooltip text="Report Incorrect Code">
-          <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? document?.title : ''}`)}`} target="_blank" className='report-code code-action img-url'>
+          <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
             <ThemedImage alt='Report Incorrect Code' sources={{
               light: useBaseUrl('/img/alert-code.png'),
               dark: useBaseUrl('/img/alert-code-dark.png')

www/docs/src/theme/ColorModeToggle/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import {useColorMode} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
 const allowedModes = [
   'light',
@@ -11,13 +11,18 @@ const allowedModes = [
 
 function ColorModeToggle({className, onChange}) {
   const isBrowser = useIsBrowser();
-  const [storageColorMode, setStorageColorMode] = useState('light')
+  const { colorMode } = useThemeConfig();
+  const [storageColorMode, setStorageColorMode] = useState('');
 
   useEffect(() => {
     if (isBrowser) {
       const previousSelected = window.localStorage.getItem('selected-color-mode') || window.localStorage.getItem('theme')
       if (previousSelected && allowedModes.includes(previousSelected)) {
         setStorageColorMode(previousSelected)
+      } else if (colorMode.respectPrefersColorScheme) {
+        setStorageColorMode('auto')
+      } else {
+        setStorageColorMode(colorMode.defaultMode || 'light')
       }
     }
   }, [isBrowser])

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import Logo from '@theme/Logo';
@@ -6,7 +6,8 @@ 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';
-import SearchBar from '../../SearchBar'
+import SearchBar from '../../SearchBar';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   const {
@@ -16,14 +17,47 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
     },
     sidebarFooter = [],
   } = useThemeConfig();
+  const isBrowser = useIsBrowser()
+  const sidebarRef = useRef(null)
+
+  useEffect(() => {
+    console.log("here1", isBrowser, sidebarRef.current)
+    if (isBrowser && sidebarRef.current) {
+      console.log("here2")
+      function handleScroll () {
+        console.log("handlescroll")
+        if (!sidebarRef.current.classList.contains('scrolling')) {
+          console.log("scrolling")
+          sidebarRef.current.classList.add('scrolling');
+          const intervalId = setInterval(() => {
+            console.log("interval")
+            if (!sidebarRef.current.matches(':hover')) {
+              console.log("remove class")
+              sidebarRef.current.classList.remove('scrolling');
+              clearInterval(intervalId);
+            }
+          }, 300)
+        }
+      }
+
+      const navElement = sidebarRef.current.querySelector('nav');
+      navElement.addEventListener('scroll', handleScroll);
+
+      return () => {
+        navElement?.removeEventListener('scroll', handleScroll);
+      }
+    }
+  }, [isBrowser, sidebarRef.current])
 
   return (
     <div
       className={clsx(
         styles.sidebar,
+        'sidebar-desktop',
         hideOnScroll && styles.sidebarWithHideableNavbar,
         isHidden && styles.sidebarHidden,
-      )}>
+      )}
+      ref={sidebarRef}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <div className={styles.sidebarSearchContainer}>
         <SearchBar />