src/App.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React from "react";
import { Scene } from "./components/Scene.tsx";
import { Sidebar } from "./components/Sidebar.tsx";
import { CameraSelector } from "./components/CameraSelector.tsx";
import { ModelControls } from "./components/ModelControls.tsx";
import { BackdropUpload } from "./components/BackdropUpload.tsx";
import { useStore } from "./store/store.ts";
import "./App.css";

export const App: React.FC = () => {
  const sidebarOpen = useStore((state) => state.sidebarOpen);
  const toggleSidebar = useStore((state) => state.toggleSidebar);
  const closeSidebar = useStore((state) => state.closeSidebar);

  return (
    <section className="app">
      {!sidebarOpen && (
        <button
          className="menu-toggle"
          onClick={toggleSidebar}
          aria-label="Open sidebar"
        >
          &#9776;
        </button>
      )}
      {sidebarOpen && (
        <div className="sidebar-overlay" onClick={closeSidebar} />
      )}
      <Sidebar />
      <main className="main-content">
        <Scene />
        <aside className="overlay-controls">
          <CameraSelector />
          <BackdropUpload />
        </aside>
        <ModelControls />
      </main>
    </section>
  );
};