Enhance App component with sidebar and toolbar; update map zoom and center

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;
+export default App;