PermenantDrawer index.tsx

0% Statements 0/11

0% Branches 0/3

0% Functions 0/1

0% Lines 0/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useRef } from "react";
import HandlePermanentDrawerData from "./HandlePermanentDrawerData.tsx";
import { motion } from "framer-motion";
import { ChevronRightRounded } from "@mui/icons-material";
import CustomButton from "../CustomButton/index.tsx";
import usePermanentDrawerState from "../../../hooks/common/usePermanentDrawerState";
 
function PermenantDrawer({ addtionalStyles = "" }) {
  const { isOpen, closeDrawer } = usePermanentDrawerState();
  const drawerRef = useRef(null);
 
  const drawerVariants = {
    open: { flex: 0.6, overflow: "visible" },
    closed: { flex: 0, overflow: "hidden" },
  };
 
  return (
    <motion.div
      ref={drawerRef}
      initial="closed"
      animate={isOpen ? "open" : "closed"}
      variants={drawerVariants}
      transition={{ type: "tween", stiffness: 260, damping: 20 }}
      className={`${addtionalStyles} relative flex-[0.6] max-w-[40%]`}>
      <div className="absolute top-0 -left-10 p-1">
        <CustomButton onClick={closeDrawer}>
          <ChevronRightRounded fontSize="small" />
        </CustomButton>
      </div>
      <div className="border-l-gray-200 h-full overflow-y-scroll border-l-[1px]">
        <HandlePermanentDrawerData />
      </div>
    </motion.div>
  );
}
 
export default PermenantDrawer;