Drawer

The Drawer component offers a compact way to display additional content or navigation options, usually appearing as a discreet panel that can be revealed by the user. Ideal for keeping the main content unobstructed while providing quick access to supplementary information or controls

Basic

1. Test Drawer

2. Test Drawer

3. Test Drawer

4. Test Drawer

Code

<Drawer withCloseButton withToggle width="150px" id="d0000">
    <div className='text-left'>
        <div className='hover:bg-gray-400 hover:cursor-pointer dark:text-gray-100 text-gray-800 mt-2 font-bold pl-4'>1. Test Drawer</div>
        <div className='hover:bg-gray-400 hover:cursor-pointer dark:text-gray-100 text-gray-800 mt-2 font-bold pl-4'>2. Test Drawer</div>
        <div className='hover:bg-gray-400 hover:cursor-pointer dark:text-gray-100 text-gray-800 mt-2 font-bold pl-4'>3. Test Drawer</div>
        <div className='hover:bg-gray-400 hover:cursor-pointer dark:text-gray-100 text-gray-800 mt-2 font-bold pl-4'>4. Test Drawer</div>
    </div>
</Drawer>

Other examples

Update Your Profile

Code

<Drawer withCloseButton withToggle width="80%" atRight id="d0001">
    <div className='text-center p-2'>
        <Form/>
    </div>    
</Drawer>