Add support for "outside elements" (Popups, Drawers, ...)

+ Add Drawer
+ Add new root in the HTML (should be included in production)

src/util/OutsideElement/OutsideElement.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+
+import styles from "./OutsideElement.module.scss";
+
+interface OutsideElementProps {
+  children: React.ReactNode;
+  open: boolean;
+  onClose?: () => unknown;
+}
+
+export const OutsideElement: React.FC<OutsideElementProps> = ({ children, open, onClose }) => {
+  return ReactDOM.createPortal(
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className={styles.backdrop}
+            key="backdrop"
+            onClick={() => onClose?.()}
+          ></motion.div>
+
+          {children}
+        </>
+      )}
+    </AnimatePresence>,
+    document.querySelector("#detleph-fg-context")!
+  );
+};