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,60 +34,75 @@ const SideBar: React.FC<SideBarProps> = (props) => {
     });
   };
   return (
-    <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'
-      )}
-      initial={{ width: 0 }}
-      animate={{ width: open ? '16rem' : 0 }}
-      transition={{
-        type: open ? 'spring' : 'tween',
-        stiffness: 150,
-        damping: open ? 15 : 10,
-      }}
-      style={{ overflow: 'hidden' }}
-    >
-      <motion.div className='w-64 flex flex-col items-stretch h-full transition-transform duration-300 ease-in-out z-30 relative float-right'>
-        <div className='flex justify-center items-center my-2 gap-2'>
-          <Image radius='none' height={40} src={logo} className='mb-2' />
-          <div
-            className={clsx(
-              'flex items-center font-bold',
-              '!text-2xl shiny-text'
-            )}
-          >
-            NapCat
-          </div>
-        </div>
-        <div className='overflow-y-auto flex flex-col flex-1 px-4'>
-          <Menus items={items} />
-          <div className='mt-auto mb-10 md:mb-0'>
-            <Button
-              className='w-full'
-              color='primary'
-              radius='full'
-              variant='light'
-              onPress={toggleTheme}
-              startContent={
-                !isDark ? <MdLightMode size={16} /> : <MdDarkMode size={16} />
-              }
+    <>
+      <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'
+        )}
+        initial={{ width: 0 }}
+        animate={{ width: open ? '16rem' : 0 }}
+        transition={{
+          type: open ? 'spring' : 'tween',
+          stiffness: 150,
+          damping: open ? 15 : 10,
+        }}
+        style={{ overflow: 'hidden' }}
+      >
+        <motion.div className='w-64 flex flex-col items-stretch h-full transition-transform duration-300 ease-in-out z-30 relative float-right'>
+          <div className='flex justify-center items-center my-2 gap-2'>
+            <Image radius='none' height={40} src={logo} className='mb-2' />
+            <div
+              className={clsx(
+                'flex items-center font-bold',
+                '!text-2xl shiny-text'
+              )}
             >
-              切换主题
-            </Button>
-            <Button
-              className='w-full mb-2'
-              color='primary'
-              radius='full'
-              variant='light'
-              onPress={onRevokeAuth}
-              startContent={<IoMdLogOut size={16} />}
-            >
-              退出登录
-            </Button>
+              NapCat
+            </div>
           </div>
-        </div>
+          <div className='overflow-y-auto flex flex-col flex-1 px-4'>
+            <Menus items={items} />
+            <div className='mt-auto mb-10 md:mb-0'>
+              <Button
+                className='w-full'
+                color='primary'
+                radius='full'
+                variant='light'
+                onPress={toggleTheme}
+                startContent={
+                  !isDark ? <MdLightMode size={16} /> : <MdDarkMode size={16} />
+                }
+              >
+                切换主题
+              </Button>
+              <Button
+                className='w-full mb-2'
+                color='primary'
+                radius='full'
+                variant='light'
+                onPress={onRevokeAuth}
+                startContent={<IoMdLogOut size={16} />}
+              >
+                退出登录
+              </Button>
+            </div>
+          </div>
+        </motion.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'
             )}