'use client' import React, { useState } from 'react' import Link from 'next/link' import { useSelectedLayoutSegment } from 'next/navigation' import type { INavSelectorProps } from './nav-selector' import NavSelector from './nav-selector' import classNames from '@/utils/classnames' import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows' import { useStore as useAppStore } from '@/app/components/app/store' type INavProps = { icon: React.ReactNode activeIcon?: React.ReactNode text: string activeSegment: string | string[] link: string isApp: boolean } & INavSelectorProps const Nav = ({ icon, activeIcon, text, activeSegment, link, curNav, navs, createText, onCreate, onLoadmore, isApp, }: INavProps) => { const setAppDetail = useAppStore(state => state.setAppDetail) const [hovered, setHovered] = useState(false) const segment = useSelectedLayoutSegment() const isActivated = Array.isArray(activeSegment) ? activeSegment.includes(segment!) : segment === activeSegment return (
setAppDetail()} className={classNames(` flex items-center h-7 px-2.5 cursor-pointer rounded-[10px] ${isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text'} ${curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover'} `)} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} >
{ (hovered && curNav) ? : isActivated ? activeIcon : icon }
{text}
{ curNav && isActivated && ( <>
/
) }
) } export default Nav