Develop a Responsive Layout for our SaaS

[leandrosardi]

You will work on the source code of this repository: https://github.com/MassProspecting/layout

We need to improve the layout of our SaaS screens to make it more user-friendly, responsive, and reusable. Below is a summary of the requirements along with attached visual references to help understand the current and desired UI changes.

Overview

The current layout consists of three vertical panels on one of our screens (picture1.png and unibox.html), similar to the layout in the screenshots below. We would like to modify it so that it's more responsive, much like the UpWork chat interface (picture3.png).

Requirement Details

The following changes are required:

1. Responsiveness and Design Enhancement
   • Update the CSS and JavaScript code to make the existing layout NICE and RESPONSIVE.
   • The interface should adapt well to different screen sizes, as seen in the UpWork example (picture3.png).

2. Reusability
   • The modified layout components must be reusable so that they can be applied to other screens as well.
   • This means we need a flexible solution that allows the addition or removal of panels as per requirement.

<section id='pool1' name='pool1' class="pool1">
    <div id='panel1_panel' name='panel1_panel' class="pool1-panel">
        <div id='pool1_header' name='pool1_header' class="pool1-header">
              ...
        </div>
        <div id='list_div' name='list_div'>
            <section class='list'>
              ...
            </section>
        </div>
    </div>
</section>

<section id='pool2' name='pool2' class="pool2">
  ...
</section>

<section id='pool3' name='pool3' class="pool3">
  ...
</section>

3. Support for Variable Panel Count

   • Not all screens need three vertical panels. Modify the implementation to accommodate one, two, or three vertical panels.
   • This should be easily configurable based on the screen's requirements.

4. Scrollable Content with Fixed Positioning

   • Each vertical panel should have a fixed position, stretching from the top to the bottom of the screen.
   • Panels must be scrollable internally if their content is too large to fit.

5. Close Button for Panels
   • Each vertical panel should have a close button (X) at the top to hide it.
   • When a panel is closed, the other panels should expand to occupy the available space dynamically.

NOTE: Panels will be hidden automatically if the page resizes and the new width is too tight.

6. Arrow Button to Show/Hide Sibling Panels
   • Each vertical panel should have a left or right arrow button to hide/show sibling panels.
   • The arrows should dynamically adjust the panel layout when a neighboring panel is hidden.

7. Top-Label Div
   • Panels should have an optional "top-label div" to display a title or label for that specific panel, or other content.
   • This can be used to name the panel contextually.

8. Bottom-Label Div
   • Panels should have an optional "bottom-label div" to display other content.
   • This can be used to name the panel contextually.

9. Dropdown Menu in Top-Label Div
   • The top-label div should allow a dropdown menu to switch between different content divs.
   • This feature will be used to quickly navigate between different sections within the same panel.

10. Complete this README.md with examples about how to use your re-utilizable CSS/JS library. Write one example for each one of the 9 features listed above.