85 lines
4.5 KiB
JavaScript
85 lines
4.5 KiB
JavaScript
'use client'
|
|
import { useState } from "react";
|
|
import Qselect from "../common/select/Qselect";
|
|
import MenuDepth01 from "./MenuDepth01";
|
|
|
|
export default function CanvasMenu({setModalOpen}) {
|
|
const [menuNumber, setMenuNumber] = useState(null);
|
|
const [vertical, setVertical] = useState(true);
|
|
const SelectOption = [
|
|
{name: '瓦53A',}, {name: '瓦53A'}
|
|
]
|
|
const onClickNav = (number) => {
|
|
setMenuNumber(number)
|
|
if(menuNumber === number){
|
|
setMenuNumber(null)
|
|
}
|
|
}
|
|
return(
|
|
<div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ""}`}>
|
|
<div className="canvas-menu-inner">
|
|
<ul className="canvas-menu-list">
|
|
<li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
|
|
<button><span className="menu-icon con00"></span>配置面 初期設定</button>
|
|
</li>
|
|
<li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
|
|
<button><span className="menu-icon con01"></span>配置面 初期設定</button>
|
|
</li>
|
|
<li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
|
|
<button><span className="menu-icon con02"></span>配置面 初期設定</button>
|
|
</li>
|
|
<li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
|
|
<button><span className="menu-icon con03"></span>配置面</button>
|
|
</li>
|
|
<li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
|
|
<button><span className="menu-icon con04"></span>モジュール回路構成</button>
|
|
</li>
|
|
<li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
|
|
<button><span className="menu-icon con06"></span>見積</button>
|
|
</li>
|
|
<li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
|
|
<button><span className="menu-icon con05"></span>発展シミュレーション</button>
|
|
</li>
|
|
</ul>
|
|
<div className="canvas-side-btn-wrap">
|
|
<div className="btn-from">
|
|
<button className="btn01 "></button>
|
|
<button className="btn02 active"></button>
|
|
<button className="btn03"></button>
|
|
</div>
|
|
<div className="vertical-horizontal">
|
|
<span>垂直水平モード</span>
|
|
<button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
|
|
</div>
|
|
<div className="select-box">
|
|
<Qselect title={'瓦53A'} option={SelectOption}/>
|
|
</div>
|
|
<div className="btn-from">
|
|
<button className="btn04" onClick={() => setModalOpen('option')}></button>
|
|
<button className="btn05"></button>
|
|
<button className="btn06"></button>
|
|
</div>
|
|
<div className="size-control">
|
|
<button className="control-btn minus"></button>
|
|
<span>100%</span>
|
|
<button className="control-btn plus"></button>
|
|
</div>
|
|
<div className="btn-from">
|
|
<button className="btn07"></button>
|
|
<button className="btn08"></button>
|
|
<button className="btn09"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
|
|
{menuNumber === 0 && <MenuDepth01/>}
|
|
{menuNumber === 1 && <MenuDepth01/>}
|
|
{menuNumber === 2 && <MenuDepth01/>}
|
|
{menuNumber === 3 && <MenuDepth01/>}
|
|
{menuNumber === 4 && <MenuDepth01/>}
|
|
{menuNumber === 5 && <MenuDepth01/>}
|
|
{menuNumber === 6 && <MenuDepth01/>}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |