Adjust theme

1 files changed, 13 insertions, 2 deletions

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 97d923b..441ced5 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -4,14 +4,25 @@ import { useStore } from "../store/store.ts";
 export const Sidebar: React.FC = () => {
   const availableModels = useStore((state) => state.availableModels);
   const addModel = useStore((state) => state.addModel);
+  const sidebarOpen = useStore((state) => state.sidebarOpen);
+  const closeSidebar = useStore((state) => state.closeSidebar);
 
   const handleAdd = (modelId: string) => {
     addModel(modelId, { x: 0, y: 0, z: 0 });
   };
 
   return (
-    <section className="sidebar">
-      <h2 className="sidebar-title">Models</h2>
+    <section className={`sidebar ${sidebarOpen ? "sidebar--open" : ""}`}>
+      <div className="sidebar-header">
+        <h2 className="sidebar-title">Models</h2>
+        <button
+          className="sidebar-close"
+          onClick={closeSidebar}
+          aria-label="Close sidebar"
+        >
+          &times;
+        </button>
+      </div>
       <nav className="model-list">
         {availableModels.map((model) => (
           <article key={model.id} className="model-item">