feat: 完善navbar的展开收起

src/layouts/MainLayout/MainLayout.tsx

@@ -17,9 +17,13 @@ interface MainLayoutProps {
 }
 }
 
 
 const contentVariants = {
 const contentVariants = {
-  hidden: {
-    x: '-100%', // 向左移出屏幕
-    transition: { type: 'tween', duration: 0.3 },
+  navTween: {
+    x: '-90px', // 向左移出屏幕
+    transition: { type: 'tween', duration: 0.3, ease: 'easeInOut' },
+  },
+  mainTween: {
+    x: '-60px', // 向左移出屏幕
+    transition: { type: 'tween', duration: 0.3, ease: 'easeInOut' },
   },
   },
   expanded: {
   expanded: {
     width: '90px',
     width: '90px',
@@ -57,7 +61,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
     <motion.main className={styles.layoutMain}>
     <motion.main className={styles.layoutMain}>
       {/* hidden */}
       {/* hidden */}
       <motion.div
       <motion.div
-        animate={isNavBarVisible ? isHistoryVisible ? 'shrunk' : 'expanded' : 'hidden'}
+        animate={isNavBarVisible ? isHistoryVisible ? 'shrunk' : 'expanded' : 'navTween'}
         variants={contentVariants}
         variants={contentVariants}
         className={`fixed right-[-12px] top-[10px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
         className={`fixed right-[-12px] top-[10px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
       >
       >
@@ -87,6 +91,8 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         )}
         )}
       </motion.div>
       </motion.div>
       <motion.div
       <motion.div
+        variants={contentVariants}
+        animate={isNavBarVisible ? '' : 'mainTween'}
         className={`${styles.layoutContent}`}
         className={`${styles.layoutContent}`}
       >
       >
         {children}
         {children}