56 lines
2.7 KiB
JavaScript
56 lines
2.7 KiB
JavaScript
'use client'
|
|
|
|
import { useRecoilState, useSetRecoilState } from 'recoil'
|
|
|
|
import { MENU } from '@/common/common'
|
|
import { ToggleonMouse } from '@/components/header/Header'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { currentMenuState } from '@/store/canvasAtom'
|
|
import { modalState } from '@/store/modalAtom'
|
|
|
|
export default function RoofCoveringMenu() {
|
|
const { getMessage } = useMessage()
|
|
const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
|
|
|
|
const setModalState = useSetRecoilState(modalState)
|
|
|
|
const onClickNav = (menu) => {
|
|
setCurrentMenu(menu)
|
|
if (menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) {
|
|
setModalState((prev) => ({ ...prev, outerwall: true }))
|
|
} else {
|
|
setModalState((prev) => ({ ...prev, outerwall: false }))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="canvas-depth2-inner">
|
|
<ul className="canvas-depth2-list">
|
|
<li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE ? 'active' : ''}`}>
|
|
<button onClick={(e) => onClickNav(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)}>{getMessage('plan.menu.root.cover.outline.drawing')}</button>
|
|
</li>
|
|
<li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS ? 'active' : ''}`}>
|
|
<button onClick={(e) => onClickNav(MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS)}>{getMessage('plan.menu.root.cover.roof.setting')}</button>
|
|
</li>
|
|
<li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.ROOF_SHAPE_EDITING ? 'active' : ''}`}>
|
|
<button onClick={(e) => onClickNav(MENU.ROOF_COVERING.ROOF_SHAPE_EDITING)}>{getMessage('plan.menu.root.cover.roof.edit')}</button>
|
|
</li>
|
|
<li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.HELP_LINE_DRAWING ? 'active' : ''}`}>
|
|
<button onClick={(e) => onClickNav(MENU.ROOF_COVERING.HELP_LINE_DRAWING)}>{getMessage('plan.menu.root.cover.sub.line')}</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>
|
|
)
|
|
}
|