bug fix in drawer

.gitignore

@@ -46,4 +46,5 @@ prisma/dev.db
 /playwright/.cache/
 
 # docker
-pgdata
+pgdata
+certificates

components/Modal.tsx

@@ -9,6 +9,8 @@ type Props = {
 };
 
 export default function Modal({ toggleModal, className, children }: Props) {
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
+
   useEffect(() => {
     if (window.innerWidth >= 640) {
       document.body.style.overflow = "hidden";
@@ -22,15 +24,21 @@ export default function Modal({ toggleModal, className, children }: Props) {
 
   if (window.innerWidth < 640) {
     return (
-      <Drawer.Root open onClose={() => setTimeout(() => toggleModal(), 100)}>
+      <Drawer.Root
+        open={drawerIsOpen}
+        onClose={() => setTimeout(() => toggleModal(), 100)}
+      >
         <Drawer.Portal>
           <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-          <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
-            <div className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto">
-              <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5" />
-              {children}
-            </div>
-          </Drawer.Content>
+          <ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
+            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+              <div className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto">
+                <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5" />
+
+                {children}
+              </div>
+            </Drawer.Content>
+          </ClickAwayHandler>
         </Drawer.Portal>
       </Drawer.Root>
     );

public/site.webmanifest

@@ -1,4 +1,5 @@
 {
+  "id": "/dashboard",
   "name":"Linkwarden",
   "short_name":"Linkwarden",
   "icons":[
@@ -19,6 +20,27 @@
       "purpose": "maskable"
     }
   ],
+  "share_target": {
+    "action": "/api/v1/links/",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "url": "link"
+    }
+  },
+  "screenshots": [
+    {
+      "src": "/screenshots/screenshot1.png",
+      "type": "image/png",
+      "sizes": "386x731"
+    },
+    {
+      "src": "/screenshots/screenshot2.png",
+      "type": "image/png",
+      "sizes": "1361x861",
+      "form_factor": "wide"
+    }
+  ],
   "theme_color":"#000000",
   "background_color":"#000000",
   "display":"standalone",