PK
Prem Kore

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

"Generate a responsive web page using the color theme: Primary color: #8C2100 Secondary color: #C11114 Accent/neutral color: #707070Header Section A sticky header with: A title centered in the middle. A profile icon on the right. On clicking the profile icon, display a dropdown menu with options: Profile and Logout. Hamburger Side Menu A hamburger icon in the top left corner of the page. Clicking the hamburger icon toggles the side menu: Open State: Display a vertical side menu with 4 menu options, each having: Icons (aligned left). Text (aligned right). Closed State: Only display the menu icons in a compact vertical column. The selected menu option should: Be highlighted with a background color or border. Change text color when selected. Style Requirements Use a modern, responsive design. The side menu should: Slide in/out with an animation for smooth transitions. Be collapsible and adjust dynamically for desktop, tablet, and mobile views. Use a clean font and provide hover effects for interactive elements.

Prompt
Component Preview

About

drawerWidth - Create a responsive side menu with icons, text, and smooth animations. Built with React and MUI. Start coding now!

Share

Last updated 1 month ago