Offcanvas

import Offcanvas from 'react-bootstrap/Offcanvas'
import OffcanvasHeader from 'react-bootstrap/OffcanvasHeader'
import OffcanvasTitle from 'react-bootstrap/OffcanvasTitle'
import OffcanvasBody from 'react-bootstrap/OffcanvasBody'
import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'
import Button from 'react-bootstrap/Button'

export default function OffcanvasComponentsDemo() {
  return (
    <Offcanvas aria-labelledby="offcanvasLabel">
      <OffcanvasHeader closeButton>
        <OffcanvasTitle as="h5" id="offcanvasLabel">Menu</OffcanvasTitle>
      </OffcanvasHeader>
      <OffcanvasBody className="pt-0">
        <ListGroup as="nav" defaultActiveKey="#home" variant="borderless">
          <ListGroupItem action href="#home">
            Home
          </ListGroupItem>
          <ListGroupItem action href="#profile">
            User profile
          </ListGroupItem>
          <ListGroupItem action href="#services">
            Services
          </ListGroupItem>
          <ListGroupItem action href="#works">
            Our works
          </ListGroupItem>
          <ListGroupItem action href="#about">
            About
          </ListGroupItem>
          <ListGroupItem action href="#team">
            Our team
          </ListGroupItem>
        </ListGroup>
      </OffcanvasBody>
      <OffcanvasHeader className="border-top">
        <Button className="w-100 me-3">
          <i className="ci-log-in fs-base ms-n1 me-2"/>
          Login
        </Button>
        <Button variant="outline-primary" className="w-100">
          <i className="ci-user ms-n1 me-2"/>
          Sign up
        </Button>
      </OffcanvasHeader>
    </Offcanvas>
  )
}

'use client'

import { useOffcanvas, OffcanvasProvider } from '@/contexts/offcanvas-context'
import Offcanvas, { type OffcanvasPlacement } from 'react-bootstrap/Offcanvas'
import OffcanvasHeader from 'react-bootstrap/OffcanvasHeader'
import OffcanvasTitle from 'react-bootstrap/OffcanvasTitle'
import OffcanvasBody from 'react-bootstrap/OffcanvasBody'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function OffcanvasPlacementDemo() {

  const OffcanvasPlacement = ({ placement }: { placement: OffcanvasPlacement }) => {
    const { openOffcanvas, closeOffcanvas, isOpen } = useOffcanvas()

    return (
      <>
        <Button variant="outline-secondary me-1 mb-1" onClick={() => openOffcanvas(placement)}>
          Toggle {placement} offcanvas
        </Button>
        <Offcanvas
          show={isOpen(placement)}
          onHide={() => closeOffcanvas(placement)}
          placement={placement}
          aria-labelledby={`offcanvas-${placement}`}
        >
          <OffcanvasHeader closeButton className="border-bottom">
            <OffcanvasTitle as="h5" id={`offcanvas-${placement}`}>
              Offcanvas {placement}
            </OffcanvasTitle>
          </OffcanvasHeader>
          <OffcanvasBody>
            <p>
              Content for the offcanvas goes here. You can place just about any Bootstrap or Cartzilla component or
              custom elements here.
            </p>
          </OffcanvasBody>
        </Offcanvas>
      </>
    )
  }

  return (
    <OffcanvasProvider>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
        {(['start', 'top', 'end', 'bottom'] as const).map((placement, index) => (
          <OffcanvasPlacement key={index} placement={placement} />
        ))}
      </Stack>
    </OffcanvasProvider>
  )
}

'use client'

import { useOffcanvas, OffcanvasProvider } from '@/contexts/offcanvas-context'
import Offcanvas from 'react-bootstrap/Offcanvas'
import OffcanvasHeader from 'react-bootstrap/OffcanvasHeader'
import OffcanvasTitle from 'react-bootstrap/OffcanvasTitle'
import OffcanvasBody from 'react-bootstrap/OffcanvasBody'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function OffcanvasBackdropScrollingDemo() {

  const options = [
    {
      id: 'enabled-backdrop',
      buttonLabel: 'Enable backdrop (default)',
      scroll: false,
      backdrop: true,
    },
    {
      id: 'disabled-backdrop',
      buttonLabel: 'Disable backdrop',
      scroll: false,
      backdrop: false,
    },
    {
      id: 'enabled-scrolling',
      buttonLabel: 'Enable body scrolling',
      scroll: true,
      backdrop: false,
    },
    {
      id: 'enabled-backdrop-scrolling',
      buttonLabel: 'Enable both scrolling & backdrop',
      scroll: true,
      backdrop: true,
    },
    {
      id: 'static-backdrop',
      buttonLabel: 'Static backdrop',
      scroll: false,
      backdrop: 'static',
    },
  ]

  const OffcanvasBackdrop = ({ id, buttonLabel, ...props }: { id: string; buttonLabel: string }) => {
    const { openOffcanvas, closeOffcanvas, isOpen } = useOffcanvas()

    return (
      <>
        <Button variant="outline-secondary me-1 mb-1" onClick={() => openOffcanvas(id)}>
          {buttonLabel}
        </Button>
        <Offcanvas show={isOpen(id)} onHide={() => closeOffcanvas(id)} aria-labelledby={`offcanvas-${id}`} {...props}>
          <OffcanvasHeader closeButton className="border-bottom">
            <OffcanvasTitle as="h5" id={`offcanvas-${id}`}>
              Offcanvas
            </OffcanvasTitle>
          </OffcanvasHeader>
          <OffcanvasBody>
            <p>
              Content for the offcanvas goes here. You can place just about any Bootstrap or Cartzilla component or
              custom elements here.
            </p>
          </OffcanvasBody>
        </Offcanvas>
      </>
    )
  }

  return (
    <OffcanvasProvider>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
        {options.map((props, index) => (
          <OffcanvasBackdrop key={index} {...props} />
        ))}
      </Stack>
    </OffcanvasProvider>
  )
}