Roos-fs-ZIP

The left-side menu needs to become collapsible, allowing users to expand or collapse it using a toggle arrow. When collapsed, the menu should reduce to a slim vertical bar that still displays key icons. The rest of the application layout must automatically adjust to the collapsed/expanded state. This is needed to host a new functionality - project management.

Requirements

1. Add Collapse/Expand Toggle

• Add an arrow button at the top of the left-side menu.
• When clicked:
• If the menu is expanded → collapse it.
• If the menu is collapsed → expand it.
• The arrow icon should also rotate accordingly to indicate the next action.

2. Collapsed State Behavior

• When collapsed:
• The left menu shrinks to a minimal-width strip (icon size).
• Only menu icons remain visible (no labels).
• Hovering over an icon may show a tooltip with the name.
• The collapsed version must remain fully functional for navigation.

3. Expanded State Behavior

• When expanded:
• Full menu width (e.g., 240px) is restored.
• Icons + labels are visible.
• All menu groups and items function normally.

4. Responsive Layout Adjustment

• The entire screen layout must adapt when the menu changes state:
• The main content area expands when the menu collapses.
• The main content area shrinks when the menu expands.
• No overlapping or layout breaking should occur.
• The UI must remain fluid and responsive.

5. Persistence

• The system should remember the user’s last chosen state (collapsed or expanded), so it remains consistent across page reloads.

6. Visual Requirements

• Smooth animation for collapse/expand.
• Clear indicator arrow (left/right depending on state).
• Icons remain centered within the collapsed menu.
• Divider separators should scale properly.
• General consistency