improve visualization

src/pages/viewer/components/Layers.jsx

@@ -70,9 +70,6 @@ export default function Layers({ layers = [] }) {
 
   return (
     <div className="layers">
-      <div>
-        <h5>Kartlag</h5>
-      </div>
       <Tree
         initialData={layers}
         disableEdit

src/pages/viewer/components/MapContextProvider.jsx

@@ -14,11 +14,11 @@ function getLayer(layerId, style) {
 function popup(e) {
   let properties = e.features[0].properties;
   let html =
-    "<table>" +
+    "<table class='table is-bordered is-striped is-narrow is-hoverable is-fullwidth'><tbody>" +
     Object.keys(properties)
-      .map((key) => `<tr><td>${key}</td><td>${properties[key]}</td></tr>`)
+      .map((key) => `<tr><td><b>${key}</b></td><td>${properties[key]}</td></tr>`)
       .reduce((a, b) => a + b) +
-    "</table>";
+    "</tbody></table>";
   return new maplibregl.Popup().setLngLat(e.lngLat).setHTML(html);
 }
 

src/pages/viewer/components/Metadata.jsx

@@ -1,12 +1,21 @@
+import { Content, Heading, Image, Media, Panel } from "react-bulma-components";
+import logo from '../../../assets/logosmall.png';
+
 export default function Metadata({ title, subtitle, description, metadataRef }) {
   return (
     <div ref={metadataRef} className="metadata">
-      <h3>{title}</h3>
-      <p>{subtitle}</p>
-      <details>
-        <summary>Beskrivelse</summary>
-        <div dangerouslySetInnerHTML={{ __html: description }} />
-      </details>
+      <Media className="pt-2">
+        <Media.Item align="left">
+          <Image
+            src={logo}
+            size={64}
+          />
+        </Media.Item>
+        <Media.Item align="center">
+          <Heading size={4}>{title}</Heading>
+          <Heading size={6} subtitle>{subtitle}</Heading>
+        </Media.Item>
+      </Media>
     </div>
   )
 }

src/pages/viewer/index.jsx

@@ -7,6 +7,9 @@ import Metadata from "./components/Metadata";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import mapApi from "../../api";
 import { NotFoundError } from "../../lib/utils";
+import { Content, Tabs } from "react-bulma-components";
+import { useMemo, useState } from "react";
+import { Helmet } from "react-helmet";
 
 const fetchMap = async (mapSlug) => {
   const map = await mapApi
@@ -46,17 +49,54 @@ function MapErrorComponent({ error }) {
 }
 
 
-export function Viewer() {
+const TABS = {
+  kartlag: {
+    label: 'Kartlag',
+    render: (map) => <Layers layers={map.data.layers} />,
+  },
+  beskrivelse: {
+    label: 'Beskrivelse',
+    render: (map) => (
+    <Content px={2}>
+      <div dangerouslySetInnerHTML={{ __html: map.data.description }} />
+    </Content>
+    )
+  }
+}
+
+function TabNav({ map }) {
+  const [active, setActive] = useState('kartlag');
+
+  const render = useMemo(() => TABS[active].render(map), [active, map]);
+
+  return (
+    <>
+      <Tabs fullwidth mt={3}>
+        {Object.keys(TABS).map(k => (
+          <Tabs.Tab active={k === active} key={k} onClick={() => setActive(k)}>
+            {TABS[k].label}
+          </Tabs.Tab>
+        ))}
+      </Tabs>
+      {render}
+    </>
+  )
+}
+
+export function Viewer() { 
   const { mapSlug } = viewerRoute.useParams();
   const mapQuery = useSuspenseQuery(mapQueryOptions(mapSlug));
   const map = mapQuery.data;
 
   return (
     <MapContextProvider>
+      <Helmet 
+        title={map.data.title}
+      />
       <div id="app-wrap" style={{ display: 'flex' }}>
         <div id="sidebar">
           <Metadata {...map.data} />
-          <Layers layers={map.data.layers} />
+          <TabNav map={map} />
         </div>
         <Map {...map.data} />
       </div>

src/styles/app.scss

@@ -53,27 +53,10 @@ body {
     }
 }
 
-
-
-table tr:nth-child(odd) {
-  background-color: aliceblue;
-}
-
 .wrapper {
   padding: 0.5rem;
 }
 
-h5, h3 {
-  margin: 0;
-  padding: 1rem 0;
-}
-
 .metadata h3 {
   padding: 0.2rem 0;
 }
-
-details summary + div {
-  margin-left: 0.5rem;
-  max-height: 200px;
-  overflow-y: scroll;
-}