From 1a59ad96189c7cb33dd9c5ecda542b00cc1cd36e Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 24 Aug 2025 00:08:26 +0100
Subject: [PATCH] Started work on scroll bars.

---
 assets/stylesheets/App.css                    | 56 +++++++++++++++++++
 assets/stylesheets/DarkScrollbar.css          | 28 ++++++++++
 src/components/Dashboard/Layout.jsx           |  8 ++-
 .../Dashboard/common/DashboardSidebar.jsx     | 18 +++---
 4 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 assets/stylesheets/DarkScrollbar.css

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index d3f4b60..12e3134 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -235,4 +235,60 @@ body {
 
 .farmcontrol-splitter > .ant-splitter-bar {
  margin: 8px
+}
+
+
+.dark-mode {
+  --sb-track-color: #1d1d1d;
+  --sb-thumb-color: #848484;
+  --sb-size: 8px;
+}
+
+.light-mode {
+  --sb-thumb-color: #87878718;
+  --sb-size: 8px;
+}
+
+
+::-webkit-scrollbar {
+    width: 10px;
+    border-radius: 34px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #8888881a;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    transition: all 1s;
+    -moz-transition: all 1s;
+    -webkit-transition: all 1s;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  border-left: none;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  border-top: none;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #5555551f;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:vertical:hover {
+  border-left: none;
+}
+
+::-webkit-scrollbar-thumb:horizontal:hover {
+  border-top: none;
 }
\ No newline at end of file
diff --git a/assets/stylesheets/DarkScrollbar.css b/assets/stylesheets/DarkScrollbar.css
new file mode 100644
index 0000000..fbed125
--- /dev/null
+++ b/assets/stylesheets/DarkScrollbar.css
@@ -0,0 +1,28 @@
+
+body {
+  --sb-track-color: #1d1d1d;
+  --sb-thumb-color: #848484;
+  --sb-size: 8px;
+}
+
+body::-webkit-scrollbar {
+  width: var(--sb-size)
+}
+
+body::-webkit-scrollbar-track {
+  background: var(--sb-track-color);
+  border-radius: 4px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb-color);
+  border-radius: 4px;
+  
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  body {
+    scrollbar-color: var(--sb-thumb-color)
+                     var(--sb-track-color);
+  }
+}
\ No newline at end of file
diff --git a/src/components/Dashboard/Layout.jsx b/src/components/Dashboard/Layout.jsx
index 7dd4e2a..c4f2a78 100644
--- a/src/components/Dashboard/Layout.jsx
+++ b/src/components/Dashboard/Layout.jsx
@@ -8,6 +8,7 @@ import ManagementSidebar from './Management/ManagementSidebar'
 import DashboardNavigation from './common/DashboardNavigation'
 import DashboardBreadcrumb from './common/DashboardBreadcrumb'
 import DeveloperSidebar from './Developer/DeveloperSidebar'
+import { useThemeContext } from './context/ThemeContext'
 
 const { Content } = Layout
 
@@ -18,8 +19,13 @@ const DashboardLayout = ({ children }) => {
   const isManagement = location.pathname.startsWith('/dashboard/management')
   const isDeveloper = location.pathname.startsWith('/dashboard/developer')
 
+  const { isDarkMode } = useThemeContext()
+
   return (
-    <Layout style={{ height: 'var(--unit-100vh)' }}>
+    <Layout
+      style={{ height: 'var(--unit-100vh)' }}
+      className={isDarkMode ? 'dark-mode' : 'light-mode'}
+    >
       <DashboardNavigation />
       <Layout>
         {isProduction ? (
diff --git a/src/components/Dashboard/common/DashboardSidebar.jsx b/src/components/Dashboard/common/DashboardSidebar.jsx
index e8c89de..969eb15 100644
--- a/src/components/Dashboard/common/DashboardSidebar.jsx
+++ b/src/components/Dashboard/common/DashboardSidebar.jsx
@@ -93,14 +93,16 @@ const DashboardSidebar = ({
         vertical
         className='ant-menu-root ant-menu-inline ant-menu-light'
       >
-        <Menu
-          mode='inline'
-          selectedKeys={[selectedKey]}
-          items={_items}
-          className={isElectron ? 'electron-sidebar' : null}
-          style={{ flexGrow: 1, border: 'none' }}
-          _internalDisableMenuItemTitleTooltip
-        />
+        <div style={{ maxHeight: '100%', overflowY: 'auto' }}>
+          <Menu
+            mode='inline'
+            selectedKeys={[selectedKey]}
+            items={_items}
+            className={isElectron ? 'electron-sidebar' : null}
+            style={{ flexGrow: 1, border: 'none' }}
+            _internalDisableMenuItemTitleTooltip
+          />
+        </div>
         <Flex style={{ padding: '4px', width: '100%' }}>
           <Button
             size='large'