feat: close #1394

packages/napcat-webui-frontend/src/components/sidebar/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@heroui/button';
 import { Image } from '@heroui/image';
 import clsx from 'clsx';
-import { motion } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 import React from 'react';
 import { IoMdLogOut } from 'react-icons/io';
 import { MdDarkMode, MdLightMode } from 'react-icons/md';
@@ -18,10 +18,11 @@ import Menus from './menus';
 interface SideBarProps {
   open: boolean
   items: MenuItem[]
+  onClose?: () => void
 }
 
 const SideBar: React.FC<SideBarProps> = (props) => {
-  const { open, items } = props;
+  const { open, items, onClose } = props;
   const { toggleTheme, isDark } = useTheme();
   const { revokeAuth } = useAuth();
   const dialog = useDialog();
@@ -33,6 +34,20 @@ const SideBar: React.FC<SideBarProps> = (props) => {
     });
   };
   return (
+    <>
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.div
+            className='fixed inset-y-0 left-64 right-0 bg-black/20 backdrop-blur-[1px] z-40 md:hidden'
+            aria-hidden='true'
+            onClick={onClose}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, transition: { duration: 0.15 } }}
+            transition={{ duration: 0.2, delay: 0.15 }}
+          />
+        )}
+      </AnimatePresence>
       <motion.div
         className={clsx(
           'overflow-hidden fixed top-0 left-0 h-full z-50 bg-background md:bg-transparent md:static shadow-md md:shadow-none rounded-r-md md:rounded-none'
@@ -87,6 +102,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
           </div>
         </motion.div>
       </motion.div>
+    </>
   );
 };
 

packages/napcat-webui-frontend/src/layouts/default.tsx

@@ -85,7 +85,11 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
         backgroundSize: 'cover',
       }}
     >
-      <SideBar items={menus} open={openSideBar} />
+      <SideBar
+        items={menus}
+        open={openSideBar}
+        onClose={() => setOpenSideBar(false)}
+      />
       <div
         ref={contentRef}
         className={clsx(
@@ -107,7 +111,7 @@ const Layout: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
         >
           <motion.div
             className={clsx(
-              'mr-1 ease-in-out ml-0 md:relative',
+              'mr-1 ease-in-out ml-0 md:relative z-50 md:z-auto',
               openSideBar && 'pl-2 absolute',
               'md:!ml-0 md:pl-0'
             )}