Enhance DashboardSidebar with SimpleBar for improved scrolling experience and adjust CSS for sidebar styling. Set body overflow to hidden to prevent background scrolling.

assets/stylesheets/App.css

@@ -196,6 +196,7 @@ code {
 /* --- Start of src/index.css --- */
 body {
   margin: 0;
+  overflow: hidden;
 }
 
 .ant-modal-mask {
@@ -602,3 +603,32 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   min-width: 0;
   height: 20px;
 }
+
+.sidebar-scroll .simplebar-track.simplebar-vertical {
+  right: -1px;
+  width: 0px !important;
+  transition:
+    width 0.15s ease-in-out,
+    right 0.15s ease-in-out;
+}
+
+.sidebar-scroll.dark .simplebar-track.simplebar-vertical {
+  background-color: #141414;
+  border-inline-end: 1px solid rgba(253, 253, 253, 0.12);
+  border-bottom: 1px solid rgba(253, 253, 253, 0.12);
+  border-radius: 0 0 5px 0;
+}
+
+.sidebar-scroll.simplebar-scrolling .simplebar-track.simplebar-vertical {
+  width: 10px !important;
+  right: -11px;
+}
+
+.sidebar-scroll
+  .simplebar-track.simplebar-vertical
+  .simplebar-scrollbar:before {
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  right: 3px;
+}

src/components/Dashboard/common/DashboardSidebar.jsx

@@ -8,6 +8,8 @@ import { useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { ElectronContext } from '../context/ElectronContext'
 import { getSidebarIconNode } from '../../Icons/sidebarIconMap'
+import SimpleBar from 'simplebar-react'
+import { useThemeContext } from '../context/ThemeContext'
 const { Sider } = Layout
 
 const DashboardSidebar = ({
@@ -24,7 +26,7 @@ const DashboardSidebar = ({
   })
   const isMobile = useMediaQuery({ maxWidth: 768 })
   const navigate = useNavigate()
-
+  const { isDarkMode } = useThemeContext()
   const { isElectron } = useContext(ElectronContext)
 
   useEffect(() => {
@@ -90,11 +92,14 @@ const DashboardSidebar = ({
       className={isElectron ? 'electron-sider' : ''}
     >
       <Flex
-        style={{ height: '100%' }}
+        style={{ height: '100%', minHeight: 0 }}
         vertical
         className='ant-menu-root ant-menu-inline ant-menu-light'
       >
-        <div style={{ maxHeight: '100%', overflowY: 'auto', height: '100%' }}>
+        <SimpleBar
+          style={{ flexGrow: 1, minHeight: 0 }}
+          className={`sidebar-scroll ${isDarkMode ? 'dark' : 'light'}`}
+        >
           <Menu
             mode='inline'
             selectedKeys={[selectedKey]}
@@ -103,7 +108,7 @@ const DashboardSidebar = ({
             style={{ flexGrow: 1, border: 'none' }}
             _internalDisableMenuItemTitleTooltip
           />
-        </div>
+        </SimpleBar>
         <Flex style={{ padding: '4px', width: '100%' }}>
           <Button
             size={isElectron ? 'middle' : 'large'}