From 911e410cc62d0bcdb1200d40695416d0a8ecc7c5 Mon Sep 17 00:00:00 2001
From: Max Tobias Weber <tobias.weber@wheregroup.com>
Date: Mon, 23 Mar 2026 23:27:08 +0100
Subject: [PATCH] Enhance App component with sidebar and toolbar; update map
 zoom and center

---
 src/App.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3a5db74..c8c6c2a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,39 @@
+import { useState } from "react";
 import "./App.css";
-import { MapLibreMap } from "@mapcomponents/react-maplibre";
+import {
+  MapLibreMap,
+  Sidebar,
+  TopToolbar,
+} from "@mapcomponents/react-maplibre";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
 
 function App() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
   return (
     <>
       <MapLibreMap
         options={{
           style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-          zoom: 4,
+          zoom: 19,
+          center: [9.9347680519611, 51.531935000614226],
         }}
         style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}
       />
+      <TopToolbar
+        buttons={
+          <IconButton
+            onClick={() => setSidebarOpen((prev) => !prev)}
+            aria-label="toggle sidebar"
+          >
+            <MenuIcon />
+          </IconButton>
+        }
+      />
+      <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}></Sidebar>
     </>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;