Change layout

1 files changed, 83 insertions, 17 deletions

diff --git a/app/main.js b/app/main.js
index 9a4da0c..ef51345 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,6 +1,6 @@
 // main.js - Updated with Sidebar class
 
-import { Modal, Sidebar } from "components";
+import { LeftSidebar, Modal, RightSidebar } from "components";
 import { Dom, DomOptions } from "dom";
 import { MapEl } from "map";
 import {
@@ -223,8 +223,10 @@ export class App {
 	#map;
 	/** @type {HTMLElement} */
 	#stats;
-	/** @type {Sidebar} */
-	#sidebar;
+	/** @type {LeftSidebar} */
+	#leftSidebar;
+	/** @type {RightSidebar} */
+	#rightSidebar;
 	/** @type {Modal|null} */
 	#modal = null;
 	/** @type {HouseParameter} */
@@ -248,26 +250,75 @@ export class App {
 			margin: "0",
 		});
 
-		this.#sidebar = new Sidebar({
+		// Create header with global toggle buttons
+		const header = Dom.div(
+			new DomOptions({
+				children: [
+					// Left sidebar toggle button
+					Dom.button(
+						"☰ Filters",
+						() => this.#leftSidebar.toggle(),
+						new DomOptions({
+							styles: {
+								background: "#fff",
+								border: "1px solid #ddd",
+								borderRadius: "4px",
+								cursor: "pointer",
+								fontSize: "1rem",
+								margin: "0.5rem",
+								padding: "0.5rem 1rem",
+							},
+						}),
+					),
+					// Right sidebar toggle button
+					Dom.button(
+						"⚙️ Weights",
+						() => this.#rightSidebar.toggle(),
+						new DomOptions({
+							styles: {
+								background: "#fff",
+								border: "1px solid #ddd",
+								borderRadius: "4px",
+								cursor: "pointer",
+								fontSize: "1rem",
+								margin: "0.5rem",
+								padding: "0.5rem 1rem",
+							},
+						}),
+					),
+				],
+				styles: {
+					background: "#f5f5f5",
+					borderBottom: "1px solid #ddd",
+					display: "flex",
+					justifyContent: "space-between",
+					padding: "0",
+				},
+			}),
+		);
+
+		this.#leftSidebar = new LeftSidebar({
 			allHouses: this.#collection.houses,
 			areaParam: this.#areaParameter,
 			filters: this.#filters,
 			houseParam: this.#houseParameter,
-			onAreaParamChange: (param) => {
+			onAreaColorChange: (param) => {
 				this.#areaParameter = param;
 				this.#map.updateArea(this.#areaParameter);
 			},
+			onColorChange: (param) => {
+				this.#houseParameter = param;
+				this.#map.updateHousesParameter(this.#houseParameter);
+			},
 			onFilterChange: () => {
 				this.#map.updateHouseVisibility(this.#filters);
-
 				const stats = App.#createStats(this.#collection.houses, this.#filters);
 				this.#stats.replaceWith(stats);
 				this.#stats = stats;
 			},
-			onHouseParamChange: (param) => {
-				this.#houseParameter = param;
-				this.#map.updateHousesParameter(this.#houseParameter);
-			},
+		});
+
+		this.#rightSidebar = new RightSidebar({
 			onWeightChange: (key, value) => {
 				if (key in this.#weights) {
 					this.#weights[/** @type {keyof Weights} */ (key)] = value;
@@ -300,16 +351,31 @@ export class App {
 			Dom.div(
 				new DomOptions({
 					children: [
-						this.#sidebar.render(),
+						header,
 						Dom.div(
 							new DomOptions({
-								children: [this.#map.svg, this.#stats],
-								id: "map-container",
+								children: [
+									this.#leftSidebar.render(),
+									Dom.div(
+										new DomOptions({
+											children: [this.#map.svg, this.#stats],
+											id: "map-container",
+											styles: {
+												display: "flex",
+												flex: "1",
+												flexDirection: "column",
+												minWidth: "0",
+											},
+										}),
+									),
+									this.#rightSidebar.render(),
+								],
+								id: "main-content",
 								styles: {
 									display: "flex",
 									flex: "1",
-									flexDirection: "column",
-									minWidth: "0",
+									height: "calc(100vh - 60px)",
+									overflow: "hidden",
 								},
 							}),
 						),
@@ -317,8 +383,8 @@ export class App {
 					id: "main",
 					styles: {
 						display: "flex",
-						flex: "1",
-						overflow: "hidden",
+						flexDirection: "column",
+						height: "100vh",
 					},
 				}),
 			),