调整首页侧边栏缩放动画

src/app/admin/_client/navbar.tsx

@@ -4,8 +4,8 @@ import {merge} from '@/lib/utils'
 import {useLayoutStore} from '@/components/providers/StoreProvider'
 import Link from 'next/link'
 import Image from 'next/image'
-import logo from '@/assets/logo.webp'
-import logoMini from '../_assets/logo-mini.webp'
+import logoAvatar from '../_assets/logo-avatar.svg'
+import logoText from '../_assets/logo-text.svg'
 
 export type NavbarProps = {}
 
@@ -15,18 +15,31 @@ export default function Navbar(props: NavbarProps) {
 
   return (
     <nav data-expand={navbar} className={merge(
-      `transition-[flex-basis] duration-200 ease-in-out`,
+      `transition-[flex-basis] duration-300 ease-in-out`,
+      `flex-none`,
       `flex flex-col overflow-hidden group`,
       `data-[expand=true]:basis-52 data-[expand=false]:basis-16`,
+      ` `,
     )}>
       {/* logo */}
-      <Logo mini={!navbar}/>
+      <Link href={'/'} className={merge(
+        `flex-none h-[64px] flex items-center justify-center`,
+      )}>
+        <Image src={logoAvatar} alt={`logo`} className={`w-10 h-10 object-contain`}/>
+        <Image src={logoText} alt={`logo`} className={merge(
+          `h-10 translate-1 object-cover object-left`,
+          `transition-[opacity,width] duration-[200ms,300ms] ease-in-out`,
+          `group-data-[expand=true]:delay-[100ms,0ms]`,
+          `group-data-[expand=true]:opacity-100 group-data-[expand=false]:opacity-0`,
+          `group-data-[expand=true]:w-[85px] group-data-[expand=false]:w-0`,
+        )}/>
+      </Link>
 
       {/* routes */}
       <section className={merge(
-        `transition-[padding] duration-200 ease-in-out`,
+        `transition-[padding] duration-300 ease-in-out`,
         `flex-auto overflow-auto`,
-        `data-[expand=true]:px-4 data-[expand=false]:px-3`,
+        `group-data-[expand=true]:px-4 group-data-[expand=false]:px-3`,
       )}>
         <NavItem href={'/admin'} icon={`🏠`} label={`账户总览`}/>
         <NavTitle label={`个人信息`}/>
@@ -47,38 +60,23 @@ export default function Navbar(props: NavbarProps) {
   )
 }
 
-function Logo(props: {
-  mini?: boolean
-}) {
-  return (
-    <div className={`flex-none h-[64px] flex items-center justify-center`}>
-      <Link href={'/'} className="block">
-        {props.mini
-          ? <Image src={logoMini} alt={`logo`} className="h-9 object-contain"/>
-          : <Image src={logo} alt={`logo`} className="h-9 object-contain"/>
-        }
-      </Link>
-    </div>
-  )
-}
-
 function NavTitle(props: {
   label: string
 }) {
   return (
     <p className={merge(
-      `transition-[height] duration-200 ease-in-out`,
+      `transition-[height] duration-300 ease-in-out`,
       `text-sm text-gray-500 whitespace-nowrap flex items-center relative`,
       `group-data-[expand=true]:h-9`,
       `group-data-[expand=false]:h-4`,
     )}>
       <span className={merge(
-        `transition-[opacity] duration-150 ease-in-out absolute mx-4`,
-        `group-data-[expand=true]:delay-[50ms] group-data-[expand=true]:opacity-100 group-data-[expand=false]:opacity-0`,
+        `transition-[opacity] duration-200 ease-in-out absolute mx-4`,
+        `group-data-[expand=true]:delay-100 group-data-[expand=true]:opacity-100 group-data-[expand=false]:opacity-0`,
       )}>{props.label}</span>
       <span className={merge(
-        `transition-[opacity] duration-150 ease-in-out absolute w-full border-b block`,
-        `group-data-[expand=false]:delay-[50ms] group-data-[expand=false]:opacity-100 group-data-[expand=true]:opacity-0`,
+        `transition-[opacity] duration-200 ease-in-out absolute w-full border-b block`,
+        `group-data-[expand=false]:delay-100 group-data-[expand=false]:opacity-100 group-data-[expand=true]:opacity-0`,
       )}></span>
     </p>
   )
@@ -91,7 +89,7 @@ function NavItem(props: {
 }) {
   return (
     <Link className={merge(
-      `transition-[padding] duration-200 ease-in-out`,
+      `transition-[padding] duration-300 ease-in-out`,
       `flex items-center rounded-md gap-2 whitespace-nowrap`,
       `hover:bg-gray-100`,
       `group-data-[expand=true]:px-4`,
@@ -99,7 +97,7 @@ function NavItem(props: {
       <span className={`flex-none w-10 h-10 flex items-center justify-center`}>{props.icon}</span>
       <span className={merge(
         `flex-auto`,
-        `transition-[width,opacity] duration-200 ease-in-out`,
+        `transition-[width,opacity] duration-300 ease-in-out`,
         `group-data-[expand=true]:w-auto group-data-[expand=true]:opacity-100`,
         `group-data-[expand=false]:w-0 group-data-[expand=false]:opacity-0`,
       )}>{props.label}</span>