[Feature] Vertical Sidebar | Implement Responsive Vertical Sidebar with Expand/Collapse Functionality

[ariefgp]

Related Document

• Document 1
• Document 2

Related issues

• [Feature] Vertical Sidebar | Role-Based Navigation in Sidebar #3104
• [Feature] Vertical Sidebar | Dynamic Project Sub-Menu in Sidebar #3105
• [Feature] Vertical Sidebar | Favorites Menu in Sidebar #3106
• [Feature] Task Detail | Add Task to Favorites from Task Detail Page #3107
• [Feature] Task List | View All Tasks in a Team #3108

---

As a user, I want a responsive vertical sidebar that I can expand or collapse, so I can efficiently navigate the Ever Team platform while optimizing my workspace.

Detailed Flow

1. User logs into the Ever Team platform
2. System displays the vertical sidebar on the left side of the screen
3. Sidebar shows main navigation items: Dashboards, Favorites, Tasks, Projects, Reports
4. Each item has an icon and text label
5. User sees a toggle button to expand/collapse the sidebar
6. User clicks the toggle button to collapse the sidebar
7. Sidebar collapses to show only icons
8. User clicks the toggle button again to expand the sidebar
9. Sidebar expands to show icons and text labels
10. User navigates to different pages using the sidebar
11. Sidebar state (expanded/collapsed) persists across pages and sessions
12. Sidebar content:
    • Dashboards
    • Favorites
    • Tasks
      • Team's Tasks
      • My Tasks
    • Projects (list) <- show all project list
      • The sub menu is based on list of project name, sample:
        • Teams -> if clicked, it will show list of tasks in this project
        • Gauzy
        • IQ
    • Reports
      • Timesheets

Wireframe

Acceptance Criteria

• Vertical sidebar is consistently present on all pages of the platform
• Sidebar contains main navigation items with relevant icons and clear text labels
• A toggle button allows users to expand/collapse the sidebar
• In collapsed state, only icons are visible for main items
• In expanded state, both icons and text labels are visible
• Clicking on a main item navigates to the corresponding page
• Sidebar is responsive and adjusts appropriately on different screen sizes
• Sidebar state (expanded/collapsed) is remembered across different pages and user sessions
• Hover over icons in collapsed state shows item labels (tooltip)
• Sidebar doesn't obstruct main content on smaller screens
• Collapsing the sidebar increases the available space for main content

Related Informations