Offcanvas

import Offcanvas from 'react-bootstrap/Offcanvas'
import Nav from 'react-bootstrap/Nav'
import Button from 'react-bootstrap/Button'
import SimpleBar from 'simplebar-react'
import 'simplebar/dist/simplebar.min.css'

{/* Offcanvas */}
<Offcanvas
  show
  scroll
  backdrop={false}
>

  {/* Header */}
  <Offcanvas.Header closeButton className='border-bottom'>
    <Offcanvas.Title as='h6'>Menu</Offcanvas.Title>
  </Offcanvas.Header>

  {/* Body with custom scrollbar */}
  <SimpleBar className='offcanvas-body'>
    <Nav as='ul' className='flex-column'>
      <Nav.Item as='li'>
        <Nav.Link href='#' active>Home</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>User Profile</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Services</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Our Works</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>About</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Our Team</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Vendor Dashboard</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Contacts</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Help Center</Nav.Link>
      </Nav.Item>
      <Nav.Item as='li'>
        <Nav.Link href='#'>Support</Nav.Link>
      </Nav.Item>
    </Nav>
  </SimpleBar>

  {/* Footer */}
  <Offcanvas.Header className='border-top'>
    <Button variant='outline-primary' size='sm' className='w-100 me-2'>
      <i className='fi-login me-1'></i>
      Sign In
    </Button>
    <Button variant='primary' size='sm' className='w-100'>
      <i className='fi-user me-1'></i>
      Sign In
    </Button>
  </Offcanvas.Header>
</Offcanvas>

import { useState } from 'react'
import Offcanvas from 'react-bootstrap/Offcanvas'

{/* Offcanvas placement options */}
const OffcanvasExample = ({ name, ...props }) => {
  const [show, setShow] = useState(false)

  const handleClose = () => setShow(false)
  const handleShow = () => setShow(true)

  return (
    <>
      <Button variant='accent' onClick={handleShow} className='my-2 me-2'>
        Offcanvas {name}
      </Button>
      <Offcanvas show={show} onHide={handleClose} {...props}>
        <Offcanvas.Header closeButton className='border-bottom'>
          <Offcanvas.Title>Offcanvas {name}</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  )
}

const OffcanvasPlacement = () => {
  return (
    <>
      {['start', 'end', 'top', 'bottom'].map((placement, idx) => (
        <OffcanvasExample key={idx} placement={placement} name={placement} />
      ))}
    </>
  )
}

render(<OffcanvasPlacement />)

import { useState } from 'react'
import Offcanvas from 'react-bootstrap/Offcanvas'

{/* Bacdrop annd scrolling options */}
const options = [
  {
    name: 'Enable backdrop (default)',
    scroll: false,
    backdrop: true,
  },
  {
    name: 'Disable backdrop',
    scroll: false,
    backdrop: false,
  },
  {
    name: 'Enable body scrolling',
    scroll: true,
    backdrop: false,
  },
  {
    name: 'Enable both scrolling & backdrop',
    scroll: true,
    backdrop: true,
  }
]

const OffcanvasExample = ({ name, ...props }) => {
  const [show, setShow] = useState(false)

  const handleClose = () => setShow(false)
  const toggleShow = () => setShow((s) => !s)

  return (
    <>
      <Button variant='outline-secondary' onClick={toggleShow} className='my-2 me-2'>
        {name}
      </Button>
      <Offcanvas show={show} onHide={handleClose} {...props}>
        <Offcanvas.Header closeButton className='border-bottom'>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  )
}

function BackdropExample() {
  return (
    <>
      {options.map((props, idx) => (
        <OffcanvasExample key={idx} {...props} />
      ))}
    </>
  )
}

render(<BackdropExample />)