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

'use client'
import {ComponentProps, 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 = {} & ComponentProps<'nav'>

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 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-x-hidden overflow-y-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)
    }
  }

  const setNavbar = useLayoutStore(store => store.setNavbar)
  const closeNavBarIfMobile = () => {
    if (window.innerWidth < 768) {
      setNavbar(false)
    }
  }

  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}
          onClick={closeNavBarIfMobile}
        >
          <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>
  )
}