First Layout with Leaflet map and centered slot for overlays

src/routes/[qrcode]/+layout.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import type { LayoutProps } from './$types';
+
+  let { data, children }: LayoutProps = $props();
+  const cc = $derived(data.chargecontroller);
+  const qrcode = $derived(page.params.qrcode);
+</script>
+
+<div class="flex flex-col h-screen">
+  <div class="flex flex-col fixed w-screen h-screen top-0 left-0 overflow-hidden">
+    <div class="navbar bg-base-100 not-dark:shadow-xl dark:shadow-sm h-16">
+      <div class="flex-1">
+        <a class="btn btn-ghost text-xl" href="/">RossiniEnergy</a>
+      </div>
+      <div class="flex-none">
+        <ul class="menu menu-horizontal px-1">
+          <li><p>QRCODE: {qrcode}</p></li>
+          <li>
+            <details>
+              <summary>PARK: {cc['park']}</summary>
+              <ul class="bg-base-100 rounded-t-none p-2">
+                <li><p>EN</p></li>
+                <li><p>IT</p></li>
+              </ul>
+            </details>
+          </li>
+        </ul>
+      </div>
+    </div>
+    {#await import('./Map.svelte') then { default: Map }}
+      <Map class="grow h-10 -z-20" x={cc['latitude']} y={cc['longitude']}/>
+    {/await}
+  </div>
+  <div class="z-20 mt-16 grow pointer-events-none">
+    <div class="flex justify-center items-center h-full pointer-events-none">
+      {@render children()}
+    </div>
+  </div>
+</div>