56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
'use client'
|
|
|
|
import { ToggleonMouse } from '@/components/header/Header'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export default function MenuDepth01(props) {
|
|
const { setShowOutlineModal } = props
|
|
const { getMessage } = useMessage()
|
|
const [activeMenu, setActiveMenu] = useState(0)
|
|
const onClickMenu = (menuNum) => {
|
|
setActiveMenu(menuNum)
|
|
setShowOutlineModal(menuNum === 0)
|
|
}
|
|
|
|
const menus = [
|
|
{ id: 0, name: '外壁線を描' },
|
|
{ id: 1, name: '補助線を描' },
|
|
{ id: 2, name: '屋根形状設定' },
|
|
{ id: 3, name: '軒下変更' },
|
|
{ id: 4, name: '外壁線の上げ下げ' },
|
|
{ id: 5, name: '銅線移動' },
|
|
{ id: 6, name: '特殊コーナー形状' },
|
|
]
|
|
|
|
useEffect(() => {
|
|
menus.forEach((menu) => {
|
|
menu.isActive = menu.id === activeMenu
|
|
})
|
|
}, [menus, activeMenu])
|
|
return (
|
|
<div className="canvas-depth2-inner">
|
|
<ul className="canvas-depth2-list">
|
|
{menus.map((menu) => {
|
|
return (
|
|
<li className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
|
|
<button onClick={() => onClickMenu(menu.id)}>{menu.name}</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
<ul className="canvas-depth2-btn-list">
|
|
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
|
|
<button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
|
|
</li>
|
|
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
|
|
<button>屋根材の設定と変更</button>
|
|
</li>
|
|
<li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
|
|
<button>屋根面全体削除</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|