docs: general design fixes (#2545)

* general fixes to the docs design

* fix condition checking for auto color scheme

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 />