112 lines
4.0 KiB
JavaScript
112 lines
4.0 KiB
JavaScript
'use client'
|
|
import Link from 'next/link'
|
|
import QSelect from '@/components/common/select/QSelect'
|
|
|
|
export const ToggleonMouse = (e, act, target) => {
|
|
const listWrap = e.target.closest(target)
|
|
const ListItem = Array.from(listWrap.childNodes)
|
|
ListItem.forEach((el) => {
|
|
if (act === 'add') {
|
|
el.classList.add('mouse')
|
|
} else {
|
|
el.classList.remove('mouse')
|
|
}
|
|
})
|
|
if (act === 'add') {
|
|
e.target.parentElement.classList.remove('mouse')
|
|
}
|
|
}
|
|
|
|
export default function Header() {
|
|
const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
|
|
return (
|
|
<header>
|
|
<div className="header-inner">
|
|
<div className="header-right">
|
|
<h1 className="logo">
|
|
<Link href={'#'}></Link>
|
|
</h1>
|
|
<nav>
|
|
<ul className="nav-list ">
|
|
<li
|
|
className="nav-item "
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
|
|
>
|
|
<Link href={'#'}>ホームへ</Link>
|
|
</li>
|
|
<li
|
|
className="nav-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
|
|
>
|
|
<button>物品及び図面管理</button>
|
|
<ul className="nav-depth2">
|
|
<li
|
|
className="nav-depth2-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
|
|
>
|
|
<Link href={'#'}>新規物件登録</Link>
|
|
</li>
|
|
<li
|
|
className="nav-depth2-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
|
|
>
|
|
<Link href={'#'}>モノ/図面管理</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li
|
|
className="nav-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
|
|
>
|
|
<button>コミュニティ</button>
|
|
<ul className="nav-depth2">
|
|
<li
|
|
className="nav-depth2-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
|
|
>
|
|
<Link href={'#'}>お知らせ</Link>
|
|
</li>
|
|
<li
|
|
className="nav-depth2-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
|
|
>
|
|
<Link href={'#'}>FAQ</Link>
|
|
</li>
|
|
<li
|
|
className="nav-depth2-item"
|
|
onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
|
|
onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
|
|
>
|
|
<Link href={'#'}>素材のダウンロード</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div className="header-left">
|
|
<div className="profile-box">
|
|
<button className="profile">Kim Ji Young</button>
|
|
</div>
|
|
<div className="sign-out-box">
|
|
<button className="sign-out">ログアウト</button>
|
|
</div>
|
|
<div className="select-box">
|
|
<QSelect title={'Q.ORDER'} option={SelectOption} />
|
|
</div>
|
|
<div className="btn-wrap">
|
|
<button className="btn-frame small dark">移動</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|