Dashboard - Copy this React, Tailwind Component to your project

add to this sidebar that dynamically adjusts the content area of the page based on whether the sidebar is open or closed. The sidebar should use the provided code, which includes functionality for toggling the sidebar visibility, switching between dark and light modes, and highlighting the active section. Here's what you need to implement: Sidebar Component: The sidebar should toggle its width and content visibility when opened or closed. It should switch between dark and light modes based on user interaction. Include navigation items with icons and labels that change appearance based on the active section. Content Adjustment: Implement a layout where the content area of the page adjusts its width depending on whether the sidebar is open or closed. Ensure smooth transitions between sidebar states. Responsive Behavior: Ensure that the sidebar adjusts its visibility based on the screen width (e.g., show the sidebar in a wider view and hide it in a narrower view).