Enhance the user interface by adding a split pane between the MapsContainer and DashboardContainer. This will allow users to resize the two sections for a better user experience and improved layout flexibility.
Description
Currently, the application displays the MapsContainer and DashboardContainer side by side using a CSS grid layout. We want to have a split pane between these containers to allow users to resize the Maps Container and Dashboard Container.
Example of a split pane:
The split pane in between can be dragged left or right to adjust the sizes of the two panes.
General Steps:
Research and choose a suitable split pane library, such as react-multi-split-pane.
Replace the current CSS grid layout in mainContainer with the split pane component.
Ensure that the Maps Container and Dashboard Container are within the split pane to allow resizing.
Adjust CSS styles as needed to ensure that the split pane works as expected on different screen sizes.
Purpose
Enhance the user interface by adding a split pane between the MapsContainer and DashboardContainer. This will allow users to resize the two sections for a better user experience and improved layout flexibility.
Description
Currently, the application displays the MapsContainer and DashboardContainer side by side using a CSS grid layout. We want to have a split pane between these containers to allow users to resize the Maps Container and Dashboard Container.
Example of a split pane:
General Steps:
react-multi-split-pane.mainContainerwith the split pane component.Resources
react-multi-split-paneuseful: https://www.npmjs.com/package/react-multi-split-panelegacy-peer-depsflag with npm to bypass peer dependency issues when installing react-multi-split-pane