Implement Split Pane Between MapsContainer and DashboardContainer

[JordanChen123]

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:

The split pane in between can be dragged left or right to adjust the sizes of the two panes.

General Steps:

1. Research and choose a suitable split pane library, such as react-multi-split-pane.
2. Replace the current CSS grid layout in mainContainer with the split pane component.
3. Ensure that the Maps Container and Dashboard Container are within the split pane to allow resizing.
4. Adjust CSS styles as needed to ensure that the split pane works as expected on different screen sizes.

Resources

• You might find libraries such as react-multi-split-pane useful: https://www.npmjs.com/package/react-multi-split-pane
• You may have to use the legacy-peer-deps flag with npm to bypass peer dependency issues when installing react-multi-split-pane
• Sample Website with the split pane: https://www.svgviewer.dev/
• Home Container (The actual website): https://github.com/UBCSailbot/sailbot_workspace/blob/main/src/website/pages/index.tsx