为导航栏添加缩窄后弹出提示功能

src/app/admin/_client/navbar.tsx

@@ -1,11 +1,12 @@
 'use client'
-import {ReactNode} from 'react'
+import {ReactNode, useState} from 'react'
 import {merge} from '@/lib/utils'
 import {useLayoutStore} from '@/components/providers/StoreProvider'
 import Link from 'next/link'
 import Image from 'next/image'
 import logoAvatar from '../_assets/logo-avatar.svg'
 import logoText from '../_assets/logo-text.svg'
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
 
 export type NavbarProps = {}
 
@@ -41,20 +42,22 @@ export default function Navbar(props: NavbarProps) {
         `flex-auto overflow-auto`,
         `group-data-[expand=true]:px-4 group-data-[expand=false]:px-3`,
       )}>
-        <NavItem href={'/admin'} icon={`🏠`} label={`账户总览`}/>
-        <NavTitle label={`个人信息`}/>
-        <NavItem href={`/admin/profile`} icon={`📝`} label={`个人中心`}/>
-        <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`}/>
-        <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`}/>
-        <NavItem href={`/admin/bills`} icon={`💰`} label={`我的账单`}/>
-        <NavTitle label={`套餐管理`}/>
-        <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`}/>
-        <NavItem href={`/admin/resources`} icon={`📦`} label={`套餐管理`}/>
-        <NavTitle label={`IP 管理`}/>
-        <NavItem href={`/admin/extract`} icon={`📤`} label={`提取 IP`}/>
-        <NavItem href={`/admin/channels`} icon={`👁️`} label={`IP 管理`}/>
-        <NavItem href={`/admin`} icon={`📜`} label={`提取记录`}/>
-        <NavItem href={`/admin`} icon={`🗂️`} label={`使用记录`}/>
+        <TooltipProvider>
+          <NavItem href={'/admin'} icon={`🏠`} label={`账户总览`} expand={navbar}/>
+          <NavTitle label={`个人信息`}/>
+          <NavItem href={`/admin/profile`} icon={`📝`} label={`个人中心`} expand={navbar}/>
+          <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`} expand={navbar}/>
+          <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`} expand={navbar}/>
+          <NavItem href={`/admin/bills`} icon={`💰`} label={`我的账单`} expand={navbar}/>
+          <NavTitle label={`套餐管理`}/>
+          <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`} expand={navbar}/>
+          <NavItem href={`/admin/resources`} icon={`📦`} label={`套餐管理`} expand={navbar}/>
+          <NavTitle label={`IP 管理`}/>
+          <NavItem href={`/admin/extract`} icon={`📤`} label={`提取 IP`} expand={navbar}/>
+          <NavItem href={`/admin/channels`} icon={`👁️`} label={`IP 管理`} expand={navbar}/>
+          <NavItem href={`/admin`} icon={`📜`} label={`提取记录`} expand={navbar}/>
+          <NavItem href={`/admin`} icon={`🗂️`} label={`使用记录`} expand={navbar}/>
+        </TooltipProvider>
       </section>
     </nav>
   )
@@ -86,21 +89,38 @@ function NavItem(props: {
   href: string
   icon?: ReactNode
   label: string
+  expand?: boolean
 }) {
+
+  const [open, setOpen] = useState(false)
+
+  const handleOpenChange = (open: boolean) => {
+    if (!props.expand) {
+      setOpen(open)
+    }
+  }
+
   return (
-    <Link className={merge(
-      `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`,
-    )} href={props.href}>
-      <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-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>
-    </Link>
+    <Tooltip open={open} onOpenChange={handleOpenChange}>
+      <TooltipTrigger asChild>
+        <Link className={merge(
+          `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`,
+        )} href={props.href}>
+          <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-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>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side={`right`} sideOffset={16}>
+        <p>{props.label}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }