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.

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
+        <Flex vertical style={{ width: '100%' }}>
-            size={isElectron ? 'middle' : 'large'}
+          <Divider style={{ margin: 0 }} />
-            type='text'
+          <Flex style={{ padding: '4px', width: '100%' }}>
-            icon={collapsed ? <ExpandSidebarIcon /> : <CollapseSidebarIcon />}
+            <Button
-            style={{ flexGrow: 1 }}
+              size={isElectron ? 'middle' : 'large'}
-            onClick={() => handleCollapse(!collapsed)}
+              type='text'
-          />
+              icon={collapsed ? <ExpandSidebarIcon /> : <CollapseSidebarIcon />}
+              style={{ flexGrow: 1, width: '100%' }}
+              onClick={() => handleCollapse(!collapsed)}
+            />
+          </Flex>
         </Flex>
       </Flex>
     </Sider>