How to make a Chakra ui react theme drawer have a closeButton icon that aligns to the beginning of the drawer

Question

I'm following this Chakra Doc on how to create a drawer slideout menu: https://chakra-ui.com/docs/overlay/drawer

using the following component:

import React from "react"
import ReactDom from "react-dom"

import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
    useDisclosure ,
    Button,
    Input,
    IconButton
  } from '@chakra-ui/react'
  import styles from "./header.module.css"

  import { HamburgerIcon } from '@chakra-ui/icons'


  function DrawerExample() {
    const { isOpen, onOpen, onClose } = useDisclosure()
    const btnRef = React.useRef()
  
    return (
      <>
        {/* <Button ref={btnRef} colorScheme='teal' onClick={onOpen}>
          Open
        </Button> */}
        
        
        <IconButton ref={btnRef} aria-label='Open menu' icon={<HamburgerIcon />} onClick={onOpen}/>

        <Drawer
          isOpen={isOpen}
          placement='left'
          onClose={onClose}
          finalFocusRef={btnRef}
        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton className={styles.closeButton} />
            <DrawerHeader>Create your account</DrawerHeader>
  
            <DrawerBody>
              <Input placeholder='Type here...' />
            </DrawerBody>
  
            <DrawerFooter>
              <Button variant='outline' mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme='blue'>Save</Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      </>
    )
  }

export default DrawerExample

My css module:

.drawer {
    padding: 10px
}

.closeButton {
    align-items:'left'
}

I am able to create a slideout menu, but the <DrawerCloseButton /> aligns to the end of the slideout drawer. I'd like to make the close button align at the beginning of the drawer (so that it's closer to the edge of the screen.

I followed this post to align the button left, but it did not work React-Native Button Align Center No change happened in the browser.

I need some guidance on how to realign the close button icon on the slideout menu.

score 0 · Answer 1 · answered Apr 13 '22 at 11:16

0

All you need to do is:

 <DrawerCloseButton right="0px" left="5px"  />

Setting the right property to 0px removes chakraUi default right prop and use the left property yourself.

answered Apr 13 '22 at 11:16

AbdulAzeez Olanrewaju

976
1
13
32

score 0 · Answer 2 · answered Apr 27 '22 at 09:23

If you see the elemets output for the Close Button you can see that the styling for close button is position: absolute. With that being said if you want to make the Close Button into left side of the drawer you can simple change the position into relative and set the location using margin or padding. So the result could be like this

<DrawerCloseButton position="relative" ml="10px"  />

Or you can simply change the margin/padding based on what you need

How to make a Chakra ui react theme drawer have a closeButton icon that aligns to the beginning of the drawer

2 Answers2