odd-box 0.1.10

a dead simple reverse proxy server and web server
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
39
40
41
42
43
44
45
46
47
48
49
50
51

import { ReactNode, useDeferredValue, useEffect } from "react";
import Drawer from "react-modern-drawer";
import "react-modern-drawer/dist/index.css";
import { useDrawerContext } from "./context";
import "./drawer-styles.css";
import { useMediaQuery } from "react-responsive";

const SideDrawer = ({ children,bottomItem }: { bottomItem?:ReactNode,children?: ReactNode }) => {
  const { setDrawerOpen, drawerOpen } = useDrawerContext();
  const isBigScreen = useMediaQuery({ query: "(min-width: 900px)" });

  const wasBigScreen = useDeferredValue(isBigScreen);

  useEffect(() => {
    if (!isBigScreen && wasBigScreen) {
      setDrawerOpen(false);
    }
  }, [isBigScreen]);

  return (
    <>
      <Drawer
        size={!isBigScreen ? "100%" : 300}
        enableOverlay={false}
        duration={0} 
        overlayOpacity={isBigScreen ? 0 : 0.2}
        customIdSuffix="x" 
        style={{
          boxShadow: "unset",
          background: "var(--card)",
          backdropFilter: "blur(10px)",
          WebkitBackdropFilter: "blur(10px)",
          borderRight: "1px solid var(--border)",
          display:"flex",
          flexDirection:"column",
          justifyContent:"space-between",
          color:"hsl(var(--card-foreground))"
        }}
        onClose={() => setDrawerOpen(false)}
        open={isBigScreen || drawerOpen}
        direction={"left"}
      >

        <div style={{ padding: "0px 5px",marginTop:"60px",overflowX:"auto",paddingBottom:"50px",paddingTop:"10px" }}>{children}</div>
        {bottomItem}
      </Drawer>
    </>
  );
};

export default SideDrawer;