| import Collapse from '@/components/Collapse' |
| import Link from 'next/link' |
| import { useRouter } from 'next/router' |
| import { useState } from 'react' |
|
|
| |
| |
| |
| |
| |
| export const MenuItemCollapse = (props) => { |
| const { link } = props |
| const [show, changeShow] = useState(false) |
| const hasSubMenu = link?.subMenus?.length > 0 |
|
|
| const [isOpen, changeIsOpen] = useState(false) |
|
|
| const router = useRouter() |
|
|
| if (!link || !link.show) { |
| return null |
| } |
|
|
| const selected = (router.pathname === link.to) || (router.asPath === link.to) |
|
|
| const toggleShow = () => { |
| changeShow(!show) |
| } |
|
|
| const toggleOpenSubMenu = () => { |
| changeIsOpen(!isOpen) |
| } |
|
|
| return <> |
| <div className={ (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600') + ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'} onClick={toggleShow} > |
| |
| {!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='py-2 w-full my-auto items-center justify-between flex '> |
| <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div> |
| </Link>} |
| |
| {hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null} |
| className="py-2 font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest"> |
| <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div> |
| <div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div> |
| </div>} |
| </div> |
| |
| {/* ζε εθε */} |
| {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}> |
| {link?.subMenus?.map((sLink, index) => { |
| return <div key={index} className=' |
| not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200 |
| font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'> |
| <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}> |
| <div><div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />{sLink.title}</div> |
| </Link> |
| </div> |
| })} |
| </Collapse>} |
| </> |
| } |
|
|
