Swipeable Drawer and Tabs

[Ali-Hussein-dev]

Description

Swiping on mobile devices is very common and has a better UX.

Problem Statement/Justification

support mobile devices with modern actions and reactions.

Proposed Solution or API

swipeable drawer
swipeable tabs

Alternatives

probably is a bad idea, using MUI with Chakra

Additional Information

swipeable tabs
swipeable drawer

[segunadebayo]

Moved this to a discussion to allow others to upvote this request and leave comments.

[tombohub]

+1 gotta focus on mobile, there is no proper UI library for mobile except framework7 and antd mobile.
There's an opportunity

[Southclaws]

Huge +1 here, I did manage to get something basic working with Framer motion's drag attribute combined with Chakra's drawer:

import {
  Button,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  Input,
  Text,
  useDisclosure,
} from "@chakra-ui/react";

import { motion } from "framer-motion";
import React from "react";

export default function Details() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef();

  return (
    <>
      <Button ref={btnRef as any} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="bottom"
        onClose={onClose}
        finalFocusRef={btnRef as any}
      >
        <DrawerOverlay zIndex={110} />
        <motion.div
          style={{
            width: "100%",
            // height: 150,
            borderRadius: 30,
            backgroundColor: "#fff",
            zIndex: 120,
          }}
          drag="y"
          onDragEnd={(e) => {
            console.log(e);
            onClose();
          }}
          dragConstraints={{
            top: 0,
            bottom: 125,
          }}
          dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
          dragElastic={0.5}
          //   whileTap={{ cursor: "grabbing" }}
        >
          <DrawerContent borderTopRadius={12}>
            <DrawerCloseButton />
            <DrawerHeader>Drawer</DrawerHeader>

            <DrawerBody>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
                quam beatae sunt adipisci commodi. Nihil earum doloremque
                impedit ipsa. Dignissimos, quo soluta. Ea optio ipsum provident
                itaque numquam perspiciatis in! Lorem ipsum dolor sit amet
                consectetur
              </Text>

              <Text>
                adipisicing elit. Molestiae earum nemo esse, sequi culpa odio et
                fugiat deleniti velit at ea modi magnam facilis adipisci officia
                iusto nam, unde architecto!
              </Text>
            </DrawerBody>
          </DrawerContent>
        </motion.div>
      </Drawer>
    </>
  );
}

Screen.Recording.2022-11-06.at.11.38.40.mov

[tombohub]

nice, what software you used to record screen?

[Southclaws]

just the built-in mac screenshot app

[Lukasvo]

Great suggestion, thanks @Southclaws!

Wrapping DrawerContent in a motion.div messed up my lay-out a bit.
I solved it by doing <DrawerContent as={motion.div} {...restOfTheMotionProps}>

Edit: it even works without as={...} and just with the motion props!

[Southclaws]

What I do nowadays is use https://github.com/emilkowalski/vaul and wrap the modal in that so it's responsive and becomes a modal on bigger screens.