Overview
The Drawer component provides a slide-out panel interface, ideal for navigation menus, settings panels, or additional content that doesn’t need to occupy the main viewport.
Basic Usage
import Drawer from '@newtonschool/grauity';
import { useState } from 'react';
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
<Drawer
isOpen={isOpen}
onClose={() => setIsOpen(false)}
position="left"
width="300px"
>
<h2>Drawer Content</h2>
<p>Your drawer content goes here</p>
</Drawer>
</>
);
}
Controls whether the drawer is visible.
Callback function when the drawer should be closed.
Side from which the drawer opens.Available choices: left, right
Make the drawer take up the full screen.
Close the drawer when clicking outside of it.
shouldFocusOnFirstElement
Automatically focus the first focusable element when opened.
Disable background scrolling when drawer is open.
Content to display inside the drawer.
Additional CSS class name.
Custom inline styles to override default styling.
Left Drawer
<Drawer
isOpen={isOpen}
onClose={onClose}
position="left"
width="300px"
>
<h3>Left Navigation</h3>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</Drawer>
Right Drawer
<Drawer
isOpen={isOpen}
onClose={onClose}
position="right"
width="400px"
>
<h3>Settings Panel</h3>
<p>Drawer content from the right side</p>
</Drawer>
Full Screen Drawer
<Drawer
isOpen={isOpen}
onClose={onClose}
fullScreen={true}
>
<h2>Full Screen Content</h2>
<p>This drawer takes up the entire screen</p>
</Drawer>
Custom Width
<Drawer
isOpen={isOpen}
onClose={onClose}
width="500px"
>
<p>Drawer with custom width</p>
</Drawer>
Without Backdrop Close
<Drawer
isOpen={isOpen}
onClose={onClose}
closeOnBackdropClick={false}
>
<p>Click the close button to dismiss</p>
<Button onClick={onClose}>Close</Button>
</Drawer>
Custom Styles
<Drawer
isOpen={isOpen}
onClose={onClose}
styles={{
backgroundColor: '#f5f5f5',
padding: '24px',
}}
>
<p>Drawer with custom styles</p>
</Drawer>