From 3b00d865310e364a1e374c8ac23caeb2be2ff41b Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 20 Aug 2026 22:34:35 +0100
Subject: [PATCH] Enhance Dashboard Sidebar Layout and Button Interaction

- Added a Divider component to improve visual separation within the DashboardSidebar.
- Refactored the button layout to ensure full-width styling and better alignment, enhancing user interaction when collapsing or expanding the sidebar.
- Updated Flex container properties for improved responsiveness and layout consistency.
---
 .../Dashboard/common/DashboardSidebar.jsx     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/common/DashboardSidebar.jsx b/src/components/Dashboard/common/DashboardSidebar.jsx
index 9cd15116..e01cd478 100644
--- a/src/components/Dashboard/common/DashboardSidebar.jsx
+++ b/src/components/Dashboard/common/DashboardSidebar.jsx
@@ -5,7 +5,7 @@ import {
   useEffect,
   useContext
 } from 'react'
-import { Layout, Menu, Flex, Button } from 'antd'
+import { Layout, Menu, Flex, Button, Divider } from 'antd'
 import { CaretDownFilled } from '@ant-design/icons'
 import CollapseSidebarIcon from '../../Icons/CollapseSidebarIcon'
 import ExpandSidebarIcon from '../../Icons/ExpandSidebarIcon'
@@ -152,14 +152,18 @@ const DashboardSidebar = ({
             _internalDisableMenuItemTitleTooltip
           />
         </SimpleBar>
-        <Flex style={{ padding: '4px', width: '100%' }}>
-          <Button
-            size={isElectron ? 'middle' : 'large'}
-            type='text'
-            icon={collapsed ? <ExpandSidebarIcon /> : <CollapseSidebarIcon />}
-            style={{ flexGrow: 1 }}
-            onClick={() => handleCollapse(!collapsed)}
-          />
+
+        <Flex vertical style={{ width: '100%' }}>
+          <Divider style={{ margin: 0 }} />
+          <Flex style={{ padding: '4px', width: '100%' }}>
+            <Button
+              size={isElectron ? 'middle' : 'large'}
+              type='text'
+              icon={collapsed ? <ExpandSidebarIcon /> : <CollapseSidebarIcon />}
+              style={{ flexGrow: 1, width: '100%' }}
+              onClick={() => handleCollapse(!collapsed)}
+            />
+          </Flex>
         </Flex>
       </Flex>
     </Sider>