[Task]: Refact side bar with new design

[luizhcastro]

Objective

Refactor the existing sidebar component with a new design from the Figma prototype. The new sidebar should follow the project's code patterns and architecture while implementing the updated UI/UX design.

Design Reference: https://www.figma.com/design/fwgpxrsQ9mFoA30JR3c7xu/Blaboard---Prototype?node-id=55-305&t=40SPpdQKEc4JfMCh-4

Scope

Included in scope:

• Analyze and review the Figma design specifications
• Update sidebar component structure and styling to match the new design
• Maintain backward compatibility with existing sidebar functionality
• Ensure responsive design for mobile and desktop views
• Follow the project's React component patterns and conventions
• Maintain TypeScript type safety

Out of scope:

• Implementing new sidebar features beyond the design
• Database or backend changes
• Authentication system modifications

Acceptance criteria

• New sidebar component created with updated design from Figma
• All sidebar items are properly aligned and styled according to the design
• Sidebar is responsive on mobile devices (breakpoints: mobile, tablet, desktop)
• No console errors or TypeScript warnings
• All existing sidebar functionality is preserved and working
• Component exports are properly typed
• Code follows project's naming conventions and patterns
• Changes are tested in different screen sizes