import { useState } from "react";


export default function Demo() {
  const [open, setOpen] = useState(false);


  return (
    <>
      <HvButton onClick={() => setOpen(true)}>Open Drawer</HvButton>
      <HvDrawer
        PaperProps={{ component: "aside", className: "w-40%" }}
        ModalProps={{ disableScrollLock: true }}
        onClose={() => setOpen(false)}
        open={open}
      >
        <HvDialogTitle component="div">Lorem Ipsum</HvDialogTitle>
        <HvDialogContent>
          <HvTypography tabIndex={0}>
            {[...Array(30)]
              .map(
                () => `Cras mattis consectetur purus sit amet fermentum.
                  Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                  Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
              )
              .join("\n")}
          </HvTypography>
        </HvDialogContent>
        <HvDialogActions>
          <HvButton variant="primaryGhost">Submit</HvButton>
          <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
            Cancel
          </HvButton>
        </HvDialogActions>
      </HvDrawer>
    </>
  );
}

import { useState } from "react";


export default function Demo() {
  const [open, setOpen] = useState(false);
  const [anchor, setAnchor] = useState<HvDrawerProps["anchor"]>("right");


  const handleAnchorChange = (value: HvDrawerProps["anchor"]) => {
    setAnchor(value);
    setOpen(true);
  };


  return (
    <div className="flex gap-sm">
      <HvButton onClick={() => handleAnchorChange("left")}>Left</HvButton>
      <HvButton onClick={() => handleAnchorChange("top")}>Top</HvButton>
      <HvButton onClick={() => handleAnchorChange("bottom")}>Bottom</HvButton>
      <HvButton onClick={() => handleAnchorChange("right")}>Right</HvButton>
      <HvDrawer
        anchor={anchor}
        onClose={() => setOpen(false)}
        open={open}
        PaperProps={{
          component: "aside",
          className:
            anchor === "bottom" || anchor === "top" ? "h-30%" : "w-30%",
        }}
      >
        <HvDialogTitle component="div">Lorem Ipsum</HvDialogTitle>
        <HvDialogContent>
          <HvTypography tabIndex={0}>Your drawer content</HvTypography>
        </HvDialogContent>
      </HvDrawer>
    </div>
  );
}

import { useRef, useState } from "react";


export default function Demo() {
  const [open, setOpen] = useState(false);


  return (
    <div className="w-full h-300px flex relative justify-end">
      <div
        className="flex flex-col gap-xs"
        style={{ width: open ? "70%" : "100%" }}
      >
        <HvHeader
          position="absolute"
          classes={{
            root: open ? "w-70%" : "w-full",
          }}
        >
          <div className="flex items-center gap-xs w-full">
            <HvIconButton
              onClick={() => setOpen((p) => !p)}
              style={{ display: open ? "none" : "block" }}
            >
              <Menu />
            </HvIconButton>
            <HvTypography variant="title2">My App</HvTypography>
            <div className="flex-grow" />
            <HvAvatar alt="Admin" />
          </div>
        </HvHeader>
        <div className="p-sm pt-xl">
          <HvGlobalActions title="My Title" />
          <HvSection title="Content">
            <HvTypography>My app content</HvTypography>
          </HvSection>
        </div>
      </div>
      <HvDrawer
        variant="persistent"
        anchor="left"
        onClose={() => setOpen(false)}
        open={open}
        ModalProps={{
          keepMounted: true,
        }}
        PaperProps={{
          component: "aside",
          className: "w-[30%] h-full relative",
          style: {
            position: "absolute",
            right: 0,
            top: 0,
            bottom: 0,
          },
        }}
      >
        <HvDialogTitle component="div">Menu</HvDialogTitle>
        <HvDialogContent>
          <HvTypography tabIndex={0}>Your drawer content</HvTypography>
        </HvDialogContent>
      </HvDrawer>
    </div>
  );
}