NapCatQQ/napcat.webui/src/components/sidebar/index.tsx

import { Button } from '@heroui/button';
import { Image } from '@heroui/image';
import clsx from 'clsx';
import { 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[]
}

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