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

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.

Might someone give me some guidance on how to realign the close button icon on the slideout menu...

Thank you

cssreactjscss-selectorschakra


Solution 1:[1]

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.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AbdulAzeez Olanrewaju
Solution 2 Adrian Panatra

Related Questions