Drawer Component

[kaushalyap]

Something like https://material-ui.com/components/drawers/

[croaky]

I'm interested in this as well. Another implementation is https://mantine.dev/core/drawer/ Both Mantine's Drawer and Modal components are wrapped in the concept of a Portal https://mantine.dev/core/portal/

[Maaverick]

Tailwind UI already provides some examples called "Slide-overs" using headlessui animation components. A good insipiration to build your own with the same tools you already know ;)

https://tailwindui.com/components/application-ui/overlays/slide-overs

[atang08]

Just not the same...trying to get this to go from left to right slide and it's taking quite a while.

[gondar00]

Any plan on adding a drawer component?

[SultanNasyrovDeveloper]

+1

[gabrieloureiro]

const DrawerContent = forwardRef<
  ElementRef<typeof DrawerPrimitive.Content>,
  ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    if (!isMounted) {
      setIsMounted(!!document.getElementById("root")?.firstElementChild);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props]);

  return (
    <>
      {isMounted && (
        <DrawerPrimitive.Portal container={document.getElementById("theme")}>
          <DrawerOverlay />
          <DrawerPrimitive.Content
            ref={ref}
            className={cn(
              "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
              className,
            )}
            {...props}
          >
            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-foreground-secondary" />
            {children}
          </DrawerPrimitive.Content>
        </DrawerPrimitive.Portal>
      )}
    </>
  );
});
DrawerContent.displayName = "DrawerContent";

[gabrieloureiro]

[Supcar27]

I already created a different discussion #3224 but i havent gotten any responses. I used the Dialog approach to build my own drawer and i'm stuck trying to get react-toastify to work. basically if there is a toast on the part of screen where the drawer is interaction with the toast is blocked,

Any ideas🙏 ?