Drawer Header - Copy this React, Mui Component to your project

Design a responsive sidebar layout using React and MUI with the following features: Profile Section (Top of Sidebar): A small circular profile picture aligned to the left margin. Display the user's name and role to the right of the profile picture. Add an upload icon below the profile picture for uploading a new image. Sidebar Menu: Menu items: Profile, Dashboard, Orders, Products, Customers, Messages, Help Center (at the bottom), Logout (at the bottom). Highlight the active menu item with a distinct color. Add hover effects for interactivity. Include a modern toggle button for collapsing/expanding the sidebar. Top-Right Section (Profile Form Page): Add a notification icon to the top-right corner, styled with a badge for unread notifications. Add a "Visit Shop" button next to the notification icon, styled as a prominent CTA. Profile Form Page: Create a settings layout without a header and design the profile form as follows: Edit Profile: Fields: Name, Store Name, Location (dropdown), Currency (dropdown), Email, Phone, and Address. Change Password: Fields: Current Password, New Password, Confirm Password. Notifications: Toggles for options like Order Confirmation, Order Status Changed, Order Delivered, and Email Notification. Use a two-column layout: Left Column: Profile details and change password sections. Right Column: Notification preferences. Add a Save button at the bottom right, styled in a bold, distinct color. Follow the flat UI principles, typography, and spacing in the shared reference. Design Principles: Exclude the header to ensure a clean settings layout. Ensure responsiveness for all screen sizes. Use MUI components for all form fields, dropdowns, toggles, and buttons. Add smooth animations for interactions (e.g., toggle switches, sidebar collapse).