web/src/app/admin/_client/navbar.tsx

'use client'
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'
import { UserRound } from 'lucide-react'
import { UserRoundPen } from 'lucide-react'
import { IdCard } from 'lucide-react'
import { LockKeyhole } from 'lucide-react'
import { Wallet } from 'lucide-react'
import { ShoppingCart } from 'lucide-react'
import { Package } from 'lucide-react'
import { HardDriveUpload } from 'lucide-react'
import { Eye } from 'lucide-react'
import { Archive } from 'lucide-react'
import { ArchiveRestore } from 'lucide-react'


export type NavbarProps = {}


export default function Navbar(props: NavbarProps) {

  const navbar = useLayoutStore(store => store.navbar)

  return (
    <nav data-expand={navbar} className={merge(
      `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 */}
      <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-300 ease-in-out`,
        `flex-auto overflow-auto`,
        `group-data-[expand=true]:px-4 group-data-[expand=false]:px-3`,
      )}>
        <TooltipProvider>
          <NavItem href={'/admin'} icon={<UserRound size={20}/>} label={`账户总览`} expand={navbar}/>
          <NavTitle label={`个人信息`}/>
          <NavItem href={`/admin/profile`} icon={<UserRoundPen  size={20}/>} label={`个人中心`} expand={navbar}/>
          <NavItem href={`/admin/identify`} icon={<IdCard size={20}/>} label={`实名认证`} expand={navbar}/>
          <NavItem href={`/admin/whitelist`} icon={<LockKeyhole size={20}/>} label={`白名单`} expand={navbar}/>
          <NavItem href={`/admin/bills`} icon={<Wallet size={20}/>} label={`我的账单`} expand={navbar}/>
          <NavTitle label={`套餐管理`}/>
          <NavItem href={`/admin/purchase`} icon={<ShoppingCart size={20}/>} label={`购买套餐`} expand={navbar}/>
          <NavItem href={`/admin/resources`} icon={<Package size={20}/>} label={`套餐管理`} expand={navbar}/>
          <NavTitle label={`IP 管理`}/>
          <NavItem href={`/admin/extract`} icon={<HardDriveUpload size={20}/>} label={`提取 IP`} expand={navbar}/>
          <NavItem href={`/admin/channels`} icon={<Eye size={20}/>} label={`IP 管理`} expand={navbar}/>
          <NavItem href={`/admin`} icon={<Archive size={20}/>} label={`提取记录`} expand={navbar}/>
          <NavItem href={`/admin`} icon={<ArchiveRestore size={20}/>} label={`使用记录`} expand={navbar}/>
        </TooltipProvider>
      </section>
    </nav>
  )
}

function NavTitle(props: {
  label: string
}) {
  return (
    <p className={merge(
      `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-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-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>
  )
}

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 (
    <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>
  )
}