From 8ca8f894e49b756306da343ff5f3d657af1795bd Mon Sep 17 00:00:00 2001 From: "azykov@mail.ru" Date: Thu, 4 Jun 2026 11:12:56 +0300 Subject: [PATCH] editor nav menu in sidebar --- index.html | 2 +- src/components/MenuView.scss | 40 ++++++++++++++++++++++++++++++++++++ src/components/MenuView.tsx | 33 +++++++++++++++++++++++++++++ src/components/Panel.tsx | 2 ++ 4 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 src/components/MenuView.scss create mode 100644 src/components/MenuView.tsx diff --git a/index.html b/index.html index 83a7846..1c46a25 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + blockly3d diff --git a/src/components/MenuView.scss b/src/components/MenuView.scss new file mode 100644 index 0000000..0b7060f --- /dev/null +++ b/src/components/MenuView.scss @@ -0,0 +1,40 @@ +.menu { + user-select: none; + font-size: 13px; +} + +.menu-node { + > summary { + list-style: none; + &::-webkit-details-marker { display: none; } + } +} + +.menu-item { + display: block; + padding: 8px 8px; + cursor: pointer; + border-radius: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: rgba(255, 255, 255, 0.7); + + &:hover { + background: rgba(255, 255, 255, 0.08); + color: #fff; + } + + &.active { + background: rgba(255, 255, 255, 0.15); + color: #fff; + } +} + +.menu-node .menu-node > summary { + padding-left: 12px; +} + +.menu-node .menu-node .menu-leaf { + padding-left: 24px; +} diff --git a/src/components/MenuView.tsx b/src/components/MenuView.tsx new file mode 100644 index 0000000..b5a20dc --- /dev/null +++ b/src/components/MenuView.tsx @@ -0,0 +1,33 @@ +import { observer } from 'mobx-react-lite'; +import { state } from '../state'; +import './MenuView.scss'; + +export const MenuView = observer(function () { + const objectIds = Object.keys(state.worldEditor.scene.objects); + const selectedId = state.worldEditor.selectedObjectId; + + return ( + + ); +}); diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 7b2cc18..9e40b48 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -1,6 +1,7 @@ import { observer } from "mobx-react-lite"; import './Panel.scss'; import { RenderInfoView } from "./RenderInfoView"; +import { MenuView } from "./MenuView"; import { state } from "../state"; export type PanelProps = { @@ -23,6 +24,7 @@ export const Panel = observer(function ({ side = 'left' }: PanelProps) { return
+