add sidebar

703280c6 · Fabian Schmidt · f861b050 · 703280c6 · 703280c6 · 703280c6
Commit 703280c6 authored 4 years ago by Fabian Schmidt
--- a/.prettierrc
+++ b/.prettierrc
 {
  "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "printWidth" : 120
 }
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class='h-full w-full'>
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
@@ -14,8 +14,8 @@
            crossorigin=""></script>
    <title>Snowpack App</title>
  </head>
-  <body>
+  <body class='h-full w-full'>
-    <div id="root"></div>
+    <div id="root" class='h-full w-full'></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/dist/index.js"></script>
    <!--

--- a/src/App.css
+++ b/src/App.css
-#mapid { height: 500px; }
--- a/src/App.tsx
+++ b/src/App.tsx
-import React from 'react';
+import React from "react";
-import type { LatLngExpression } from 'leaflet';
+import type { LatLngExpression } from "leaflet";
-import { TileLayer, MapContainer, Marker, Popup } from 'react-leaflet';
+import { TileLayer, MapContainer, Marker, Popup } from "react-leaflet";
-import './App.css';
+import "./App.css";
+import { Sidebar } from "./Sidebar";
-interface AppProps {}
+interface AppProps {
+}
 function App({}: AppProps) {
  const hamburgCenter: LatLngExpression = [
    53.55035993851227,
-    9.986701679608633,
+    9.986701679608633
  ];
  return (
-    <MapContainer
+    <div className={"flex h-full"}>
-      id={'mapid'}
+      <Sidebar style={{flex: 1}} />
-      center={hamburgCenter}
+      <MapContainer
-      zoom={13}
+        id={"mapid"}
-      scrollWheelZoom={true}
+        className={"h-full w-full"}
-    >
+        style={{flex: 3}}
-      <TileLayer
+        center={hamburgCenter}
-        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        zoom={13}
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        scrollWheelZoom={true}
-      />
+      >
-      <Marker position={hamburgCenter}>
+        <TileLayer
-        <Popup>
+          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-          A pretty CSS3 popup. <br /> Easily customizable.
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        </Popup>
+        />
-      </Marker>
+        <Marker position={hamburgCenter}>
-    </MapContainer>
+          <Popup>
+            A pretty CSS3 popup. <br /> Easily customizable.
+          </Popup>
+        </Marker>
+      </MapContainer>
+    </div>
  );
 }

--- a/src/Sidebar.tsx
+++ b/src/Sidebar.tsx
+import React, { CSSProperties } from "react";
+interface Props {
+  style?: CSSProperties,
+  className?: string,
+}
+export const Sidebar: React.FC<Props> = (props) => {
+  return (
+    <div style={props.style} className={props.className}>
+    </div>
+  )
+}
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
@@ -14,4 +14,4 @@ body {
 code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
 }
\ No newline at end of file