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

AI Prompt for Enhanced User Profile Dashboard with Full Forms and Buttons "Design a modern, interactive user profile dashboard featuring a left side navigation menu and detailed, user friendly forms for each section. Each section (Profile, Security, Multi Factor, Settings, Sessions, Groups, Privacy, Compliance) should include intuitive buttons, complete forms, and a clean, minimalist design style. Key Design Enhancements: Left Side Navigation Menu: Display a vertical left menu with icons and labels for each section, clearly highlighting the active section. Add a “Back to Dashboard” button with a clear icon at the top of the menu. Ensure hover effects for each menu item for a more interactive feel. Profile Section Layout: User Info Card: Display user information (name, job title, location) with an "Edit Profile" button that opens a form in a modal for updating profile details. Contact Information Form: Include editable fields for email and phone, with “Save” and “Cancel” buttons for each field to allow updates directly. Security Overview: Show security level (e.g., "High") with an “Update” button for updating security settings, like last password change. Security and Multi Factor Authentication (MFA): Security Settings: Each security option (Password Settings, Geo fencing, IP Restrictions, Device Management) should have a toggle switch and a “Configure” button. Use tooltips or info icons to provide brief explanations of each setting. MFA Setup: List all MFA options (SMS, Email, Authenticator App) with toggle switches and “Setup” buttons to enable/disable each method. The “Setup” button should open a guided form for each method. Settings, Sessions, Groups, Privacy, Compliance: Settings: Provide a form based layout for each setting, including tabs or sections for Preferences, Authorized Websites, Linked Accounts, etc. Include “Save Changes” and “Reset” buttons. Sessions: List active sessions with details (device type, location, last login). Include an “End Session” button in red for each session to terminate it. Groups: Allow users to view and manage group memberships with “Join Group” or “Leave Group” buttons. Privacy and Compliance: Display privacy settings with toggle switches for data preferences and compliance information. Include “Download Compliance Report” and “Update Privacy Preferences” buttons for easy management. General Design and UX: Use Material UI components for buttons, cards, and inputs to ensure a consistent and polished look. Incorporate subtle hover animations and responsive feedback for all buttons. Use a muted color scheme with accent colors for buttons and active elements. Implementation Steps with React & Material UI** Setup and Component Structure: Organize components for each section (Profile, Security, etc.) in separate files to maintain clean and modular code. Use Material UI Drawer for the left navigation, Card and CardContent for section layouts, and Button components for actions like “Edit”, “Save”, and “Cancel.” Interactive Forms: In each section, design forms with TextField for input fields and Switch for toggles. Use Dialog or Modal for popup forms when editing detailed settings, ensuring smooth animations and transitions. Ensure that all forms have “Save” and “Cancel” buttons, and add validation for input fields where necessary. Buttons and Hover Effects: Use Button components with icons where applicable (e.g., “Edit Profile” with an edit icon). Add hover effects and a shadow or color change on button hover for better user experience. Apply consistent padding, margin, and border radius for a unified style across all buttons. This design prompt will guide the AI to create a highly interactive, fully featured user profile dashboard with all essential forms, buttons, and settings for each section. This setup ensures the interface is user friendly, with visual feedback and smooth transitions for a seamless experience.