Implement Collapsible Sidebar Function with Modular, Reusable Widget Components

[rifkybujana]

Implement Collapsible Sidebar Function with Modular, Reusable Widget Components

Description:
We need to add a collapsible function to the sidebar, which will allow it to hide or collapse on small window widths. This function should be modular and reusable, so the sidebar can be toggled easily across different sections of the UI. Additionally, the sidebar should automatically collapse when the window width is below a certain threshold.

Tasks:

1. Restructure sidebar UI as modular widget components:

   • Refactor the sidebar into modular components, allowing each section or element in the sidebar to be reused independently.
   • Organize these components so they can be combined easily for different sections in the UI.
   • Ensure the components are flexible and do not rely on a specific sidebar layout, enabling reuse across the application.

2. Implement the collapsible function:

   • Create a reusable function that can toggle the sidebar’s visibility (collapsed/expanded).
   • Add an animation or smooth transition effect when the sidebar collapses or expands, if possible.
   • Ensure the function is modular so it can be applied to any sidebar instance across the application.

3. Auto-collapse on small window width:

   • Add a mechanism to monitor the window width and automatically trigger the collapse function when the width falls below a certain threshold (e.g., 600px).
   • Ensure that when the window is resized back to a larger width, the sidebar expands if it was collapsed automatically.

4. UI integration and testing:

   • Integrate the collapsible sidebar functionality across relevant sections in the application.
   • Test the behavior on various screen sizes and verify that the sidebar collapses and expands as expected.
   • Ensure that the components retain their layout and functionality when the sidebar is collapsed or expanded.

5. Add a manual toggle for user control:

   • Include a button or icon in the UI for manually collapsing and expanding the sidebar, allowing users to control the sidebar visibility regardless of window size.
   • Ensure this button is intuitive and maintains functionality across different sections where the sidebar is used.

6. Testing:

   • Verify that the sidebar automatically collapses on small screens and maintains a smooth transition when collapsing or expanding.
   • Test the modularity by reusing the sidebar components in multiple UI sections.
   • Ensure the sidebar remains functional and responsive on various platforms (Linux, macOS, Windows) and screen resolutions.

7. Update documentation:

   • Document the collapsible function, including instructions for adding it to different sidebar instances.
   • Provide details on the auto-collapse feature, including how to adjust the window width threshold if needed.

Acceptance Criteria:

• The sidebar can collapse and expand, both manually and automatically based on window width.
• The collapsible function is modular and reusable across different sidebar instances.
• The sidebar’s components are modularized into widget components, making them reusable in different sections of the UI.
• Documentation is updated to explain the collapsible sidebar feature and its integration process.

Additional Context:

• The project currently uses ImGui, so the collapsible function and modular widget components should integrate seamlessly with ImGui’s framework.
• The auto-collapse threshold should be customizable in case future adjustments are needed.