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

import { Button } from '@heroui/button';
import { Image } from '@heroui/image';
import clsx from 'clsx';
import { AnimatePresence, motion } from 'motion/react';
import React from 'react';
import { IoMdLogOut } from 'react-icons/io';
import { MdDarkMode, MdLightMode } from 'react-icons/md';

import useAuth from '@/hooks/auth';
import useDialog from '@/hooks/use-dialog';
import { useTheme } from '@/hooks/use-theme';

import logo from '@/assets/images/logo.png';
import type { MenuItem } from '@/config/site';

import Menus from './menus';

interface SideBarProps {
  open: boolean
  items: MenuItem[]
  onClose?: () => void
}

const SideBar: React.FC<SideBarProps> = (props) => {
  const { open, items, onClose } = props;
  const { toggleTheme, isDark } = useTheme();
  const { revokeAuth } = useAuth();
  const dialog = useDialog();
  const onRevokeAuth = () => {
    dialog.confirm({
      title: '退出登录',
      content: '确定要退出登录吗？',
      onConfirm: revokeAuth,
    });
  };
  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'
        )}
        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} />
                }
              >
                切换主题
              </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>
    </>
  );
};

export default SideBar;