Default Component - Copy this React, Tailwind Component to your project

Create a responsive sidebar component that integrates with a navbar. The sidebar should be divided into three distinct sections: Top Section: Include a combobox (dropdown) that displays the WorkArea options the current user is associated with. The combobox should list the name of each WorkArea and allow the user to switch between them. When a WorkArea is selected, the middle section of the sidebar should update to display the corresponding menus and submenus. Middle Section: Display the menus and submenus of the selected WorkArea. Each menu should display its name and icon. If a menu has submenus, it should include: A button to navigate directly to the menu's link (if applicable). A dropdown button to toggle the visibility of its submenus. Submenus should be nested under their parent menu and displayed when the dropdown button is clicked. Ensure this section has a scrollable area (scrollArea) if the content exceeds the height of the screen. Only display menus and submenus that the user has access to based on their allowedRoles. Bottom Section: Include a dropdown that displays the current user's information (e.g., name, email, or profile picture). The dropdown should have options for logging out or navigating to the user's profile. Additional Requirements: Use the provided types (WorkArea, WorkAreaWithId, AreaMenu, AreaSubMenu, BaseMenu, etc.) to ensure type safety. Ensure the sidebar is collapsible and works well on both desktop and mobile devices. Use Tailwind CSS or a similar utility first CSS framework for styling. Implement proper state management to handle the selected WorkArea, user data, and the expanded/collapsed state of menus with submenus. Ensure the component is reusable and modular.