| | |
| | | |
| | | import { useRouter } from 'next/navigation' |
| | | import { useHover } from 'ahooks' |
| | | import s from './style.module.css' |
| | | import cn from '@/utils/classnames' |
| | | import ItemOperation from '@/app/components/explore/item-operation' |
| | | import AppIcon from '@/app/components/base/app-icon' |
| | |
| | | <div |
| | | ref={ref} |
| | | key={id} |
| | | className={cn('system-sm-medium flex h-8 items-center justify-between rounded-lg px-2 text-sm font-normal text-components-menu-item-text mobile:justify-center mobile:px-1', |
| | | isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover', |
| | | className={cn( |
| | | s.item, |
| | | isSelected ? s.active : 'hover:bg-gray-200', |
| | | 'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal', |
| | | )} |
| | | onClick={() => { |
| | | router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation(). |
| | |
| | | {isMobile && <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />} |
| | | {!isMobile && ( |
| | | <> |
| | | <div className='flex w-0 grow items-center space-x-2'> |
| | | <div className='flex items-center space-x-2 w-0 grow'> |
| | | <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} /> |
| | | <div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div> |
| | | </div> |
| | | <div className='h-6 shrink-0' onClick={e => e.stopPropagation()}> |
| | | <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}> |
| | | <ItemOperation |
| | | isPinned={isPinned} |
| | | isItemHovering={isHovering} |