Created accordion component

src/layout/main.layout.module.css

@@ -6,7 +6,7 @@
   grid-template-rows: auto minmax(0, 1fr) auto;
   grid-template-areas:
     'toolbar toolbar toolbar'
-    'components-gallery canvas properties-options'
+    'leftTools canvas rightTools'
     'footer footer footer';
   height: 100vh;
 }

src/pods/component-gallery/component-gallery.pod.tsx

@@ -1,14 +1,6 @@
-import classes from './component.pod.module.css';
 import { GalleryComponent } from '@/common/components/gallery/gallery-component';
 import { mockWidgetCollection } from './component-gallery-data';
 
 export const ComponentGalleryPod = () => {
-  return (
-    <div className={classes.container}>
-      <div className={classes.title}>
-        <p>Components</p>
-      </div>
-      <GalleryComponent itemCollection={mockWidgetCollection} />
-    </div>
-  );
+  return <GalleryComponent itemCollection={mockWidgetCollection} />;
 };

src/pods/container-gallery/container-gallery.pod.tsx

@@ -1,14 +1,6 @@
 import { GalleryComponent } from '@/common/components/gallery/gallery-component';
 import { mockContainerCollection } from './container-gallery-data';
-import classes from './container.pod.module.css';
 
 export const ContainerGalleryPod = () => {
-  return (
-    <div className={classes.container}>
-      <div className={classes.title}>
-        <p>Devices</p>
-      </div>
-      <GalleryComponent itemCollection={mockContainerCollection} />
-    </div>
-  );
+  return <GalleryComponent itemCollection={mockContainerCollection} />;
 };

src/scenes/main.module.css

@@ -1,13 +1,30 @@
-.componentsGallery {
-  grid-area: components-gallery;
+.leftTools {
+  grid-area: leftTools;
   border-right: 1px solid black;
+  display: inline-flex;
+  flex-direction: column;
 }
 
-.propertiesOptions {
-  grid-area: properties-options;
+.rightTools {
+  grid-area: rightTools;
   border-left: 1px solid black;
 }
 
 .footer {
   grid-area: footer;
 }
+
+.container {
+  overflow-y: auto;
+}
+.container[open] {
+  flex: 1;
+  border-bottom: 1px solid var(--primary-900);
+}
+.title {
+  position: sticky;
+  top: 0;
+  background-color: var(--primary-200);
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-900);
+}

src/scenes/main.scene.tsx

@@ -14,12 +14,18 @@ export const MainScene = () => {
   return (
     <MainLayout>
       <ToolbarPod />
-      <div className={classes.componentsGallery}>
-        <ContainerGalleryPod />
-        <ComponentGalleryPod />
+      <div className={classes.leftTools}>
+        <details className={classes.container} name="toolsLeft">
+          <summary className={classes.title}>Devices</summary>
+          <ContainerGalleryPod />
+        </details>
+        <details className={classes.container} name="toolsLeft" open>
+          <summary className={classes.title}>Components</summary>
+          <ComponentGalleryPod />
+        </details>
       </div>
       <CanvasPod />
-      <div className={classes.propertiesOptions}>
+      <div className={classes.rightTools}>
         <PropertiesPod />
       </div>
       <div className={classes.footer}>