In this challenge, you are tasked with creating a collapsible sidebar component that collapses and expands based on user interaction. The component should adhere to the provided designs.

Functional Requirements

1. Sidebar layout

• Display sidebar chips as per the design, with individual items as well as categories such as 'You' which has nested items 'History', 'Playlists', 'Watch later' and 'Liked videos'
• Hover and active states: Display hover and active states. By default, the first item 'Home' should be in active state

2. Collapsible behavior

• Implement a button to toggle the sidebar between expanded and collapsed states
• State Persistence: Remember the last state (expanded or collapsed) of the sidebar using local storage so that the user's preference is maintained across sessions.

General Requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
• Interactivity:
  • Link / Button states: Implement and style links and buttons to reflect different states - normal, hover, focus and disabled.
  • Sidebar chips: Implement in selected and normal states
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.