From 22dc427af251647dcd1aa0bfa739f82dca5a621e Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 16:49:54 +0200
Subject: [PATCH 01/30] Logbook: smaller fonts, cleanup

- Replay instead of timelapse and full-screen
---
 src/pages/logs-book/sidebars/Observations.vue |  12 +-
 src/pages/logs-book/sidebars/Summary.vue      | 121 ++++++++----------
 2 files changed, 56 insertions(+), 77 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Observations.vue b/src/pages/logs-book/sidebars/Observations.vue
index 0f731ecc..ba6be746 100644
--- a/src/pages/logs-book/sidebars/Observations.vue
+++ b/src/pages/logs-book/sidebars/Observations.vue
@@ -88,8 +88,8 @@
 <template>
   <!-- observations section -->
   <div v-if="isLoggedIn && logbook.id > 0" class="">
-    <h2 class="text-lg p-2 mb-2">{{ $t('logs.log.sea_state') }}</h2>
-    <div class="text-lg">
+    <h2 class="p-2 mb-2">{{ $t('logs.log.sea_state') }}</h2>
+    <div>
       <template v-if="isLoggedIn">
         <MySelect
           v-if="props.logbook.seaState"
@@ -104,8 +104,8 @@
         {{ logbook.seaState }}
       </template>
     </div>
-    <h2 class="text-lg p-2 mb-2">{{ $t('logs.log.cloud_coverage') }}</h2>
-    <div class="text-lg mb-4">
+    <h2 class="p-2 mb-2">{{ $t('logs.log.cloud_coverage') }}</h2>
+    <div class="mb-4">
       <template v-if="isLoggedIn">
         <va-slider
           v-model="cloudCoverage"
@@ -124,8 +124,8 @@
         {{ cloudCoverage }}
       </template>
     </div>
-    <h2 class="text-lg p-2 mb-2">{{ $t('logs.log.visibility') }}</h2>
-    <div class="text-lg">
+    <h2 class="p-2 mb-2">{{ $t('logs.log.visibility') }}</h2>
+    <div>
       <template v-if="isLoggedIn">
         <MySelect
           v-if="logbook.visibility"
diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index 6869396c..ae7f6930 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -35,20 +35,21 @@
       v-model="$props.formData.name"
       outline
       :rules="[(value) => (value && value.length > 0) || 'Field is required']"
-      class="text-lg p-2"
+      class="text-sm py-2"
       @change="$emit('save', logbook as Trip)"
     /> </template
   ><template v-else>
     {{ logbook.name }}
   </template>
-  <VaDivider class="my-6" />
-  <div class="text-lg" style="position: relative">
-    <div style="position: absolute">
+
+  <VaDivider class="my-2" />
+  <div class="relative">
+    <div class="absolute">
       <svg
         version="1.0"
         xmlns="http://www.w3.org/2000/svg"
         width="50"
-        height="150"
+        height="130"
         viewBox="0 0 69.000000 900.000000"
         preserveAspectRatio="xMidYMid meet"
       >
@@ -98,8 +99,8 @@
       </svg>
     </div>
     <div class="ps-10 gap-6">
-      <div class="">{{ $t('logs.log.from') }}</div>
-      <div class="">
+      <div class="text-xs uppercase">{{ $t('logs.log.from') }}</div>
+      <div class="text-sm">
         <router-link
           v-if="typeof logbook.id !== 'undefined'"
           class="va-text-bold va-link link"
@@ -107,11 +108,11 @@
         >
           {{ logbook.from }}
         </router-link>
-        <br />
-        {{ logbook.fromTime }}
       </div>
-      <div class="">{{ $t('logs.log.to') }}</div>
-      <div class="">
+      <div>{{ logbook.fromTime }}</div>
+      <br />
+      <div class="text-xs uppercase">{{ $t('logs.log.to') }}</div>
+      <div class="text-sm">
         <router-link
           v-if="typeof logbook.id !== 'undefined'"
           class="va-text-bold va-link link"
@@ -119,93 +120,71 @@
         >
           {{ logbook.to }}
         </router-link>
-        <br />
-        {{ logbook.toTime }}
       </div>
+      <div>{{ logbook.toTime }}</div>
     </div>
   </div>
+  <div class="mt-2 text-center text-sm">
+    <template v-if="isLoggedIn">
+      <router-link
+        v-if="typeof logbook.id !== 'undefined'"
+        class="va-text-bold va-link link"
+        :to="{ name: 'timelapse-replay', params: { id: $props.logbook.id } }"
+      >
+        Replay
+      </router-link>
+    </template>
+    <template v-else>
+      <router-link
+        v-if="typeof logbook.id !== 'undefined'"
+        class="va-text-bold va-link link"
+        :to="{
+          name: 'timelapse-replay',
+          params: { boat: publicVessel, id: logbook.id },
+        }"
+      >
+        Replay
+      </router-link>
+    </template>
+  </div>
 
-  <VaDivider class="my-6" />
-  <div class="">
+  <VaDivider class="my-2" />
+  <div class="text-xs">
     DISTANCE / DURATION
-    <div class="grid grid-cols-3 gap-6 text-lg">
+    <div class="grid grid-cols-2 gap-2">
       <VaIcon name="route" :size="32" class="" />
-      <div class="">{{ logbook.distance }} / {{ logbook.duration }}</div>
-      <div class="">
-        <template v-if="isLoggedIn">
-          <router-link
-            v-if="typeof logbook.id !== 'undefined'"
-            class="va-text-bold va-link link"
-            :to="{ name: 'timelapse-replay', params: { id: $props.logbook.id } }"
-          >
-            timelapse
-          </router-link>
-          ,
-          <router-link
-            v-if="typeof logbook.id !== 'undefined'"
-            class="va-text-bold va-link link"
-            :to="{ name: 'headless-replay', params: { id: $props.logbook.id }, query: { height: '100vh' } }"
-            target="_blank"
-          >
-            fullscreen
-          </router-link> </template
-        ><template v-else>
-          <router-link
-            v-if="typeof logbook.id !== 'undefined'"
-            class="va-text-bold va-link link"
-            :to="{
-              name: 'timelapse-replay',
-              params: { boat: publicVessel, id: logbook.id },
-            }"
-          >
-            timelapse
-          </router-link>
-          ,
-          <router-link
-            v-if="typeof logbook.id !== 'undefined'"
-            class="va-text-bold va-link link"
-            :to="{
-              name: 'headless-replay',
-              params: { boat: publicVessel, id: logbook.id },
-              query: { height: '100vh' },
-            }"
-            target="_blank"
-          >
-            fullscreen
-          </router-link>
-        </template>
-      </div>
+      <div class="text-sm">{{ logbook.distance }} / {{ logbook.duration }}</div>
     </div>
   </div>
 
-  <VaDivider class="my-6" />
-  <div class="">
+  <VaDivider class="my-2" />
+  <div class="text-xs">
     SPEED AVG / MAX
     <div class="grid grid-cols-2 gap-2">
       <div class="">
         <VaIcon name="speed" :size="32" class="" />
       </div>
-      <div class="text-lg">{{ $props.logbook.avg_speed }} / {{ $props.logbook.max_speed }}</div>
+      <div class="text-sm">{{ $props.logbook.avg_speed }} / {{ $props.logbook.max_speed }}</div>
     </div>
   </div>
 
-  <VaDivider class="my-6" />
-  <div class="">
+  <VaDivider class="my-2" />
+  <div class="text-xs">
     WIND AVG / MAX
     <div class="grid grid-cols-2 gap-2">
       <VaIcon name="air" :size="32" class="" />
-      <div class="text-lg">TODO / {{ $props.logbook.max_wind_speed }}</div>
+      <div class="text-sm">TODO / {{ $props.logbook.max_wind_speed }}</div>
     </div>
   </div>
 
-  <VaDivider class="my-6" />
-  <div class="">
+  <VaDivider class="my-2" />
+  <div class="text-sm">
     <template v-if="isLoggedIn">
       <VaTextarea
         v-model="$props.formData.notes"
         outline
         :placeholder="$t('logs.log.remarks')"
-        style="width: 90%"
+        class="text-sm w-full"
         @change="$emit('save', logbook as Trip)"
       /> </template
     ><template v-else>
@@ -213,7 +192,7 @@
     </template>
   </div>
 
-  <VaDivider class="my-6" />
+  <VaDivider class="my-2" />
   <template v-if="isLoggedIn">
     <!--
                 <div class="flex flex-row pa-2">

From 2c1d7581ebf0b4de6c8853f46883b002fd7c7987 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 16:51:39 +0200
Subject: [PATCH 02/30] Logbook: remove deviders

---
 src/pages/logs-book/sidebars/Summary.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index ae7f6930..17d10d75 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -42,7 +42,6 @@
     {{ logbook.name }}
   </template>
 
-  <VaDivider class="my-2" />
   <div class="relative">
     <div class="absolute">
       <svg
@@ -157,7 +156,6 @@
     </div>
   </div>
 
-  <VaDivider class="my-2" />
   <div class="text-xs">
     SPEED AVG / MAX
     <div class="grid grid-cols-2 gap-2">
@@ -168,7 +166,6 @@
     </div>
   </div>
 
-  <VaDivider class="my-2" />
   <div class="text-xs">
     WIND AVG / MAX
     <div class="grid grid-cols-2 gap-2">
@@ -177,7 +174,6 @@
     </div>
   </div>
 
-  <VaDivider class="my-2" />
   <div class="text-sm">
     <template v-if="isLoggedIn">
       <VaTextarea
@@ -192,7 +188,6 @@
     </template>
   </div>
 
-  <VaDivider class="my-2" />
   <template v-if="isLoggedIn">
     <!--
                 <div class="flex flex-row pa-2">

From bfded4e104a0565fb5785e302e671be75f67237e Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 17:20:34 +0200
Subject: [PATCH 03/30] Logbook: Observtion uses smallcaps headers as elsewhere

---
 src/pages/logs-book/sidebars/Observations.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Observations.vue b/src/pages/logs-book/sidebars/Observations.vue
index ba6be746..c2009f2f 100644
--- a/src/pages/logs-book/sidebars/Observations.vue
+++ b/src/pages/logs-book/sidebars/Observations.vue
@@ -88,7 +88,7 @@
 <template>
   <!-- observations section -->
   <div v-if="isLoggedIn && logbook.id > 0" class="">
-    <h2 class="p-2 mb-2">{{ $t('logs.log.sea_state') }}</h2>
+    <div class="text-xs uppercase mt-4">{{ $t('logs.log.sea_state') }}</div>
     <div>
       <template v-if="isLoggedIn">
         <MySelect
@@ -104,8 +104,8 @@
         {{ logbook.seaState }}
       </template>
     </div>
-    <h2 class="p-2 mb-2">{{ $t('logs.log.cloud_coverage') }}</h2>
-    <div class="mb-4">
+    <div class="text-xs uppercase my-2">{{ $t('logs.log.cloud_coverage') }}</div>
+    <div class="m-4">
       <template v-if="isLoggedIn">
         <va-slider
           v-model="cloudCoverage"
@@ -124,7 +124,7 @@
         {{ cloudCoverage }}
       </template>
     </div>
-    <h2 class="p-2 mb-2">{{ $t('logs.log.visibility') }}</h2>
+    <div class="text-xs uppercase my-2">{{ $t('logs.log.visibility') }}</div>
     <div>
       <template v-if="isLoggedIn">
         <MySelect

From b4d599af48db705c6e64fb6f7fdcc8602ef3d3be Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 17:21:01 +0200
Subject: [PATCH 04/30] Logbook: compact summary

---
 src/pages/logs-book/sidebars/Summary.vue | 32 +++++++++---------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index 17d10d75..9e6151c6 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -148,30 +148,22 @@
   </div>
 
   <VaDivider class="my-2" />
-  <div class="text-xs">
-    DISTANCE / DURATION
-    <div class="grid grid-cols-2 gap-2">
-      <VaIcon name="route" :size="32" class="" />
-      <div class="text-sm">{{ logbook.distance }} / {{ logbook.duration }}</div>
-    </div>
+  <div class="text-xs uppercase">DISTANCE / DURATION</div>
+  <div class="flex items-center">
+    <VaIcon class="flex-none" name="route" :size="32" />
+    <div class="flex-grow ml-2 text-sm">{{ logbook.distance }} / {{ logbook.duration }}</div>
   </div>
 
-  <div class="text-xs">
-    SPEED AVG / MAX
-    <div class="grid grid-cols-2 gap-2">
-      <div class="">
-        <VaIcon name="speed" :size="32" class="" />
-      </div>
-      <div class="text-sm">{{ $props.logbook.avg_speed }} / {{ $props.logbook.max_speed }}</div>
-    </div>
+  <div class="text-xs uppercase">SPEED AVG / MAX</div>
+  <div class="flex items-center">
+    <VaIcon class="flex-none" name="speed" :size="32" />
+    <div class="flex-grow ml-2 text-sm">{{ $props.logbook.avg_speed }} / {{ $props.logbook.max_speed }}</div>
   </div>
 
-  <div class="text-xs">
-    WIND AVG / MAX
-    <div class="grid grid-cols-2 gap-2">
-      <VaIcon name="air" :size="32" class="" />
-      <div class="text-sm">TODO / {{ $props.logbook.max_wind_speed }}</div>
-    </div>
+  <div class="text-xs uppercase">WIND AVG / MAX</div>
+  <div class="flex items-center">
+    <VaIcon class="flex-none" name="air" :size="32" />
+    <div class="flex-grow ml-2 text-sm">TODO / {{ $props.logbook.max_wind_speed }}</div>
   </div>
 
   <div class="text-sm">

From f60ee9c77a470170cf924dad2e517fc7482dcf1d Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 17:25:57 +0200
Subject: [PATCH 05/30] Main page: no padding on smaller screens

Map will fit whole space
---
 src/layouts/AppLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 60d29ec4..49a91126 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -26,7 +26,7 @@
           />
         </div>
         <div class="app-layout__page">
-          <div class="p-2 md:px-6 md:py-9">
+          <div class="p-0 lg:px-6 lg:py-6">
             <router-view />
           </div>
         </div>

From dc1a03e0f09960d5421bab8ce1f0e95ccebcf362 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 17:30:25 +0200
Subject: [PATCH 06/30] Logbook: map to max screen

---
 src/pages/logs-book/DetailsMap.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 14b97bd9..99bd9992 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -97,7 +97,7 @@
           </div>
         </div>
 
-        <div id="mapContainer" ref="mapContainer" class="sidebar-map" style="height: 80vh" />
+        <div id="mapContainer" ref="mapContainer" class="sidebar-map" />
       </va-card>
     </va-inner-loading>
   </div>
@@ -632,6 +632,9 @@
 </script>
 
 <style lang="scss">
+  .sidebar-map {
+    height: 95vh;
+  }
   .mpopup {
     td:nth-child(1) {
       text-align: right;

From 2a771fa1566a429b37ee1ee7e5e5ea4aa9c3271d Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 18:44:43 +0200
Subject: [PATCH 07/30] Layout: remove padding on main page

---
 src/layouts/AppLayout.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 49a91126..4e0f1abb 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -26,9 +26,7 @@
           />
         </div>
         <div class="app-layout__page">
-          <div class="p-0 lg:px-6 lg:py-6">
-            <router-view />
-          </div>
+          <router-view />
         </div>
       </div>
     </div>

From a83a0c010e9508d3c54a9ab83ead14d500c13654 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 18:45:10 +0200
Subject: [PATCH 08/30] Logbook: map full-screen

---
 src/pages/logs-book/DetailsMap.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 99bd9992..577f2ebc 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -633,7 +633,8 @@
 
 <style lang="scss">
   .sidebar-map {
-    height: 95vh;
+    width: 100%;
+    height: calc(100vh - 4rem);
   }
   .mpopup {
     td:nth-child(1) {

From f48ce081f3cb74403ebf64142a19932aeb69cd36 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 18:51:32 +0200
Subject: [PATCH 09/30] Timelapse: map full screen

---
 src/pages/timelapse/Timelapse3.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/timelapse/Timelapse3.vue b/src/pages/timelapse/Timelapse3.vue
index 48582711..b2552aee 100644
--- a/src/pages/timelapse/Timelapse3.vue
+++ b/src/pages/timelapse/Timelapse3.vue
@@ -5,7 +5,7 @@
     </template>
     <va-inner-loading :loading="isBusy">
       <va-card class="leaflet-maps-page__widget">
-        <div id="mapContainer" ref="mapContainer" class="leaflet-map h-full" />
+        <div id="mapContainer" ref="mapContainer" class="leaflet-map" />
       </va-card>
     </va-inner-loading>
   </div>
@@ -562,6 +562,7 @@
     }
   }
   #mapContainer {
-    height: v-bind(map_height);
+    width: 100%;
+    height: calc(100vh - 4rem);
   }
 </style>

From 9b0af59c457cdafffa62816d1f0dffc2bfc4db35 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 18:58:38 +0200
Subject: [PATCH 10/30] Layout: remove tablet hack

not needed, breaks map height
---
 src/layouts/AppLayout.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 4e0f1abb..376d5b13 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -138,10 +138,6 @@
       height: calc(100vh - 4rem);
       flex: 1;
 
-      @media screen and (max-width: $tabletBreakPointPX) {
-        height: calc(100vh - 6.5rem);
-      }
-
       .app-layout__sidebar-wrapper {
         position: relative;
         height: 100%;

From e1951b142d7e870558fa0d558beb33a01ec79eb6 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 19:07:21 +0200
Subject: [PATCH 11/30] Layout: add 0.5 margin under navbar

probably there for drop shadow
---
 src/layouts/AppLayout.vue          | 3 ++-
 src/pages/logs-book/DetailsMap.vue | 2 +-
 src/pages/timelapse/Timelapse3.vue | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 376d5b13..0e83a7b0 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -135,7 +135,8 @@
 
     &__content {
       display: flex;
-      height: calc(100vh - 4rem);
+      height: calc(100vh - 4.5rem);
+      margin-top: 0.5rem;
       flex: 1;
 
       .app-layout__sidebar-wrapper {
diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 577f2ebc..cf3cc809 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -634,7 +634,7 @@
 <style lang="scss">
   .sidebar-map {
     width: 100%;
-    height: calc(100vh - 4rem);
+    height: calc(100vh - 4.5rem);
   }
   .mpopup {
     td:nth-child(1) {
diff --git a/src/pages/timelapse/Timelapse3.vue b/src/pages/timelapse/Timelapse3.vue
index b2552aee..355ee79c 100644
--- a/src/pages/timelapse/Timelapse3.vue
+++ b/src/pages/timelapse/Timelapse3.vue
@@ -563,6 +563,6 @@
   }
   #mapContainer {
     width: 100%;
-    height: calc(100vh - 4rem);
+    height: calc(100vh - 4.5rem);
   }
 </style>

From e4dc3785773b86b8f779ac6081d151030d22d7bc Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 19:20:54 +0200
Subject: [PATCH 12/30] Logbook: reduce sidebar for test

---
 src/pages/logs-book/DetailsMap.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index cf3cc809..9ff2f401 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -636,6 +636,9 @@
     width: 100%;
     height: calc(100vh - 4.5rem);
   }
+  .leaflet-sidebar {
+    width: 350px;
+  }
   .mpopup {
     td:nth-child(1) {
       text-align: right;

From a1df95c4c7e5e69ccd3da38994dcce02e2357d30 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 19:21:22 +0200
Subject: [PATCH 13/30] Logbook: more compact departed/arrived

---
 src/pages/logs-book/sidebars/Summary.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index 9e6151c6..16fbb323 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -47,7 +47,7 @@
       <svg
         version="1.0"
         xmlns="http://www.w3.org/2000/svg"
-        width="50"
+        width="30"
         height="130"
         viewBox="0 0 69.000000 900.000000"
         preserveAspectRatio="xMidYMid meet"
@@ -97,7 +97,7 @@
         </g>
       </svg>
     </div>
-    <div class="ps-10 gap-6">
+    <div class="ps-8 gap-6">
       <div class="text-xs uppercase">{{ $t('logs.log.from') }}</div>
       <div class="text-sm">
         <router-link

From 1ac60dc2eb6e5fa38edfe9a840ae5b6a3b3c9d5e Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 19:38:23 +0200
Subject: [PATCH 14/30] Logbook: remove live monitoring

also remove sidebar width - does not work well
---
 src/pages/logs-book/DetailsMap.vue | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 9ff2f401..531ef9f5 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="leaflet-maps" style="height: 100%">
+  <div class="leaflet-maps">
     <template v-if="apiError">
       <va-alert color="danger" outline class="mb-4">{{ $t('api.error') }}: {{ apiError }}</va-alert>
     </template>
@@ -23,13 +23,6 @@
                 <a href="#export" role="tab"><VaIcon name="ios_share" /></a>
               </li>
             </ul>
-
-            <ul role="tablist">
-              <!-- bottom aligned tabs -->
-              <li>
-                <a href="#monitoring" role="tab"><VaIcon name="stream" /></a>
-              </li>
-            </ul>
           </div>
 
           <!-- Tab panes -->
@@ -86,14 +79,6 @@
                 <tripExport v-if="item" :logbook="item" :form-data="formData" :loading="isBusy"
               /></template>
             </div>
-
-            <div id="monitoring" class="leaflet-sidebar-pane">
-              <h1 class="leaflet-sidebar-header">
-                Live monitoring
-                <div class="leaflet-sidebar-close"><VaIcon name="close" /></div>
-              </h1>
-              <template v-if="item"> </template>
-            </div>
           </div>
         </div>
 
@@ -636,9 +621,6 @@
     width: 100%;
     height: calc(100vh - 4.5rem);
   }
-  .leaflet-sidebar {
-    width: 350px;
-  }
   .mpopup {
     td:nth-child(1) {
       text-align: right;

From fd5d1103f8a76705a365b97342144925f0a6a60a Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 19:55:06 +0200
Subject: [PATCH 15/30] Logbook: remove legend from Performance charts

not needed as already in header of the chart
---
 src/pages/logs-book/sidebars/Performance.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/logs-book/sidebars/Performance.vue b/src/pages/logs-book/sidebars/Performance.vue
index 96526d08..48b304de 100644
--- a/src/pages/logs-book/sidebars/Performance.vue
+++ b/src/pages/logs-book/sidebars/Performance.vue
@@ -39,7 +39,7 @@
   const ChartOptionsDefault = {
     plugins: {
       legend: {
-        position: 'top',
+        display: false,
       },
     },
     scales: {

From 7102a62713846df0aecb498663ede0c6f5afee45 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 19:58:31 +0200
Subject: [PATCH 16/30] Logbook: sidebar size limited for test

---
 src/pages/logs-book/DetailsMap.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 531ef9f5..9b48f231 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -621,6 +621,10 @@
     width: 100%;
     height: calc(100vh - 4.5rem);
   }
+  .leaflet-sidebar {
+    height: 550px;
+    width: 450px;
+  }
   .mpopup {
     td:nth-child(1) {
       text-align: right;

From 474cb43ba728cfdcce71aaf64ec44c0ff7956c1f Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 20:10:45 +0200
Subject: [PATCH 17/30] Logbook: remove axis labels from Performance chart

available on hoover/click
---
 src/pages/logs-book/sidebars/Performance.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/logs-book/sidebars/Performance.vue b/src/pages/logs-book/sidebars/Performance.vue
index 48b304de..068e1d57 100644
--- a/src/pages/logs-book/sidebars/Performance.vue
+++ b/src/pages/logs-book/sidebars/Performance.vue
@@ -44,7 +44,9 @@
     },
     scales: {
       x: {
-        // beginAtZero: true
+        ticks: {
+          callback: null,
+        },
       },
       y: {
         ticks: {

From 00d1b18ec9b490ec8467cde6be03bfa2a80f708f Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 20:12:29 +0200
Subject: [PATCH 18/30] Logbook: test limit sidebar

---
 src/pages/logs-book/DetailsMap.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 9b48f231..f644eb8f 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -623,7 +623,10 @@
   }
   .leaflet-sidebar {
     height: 550px;
-    width: 450px;
+    width: 300px;
+  }
+  .leaflet-sidebar-pane {
+    width: 250px;
   }
   .mpopup {
     td:nth-child(1) {

From 54c7bcaf610251d49fad6b78818b41110ba701fb Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 21:38:06 +0200
Subject: [PATCH 19/30] Logbook: switch to Leaflet.SidePanel

test switch, not final implementation
---
 public/leaflet-sidepanel.css       | 480 +++++++++++++++++++++++++++++
 public/leaflet-sidepanel.min.js    |   6 +
 src/pages/logs-book/DetailsMap.vue | 182 ++++++-----
 3 files changed, 573 insertions(+), 95 deletions(-)
 create mode 100644 public/leaflet-sidepanel.css
 create mode 100644 public/leaflet-sidepanel.min.js

diff --git a/public/leaflet-sidepanel.css b/public/leaflet-sidepanel.css
new file mode 100644
index 00000000..c38fbe2f
--- /dev/null
+++ b/public/leaflet-sidepanel.css
@@ -0,0 +1,480 @@
+.sidepanel {
+  width: 400px;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  border: 0;
+  position: absolute;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+  z-index: 3000;
+  cursor: default;
+}
+.sidepanel.sidepanel-dark {
+  background-color: #191a1d;
+}
+@media screen and (max-width: 450px) {
+  .sidepanel {
+    width: calc(100% - 56px);
+  }
+}
+
+.sidepanel.sidepanel-left {
+  left: 0;
+  transform: translateX(-100%);
+}
+.sidepanel.sidepanel-left.opened {
+  animation: slide-right 0.5s ease 0s 1 both;
+}
+.sidepanel.sidepanel-left.closed {
+  animation: slide-left 0.5s ease 0s 1 both;
+}
+
+.sidepanel.sidepanel-right {
+  right: 0;
+  transform: translateX(100%);
+}
+.sidepanel.sidepanel-right.opened {
+  -webkit-animation: slide-right-two 0.5s ease 0s 1 both;
+  animation: slide-right-two 0.5s ease 0s 1 both;
+}
+.sidepanel.sidepanel-right.closed {
+  -webkit-animation: slide-left-two 0.5s ease 0s 1 both;
+  animation: slide-left-two 0.5s ease 0s 1 both;
+}
+
+.sidepanel-inner-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  z-index: 1000;
+}
+.sidepanel.sidepanel-dark .sidepanel-inner-wrapper {
+  background-color: #191a1d;
+}
+
+.sidepanel-content-wrapper {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  color: #191a1d;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.sidepanel.sidepanel-dark .sidepanel-content-wrapper {
+  color: #d4d4d4;
+}
+.sidepanel-content-wrapper .sidepanel-content {
+  position: absolute;
+  padding: 1rem 1rem;
+}
+.sidepanel-content-wrapper .sidepanel-content .sidepanel-tab-content {
+  color: inherit;
+  display: none;
+}
+.sidepanel-content-wrapper .sidepanel-content .sidepanel-tab-content.active {
+  display: block;
+  animation: fade-in 0.36s ease-out;
+}
+.sidepanel-content-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+.sidepanel-content-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidepanel-content-wrapper::-webkit-scrollbar-thumb {
+  background: #636363;
+  border-radius: 0px;
+}
+.sidepanel-content-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #383838;
+}
+
+.sidepanel.tabs-top .sidepanel-content-wrapper,
+.sidepanel.tabs-bottom .sidepanel-content-wrapper {
+  height: calc(100% - 48px);
+}
+
+.sidepanel.tabs-top .sidepanel-content-wrapper {
+  top: 48px;
+}
+
+.sidepanel.tabs-right .sidepanel-content-wrapper,
+.sidepanel.tabs-bottom .sidepanel-content-wrapper,
+.sidepanel.tabs-left .sidepanel-content-wrapper {
+  top: 0;
+}
+
+.sidepanel.tabs-right .sidepanel-content-wrapper {
+  right: 48px;
+}
+
+.sidepanel.tabs-left .sidepanel-content-wrapper {
+  left: 48px;
+}
+
+.sidepanel.tabs-right .sidepanel-content-wrapper,
+.sidepanel.tabs-left .sidepanel-content-wrapper {
+  height: 100%;
+  width: calc(100% - 48px);
+}
+
+.sidepanel-tabs-wrapper {
+  position: absolute;
+  height: 48px;
+  width: 100%;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+}
+.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper {
+  background-color: #191a1d;
+}
+.sidepanel-tabs-wrapper .sidepanel-tabs {
+  list-style-type: none;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: 100%;
+  width: 100%;
+}
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab {
+  flex-grow: 1;
+  flex-basis: 0;
+  align-self: stretch;
+}
+@media screen and (max-width: 230px) {
+  .sidepanel-tabs-wrapper .sidepanel-tabs {
+    overflow: scroll;
+  }
+}
+
+.sidepanel.tabs-left .sidepanel-tabs-wrapper,
+.sidepanel.tabs-right .sidepanel-tabs-wrapper {
+  width: 48px;
+  height: 100%;
+}
+.sidepanel.tabs-left .sidepanel-tabs,
+.sidepanel.tabs-right .sidepanel-tabs {
+  flex-direction: column;
+  width: 48px;
+}
+.sidepanel.tabs-left .sidepanel-tabs .sidepanel-tab,
+.sidepanel.tabs-right .sidepanel-tabs .sidepanel-tab {
+  margin-bottom: 0;
+}
+
+.sidepanel.tabs-left .sidepanel-tabs-wrapper {
+  left: 0;
+}
+
+.sidepanel.tabs-right .sidepanel-tabs-wrapper {
+  right: 0;
+}
+
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: #4b5057;
+  height: 45px;
+  line-height: 1.7;
+  padding-left: 8px;
+  padding-right: 8px;
+  border: 0;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: border-color 0.12s ease-out, color 0.12s ease-out;
+}
+.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  color: #6d737c;
+}
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  color: #191a1d;
+}
+.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  color: #e7ecf1;
+}
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  color: #199900;
+}
+.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  color: #199900;
+}
+
+.sidepanel.tabs-top .sidepanel-tabs-wrapper {
+  top: 0;
+  box-shadow: inset 0 -1px 0 #d4d4d4;
+}
+.sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  border-bottom: 2px solid transparent;
+}
+.sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-bottom-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-bottom-color: #199900;
+}
+
+.sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper {
+  box-shadow: inset 0 -1px 0 #202429;
+}
+.sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-bottom-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-bottom-color: #199900;
+}
+
+.sidepanel.tabs-bottom .sidepanel-tabs-wrapper {
+  top: auto;
+  bottom: 0;
+  box-shadow: inset 0 1px 0 #d4d4d4;
+}
+.sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  border-top: 2px solid transparent;
+  margin-top: 1px;
+}
+.sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-top-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-top-color: #199900;
+}
+
+.sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper {
+  box-shadow: inset 0 1px 0 #202429;
+}
+.sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-top-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-top-color: #199900;
+}
+
+.sidepanel.tabs-left .sidepanel-tabs-wrapper {
+  left: 0;
+  box-shadow: inset -1px 0 0 #d4d4d4;
+}
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  border-right: 2px solid transparent;
+  margin-right: 1px;
+}
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-right-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-right-color: #199900;
+}
+
+.sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper {
+  box-shadow: inset -1px 0 0 #202429;
+}
+.sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-right-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-right-color: #199900;
+}
+
+.sidepanel.tabs-right .sidepanel-tabs-wrapper {
+  right: 0;
+  box-shadow: inset 1px 0 0 #d4d4d4;
+}
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  border-left: 2px solid transparent;
+  margin-left: 1px;
+}
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-left-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-left-color: #199900;
+}
+
+.sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper {
+  box-shadow: inset 1px 0 0 #202429;
+}
+.sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
+  border-left-color: rgba(175, 184, 193, 0.2);
+}
+.sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+  border-left-color: #199900;
+}
+
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs,
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs {
+  height: auto;
+}
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link,
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link img,
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link svg {
+  vertical-align: middle;
+}
+
+.sidepanel .sidepanel-toggle-container {
+  display: block;
+  position: absolute;
+  top: calc(50% - 24px);
+  left: 100%;
+  right: 0;
+  width: 24px;
+  height: 48px;
+  z-index: 500;
+}
+.sidepanel .sidepanel-toggle-container .sidepanel-toggle-button {
+  position: absolute;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+  width: 24px;
+  height: 48px;
+  cursor: pointer;
+  background-color: #ffffff;
+  border: 0;
+  border-left: 1px solid #d4d4d4;
+  border-radius: 0 8px 8px 0;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+}
+.sidepanel .sidepanel-toggle-container .sidepanel-toggle-button::before {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 48px;
+  top: 0;
+  left: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  opacity: 1;
+}
+.sidepanel .sidepanel-toggle-container .sidepanel-toggle-button:focus {
+  outline: none;
+}
+
+.sidepanel.sidepanel-dark .sidepanel-toggle-container .sidepanel-toggle-button {
+  background-color: #191a1d;
+  border-left: 1px solid #202429;
+}
+.sidepanel.sidepanel-dark .sidepanel-toggle-container .sidepanel-toggle-button::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+}
+
+.sidepanel.sidepanel-right .sidepanel-toggle-container {
+  left: -24px;
+  right: 100%;
+}
+
+.sidepanel.opened .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-right.closed .sidepanel-toggle-container .sidepanel-toggle-button::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  transform: rotate(180deg);
+}
+
+.sidepanel.sidepanel-dark.opened .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-dark.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-dark.sidepanel-right.closed .sidepanel-toggle-container .sidepanel-toggle-button::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+}
+
+.sidepanel .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.closed .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-right.opened .sidepanel-toggle-container .sidepanel-toggle-button::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  transform: rotate(0deg);
+}
+
+.sidepanel.sidepanel-dark .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-dark.closed .sidepanel-toggle-container .sidepanel-toggle-button::before,
+.sidepanel.sidepanel-dark.sidepanel-right.opened .sidepanel-toggle-container .sidepanel-toggle-button::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+}
+
+.sidepanel.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button {
+  border-left: 0;
+  border-right: 1px solid #d4d4d4;
+  border-radius: 8px 0 0 8px;
+}
+
+.sidepanel.sidepanel-dark.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button {
+  border-right: 1px solid #202429;
+}
+
+.leaflet-anim-control-container.left-opened .leaflet-left {
+  left: 400px;
+  transition: left 0.5s ease;
+}
+@media screen and (max-width: 450px) {
+  .leaflet-anim-control-container.left-opened .leaflet-left {
+    left: calc(100% - 56px);
+  }
+}
+.leaflet-anim-control-container.left-closed .leaflet-left {
+  left: 0;
+  transition: left 0.5s ease;
+}
+.leaflet-anim-control-container.right-opened .leaflet-right {
+  right: 400px;
+  transition: right 0.5s ease, right 0.5s ease;
+}
+@media screen and (max-width: 450px) {
+  .leaflet-anim-control-container.right-opened .leaflet-right {
+    right: calc(100% - 56px);
+  }
+}
+.leaflet-anim-control-container.right-closed .leaflet-right {
+  right: 0;
+  transition: right 0.5s ease, right 0.5s ease;
+}
+
+@keyframes slide-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+@keyframes slide-right {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-left-two {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes slide-right-two {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/public/leaflet-sidepanel.min.js b/public/leaflet-sidepanel.min.js
new file mode 100644
index 00000000..081b9013
--- /dev/null
+++ b/public/leaflet-sidepanel.min.js
@@ -0,0 +1,6 @@
+/**
+ * @name Leaflet.SidePanel
+ * @link https://github.com/maxwell-ilai/Leaflet.SidePanel
+ */
+
+L.Control.SidePanel=L.Control.extend({includes:L.Evented.prototype,options:{panelPosition:"left",hasTabs:!0,tabsPosition:"top",darkMode:!1,pushControls:!1,startTab:1},initialize:function(t,o){this._panel=L.DomUtil.get(t),L.setOptions(this,o)},addTo:function(t){L.DomUtil.addClass(this._panel,"sidepanel-"+this.options.panelPosition),this.options.darkMode&&L.DomUtil.addClass(this._panel,"sidepanel-dark"),L.DomEvent.disableScrollPropagation(this._panel),L.DomEvent.disableClickPropagation(this._panel),this.options.hasTabs&&this.initTabs(t,this.options.tabsPosition)},initTabs:function(t,o){"string"==typeof o&&L.DomUtil.addClass(this._panel,"tabs-"+o);let s=this._panel.querySelectorAll("a.sidebar-tab-link"),e=this._panel.querySelectorAll(".sidepanel-tab-content");s.forEach(function(t,o){let i,a;"number"==typeof this.options.startTab&&this.options.startTab-1===o&&(i=t,a=e[o-1]),"string"==typeof this.options.startTab&&this.options.startTab===t.dataset.tabLink&&(i=t,a=this._panel.querySelector(`.sidepanel-tab-content[data-tab-content="${this.options.startTab}"]`)),void 0===i||L.DomUtil.hasClass(i,"active")||(L.DomUtil.addClass(i,"active"),L.DomUtil.addClass(a,"active")),L.DomEvent.on(t,"click",function(o){if(L.DomEvent.preventDefault(o),!L.DomUtil.hasClass(t,"active")){for(let t=0;t<s.length;t++){let o=s[t];L.DomUtil.hasClass(o,"active")&&L.DomUtil.removeClass(o,"active")}L.DomUtil.addClass(t,"active"),e.forEach(function(o){t.dataset.tabLink===o.dataset.tabContent?L.DomUtil.addClass(o,"active"):L.DomUtil.removeClass(o,"active")})}},t)}.bind(this)),this._toggleButton(t)},_toggleButton:function(t){const o=this._panel.querySelector(".sidepanel-toggle-container"),s=o.querySelector(".sidepanel-toggle-button");L.DomEvent.on(s,"click",function(o){let s=!0,e=L.DomUtil.hasClass(this._panel,"opened"),i=L.DomUtil.hasClass(this._panel,"closed");if(e||i?!e&&i?(L.DomUtil.addClass(this._panel,"opened"),L.DomUtil.removeClass(this._panel,"closed")):e&&!i?(s=!1,L.DomUtil.removeClass(this._panel,"opened"),L.DomUtil.addClass(this._panel,"closed")):L.DomUtil.addClass(this._panel,"opened"):L.DomUtil.addClass(this._panel,"opened"),this.options.pushControls){let o=t.getContainer().querySelector(".leaflet-control-container");L.DomUtil.addClass(o,"leaflet-anim-control-container"),s?(L.DomUtil.removeClass(o,this.options.panelPosition+"-closed"),L.DomUtil.addClass(o,this.options.panelPosition+"-opened")):(L.DomUtil.removeClass(o,this.options.panelPosition+"-opened"),L.DomUtil.addClass(o,this.options.panelPosition+"-closed"))}}.bind(this),o)}}),L.control.sidepanel=function(t,o){return new L.Control.SidePanel(t,o)};
\ No newline at end of file
diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index f644eb8f..b6a39fbf 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -5,84 +5,75 @@
     </template>
     <va-inner-loading :loading="item && isBusy">
       <va-card>
-        <div id="sidebar" ref="sidebarContainer" class="leaflet-sidebar collapsed">
-          <!-- Nav tabs -->
-          <div class="leaflet-sidebar-tabs">
-            <ul role="tablist">
-              <!-- top aligned tabs -->
-              <li>
-                <a href="#summary" role="tab"><VaIcon name="summarize" /></a>
-              </li>
-              <li>
-                <a href="#performance" role="tab"><VaIcon name="bar_chart" /></a>
-              </li>
-              <li>
-                <a href="#observations" role="tab"><VaIcon name="settings_suggest" /></a>
-              </li>
-              <li>
-                <a href="#export" role="tab"><VaIcon name="ios_share" /></a>
-              </li>
-            </ul>
-          </div>
-
-          <!-- Tab panes -->
-          <div class="leaflet-sidebar-content">
-            <div id="summary" class="leaflet-sidebar-pane">
-              <h1 class="leaflet-sidebar-header">
-                Summary
-                <div class="leaflet-sidebar-close"><VaIcon name="close" /></div>
-              </h1>
-              <template v-if="item">
-                <tripSummary
-                  v-if="item"
-                  :logbook="item"
-                  :form-data="formData"
-                  :loading="isBusy"
-                  @delete="handleDelete"
-                  @save="handleSubmit"
-                />
-              </template>
-            </div>
-
-            <div id="performance" class="leaflet-sidebar-pane">
-              <h1 class="leaflet-sidebar-header">
-                Performance
-                <div class="leaflet-sidebar-close"><VaIcon name="close" /></div>
-              </h1>
-              <template v-if="item">
-                <tripPerformance
-                  v-if="item"
-                  :winddata="wind_arr"
-                  :speeddata="speed_arr"
-                  :labels="labels_arr"
-                  :loading="isBusy"
-                />
-              </template>
-            </div>
-
-            <div id="observations" class="leaflet-sidebar-pane">
-              <h1 class="leaflet-sidebar-header">
-                Observations
-                <div class="leaflet-sidebar-close"><VaIcon name="close" /></div>
-              </h1>
-              <template v-if="item">
-                <tripObservations v-if="item" :logbook="item" :form-data="formData" :loading="isBusy"
-              /></template>
-            </div>
-
-            <div id="export" class="leaflet-sidebar-pane">
-              <h1 class="leaflet-sidebar-header">
-                Export / Sharing
-                <div class="leaflet-sidebar-close"><VaIcon name="close" /></div>
-              </h1>
-              <template v-if="item">
-                <tripExport v-if="item" :logbook="item" :form-data="formData" :loading="isBusy"
-              /></template>
+        <div id="sidepanel" class="sidepanel" aria-label="side panel" aria-hidden="false">
+          <div class="sidepanel-inner-wrapper">
+            <nav class="sidepanel-tabs-wrapper" aria-label="sidepanel tab navigation">
+              <ul class="sidepanel-tabs">
+                <li class="sidepanel-tab">
+                  <a href="#summary" class="sidebar-tab-link" role="tab" data-tab-link="tab-1">
+                    <VaIcon name="summarize" />
+                  </a>
+                </li>
+                <li class="sidepanel-tab">
+                  <a href="#performance" class="sidebar-tab-link" role="tab" data-tab-link="tab-2">
+                    <VaIcon name="bar_chart" />
+                  </a>
+                </li>
+                <li class="sidepanel-tab">
+                  <a href="#observations" class="sidebar-tab-link" role="tab" data-tab-link="tab-3">
+                    <VaIcon name="settings_suggest" />
+                  </a>
+                </li>
+                <li class="sidepanel-tab">
+                  <a href="#export" class="sidebar-tab-link" role="tab" data-tab-link="tab-4">
+                    <VaIcon name="ios_share" />
+                  </a>
+                </li>
+              </ul>
+            </nav>
+            <div class="sidepanel-content-wrapper">
+              <div class="sidepanel-content">
+                <div class="sidepanel-tab-content" data-tab-content="tab-1">
+                  <template v-if="item">
+                    <tripSummary
+                      v-if="item"
+                      :logbook="item"
+                      :form-data="formData"
+                      :loading="isBusy"
+                      @delete="handleDelete"
+                      @save="handleSubmit"
+                    />
+                  </template>
+                </div>
+                <div class="sidepanel-tab-content" data-tab-content="tab-2">
+                  <template v-if="item">
+                    <tripPerformance
+                      v-if="item"
+                      :winddata="wind_arr"
+                      :speeddata="speed_arr"
+                      :labels="labels_arr"
+                      :loading="isBusy"
+                    />
+                  </template>
+                </div>
+                <div class="sidepanel-tab-content" data-tab-content="tab-3">
+                  <template v-if="item">
+                    <tripObservations v-if="item" :logbook="item" :form-data="formData" :loading="isBusy"
+                  /></template>
+                </div>
+                <div class="sidepanel-tab-content" data-tab-content="tab-4">
+                  <template v-if="item">
+                    <tripExport v-if="item" :logbook="item" :form-data="formData" :loading="isBusy"
+                  /></template>
+                </div>
+              </div>
             </div>
           </div>
+          <div class="sidepanel-toggle-container">
+            <button class="sidepanel-toggle-button" type="button" aria-label="toggle side panel"></button>
+          </div>
         </div>
-
-        <div id="mapContainer" ref="mapContainer" class="sidebar-map" />
+        <div id="mapContainer" ref="mapContainer" class="leaflet-map" />
       </va-card>
     </va-inner-loading>
   </div>
@@ -90,10 +81,10 @@
 
 <script setup>
   import 'leaflet/dist/leaflet.css'
-  import 'leaflet-sidebar-v2/css/leaflet-sidebar.min.css'
+  import '../../../public/leaflet-sidepanel.css'
   import * as L from 'leaflet'
-  import 'leaflet-sidebar-v2'
   import 'leaflet-rotatedmarker'
+  import '../../../public/leaflet-sidepanel.min.js'
   import { defaultBaseMapType, baseMaps, overlayMaps, boatMarkerTypes } from '../../components/maps/leafletHelpers.js'
 
   import { computed, ref, reactive, onMounted } from 'vue'
@@ -115,7 +106,7 @@
 
   const { t } = useI18n()
 
-  const { readOnly } = useGlobalStore()
+  const { readOnly, currentTheme } = useGlobalStore()
   const { vesselName, vesselType } = useVesselStore()
 
   import tripSummary from './sidebars/Summary.vue'
@@ -138,7 +129,7 @@
   const mapContainer = ref(),
     map = ref(),
     sidebarContainer = ref(),
-    sidebar = ref(),
+    sidepanel = ref(),
     speed_arr = ref([]),
     wind_arr = ref([]),
     labels_arr = ref([]),
@@ -441,13 +432,15 @@
     map.value.fitBounds(GeoJSONlayer.value.getBounds(), { maxZoom: 17, zoomControl: false })
     */
 
-    // Add sidebar
-    sidebar.value = L.control
-      .sidebar({
-        autopan: false, // whether to maintain the centered map point when opening the sidebar
-        closeButton: true, // whether to add a close button to the panes
-        container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
-        position: 'left', // left or right
+    // Add sidepanel
+    sidepanel.value = L.control
+      .sidepanel('sidepanel', {
+        panelPosition: 'left',
+        hasTabs: true,
+        tabsPosition: 'top',
+        pushControls: true,
+        darkMode: currentTheme === 'dark',
+        startTab: 'tab-1',
       })
       .addTo(map.value)
 
@@ -465,7 +458,7 @@
 
   const confirmDeleteTrackpoint = async () => {
     console.log('confirmDeleteTrackpoint')
-    sidebar.value.close()
+    sidepanel.value.close()
     document.getElementById('mapContainer').style.display = 'none'
     isBusy.value = true
     updateError.value = null
@@ -574,7 +567,7 @@
   }
 
   const handleDelete = async (log) => {
-    sidebar.value.close()
+    sidepanel.value.close()
     document.getElementById('mapContainer').style.display = 'none'
     isBusy.value = true
     updateError.value = null
@@ -617,16 +610,15 @@
 </script>
 
 <style lang="scss">
-  .sidebar-map {
+  .leaflet-map {
     width: 100%;
     height: calc(100vh - 4.5rem);
   }
-  .leaflet-sidebar {
-    height: 550px;
-    width: 300px;
-  }
-  .leaflet-sidebar-pane {
-    width: 250px;
+  .sidepanel {
+    width: 350px;
+    .sidepanel-content {
+      width: 350px;
+    }
   }
   .mpopup {
     td:nth-child(1) {

From 4152faf9c00751f3795468031eab718f0b711e1b Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 21:44:59 +0200
Subject: [PATCH 20/30] Timelapse: move trip/moorage overlay to center

prevent overlap with instruments overlay
---
 src/pages/timelapse/Timelapse3.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/timelapse/Timelapse3.vue b/src/pages/timelapse/Timelapse3.vue
index 355ee79c..555d314e 100644
--- a/src/pages/timelapse/Timelapse3.vue
+++ b/src/pages/timelapse/Timelapse3.vue
@@ -509,7 +509,7 @@
     }
     .overlay {
       padding: 0 0.7rem;
-      top: 70px;
+      top: 110px;
       background: #000;
       opacity: 0.5;
       color: #fff;

From 8a51edef85b25e13b6be1779f4d03873fac7c176 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 22:05:17 +0200
Subject: [PATCH 21/30] Move to components/maps

---
 .eslintrc.js                                  |  2 +-
 public/leaflet-sidepanel.min.js               |  6 --
 .../components/maps}/leaflet-sidepanel.css    |  0
 src/components/maps/leaflet-sidepanel.min.js  | 92 +++++++++++++++++++
 src/pages/logs-book/DetailsMap.vue            |  4 +-
 5 files changed, 95 insertions(+), 9 deletions(-)
 delete mode 100644 public/leaflet-sidepanel.min.js
 rename {public => src/components/maps}/leaflet-sidepanel.css (100%)
 create mode 100644 src/components/maps/leaflet-sidepanel.min.js

diff --git a/.eslintrc.js b/.eslintrc.js
index e6f97128..87bc3931 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -20,7 +20,7 @@ module.exports = {
     '@vue/typescript/recommended',
     '@vue/prettier',
   ],
-
+  ignorePatterns: ['src/components/maps/leaflet-sidepanel.*'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
diff --git a/public/leaflet-sidepanel.min.js b/public/leaflet-sidepanel.min.js
deleted file mode 100644
index 081b9013..00000000
--- a/public/leaflet-sidepanel.min.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @name Leaflet.SidePanel
- * @link https://github.com/maxwell-ilai/Leaflet.SidePanel
- */
-
-L.Control.SidePanel=L.Control.extend({includes:L.Evented.prototype,options:{panelPosition:"left",hasTabs:!0,tabsPosition:"top",darkMode:!1,pushControls:!1,startTab:1},initialize:function(t,o){this._panel=L.DomUtil.get(t),L.setOptions(this,o)},addTo:function(t){L.DomUtil.addClass(this._panel,"sidepanel-"+this.options.panelPosition),this.options.darkMode&&L.DomUtil.addClass(this._panel,"sidepanel-dark"),L.DomEvent.disableScrollPropagation(this._panel),L.DomEvent.disableClickPropagation(this._panel),this.options.hasTabs&&this.initTabs(t,this.options.tabsPosition)},initTabs:function(t,o){"string"==typeof o&&L.DomUtil.addClass(this._panel,"tabs-"+o);let s=this._panel.querySelectorAll("a.sidebar-tab-link"),e=this._panel.querySelectorAll(".sidepanel-tab-content");s.forEach(function(t,o){let i,a;"number"==typeof this.options.startTab&&this.options.startTab-1===o&&(i=t,a=e[o-1]),"string"==typeof this.options.startTab&&this.options.startTab===t.dataset.tabLink&&(i=t,a=this._panel.querySelector(`.sidepanel-tab-content[data-tab-content="${this.options.startTab}"]`)),void 0===i||L.DomUtil.hasClass(i,"active")||(L.DomUtil.addClass(i,"active"),L.DomUtil.addClass(a,"active")),L.DomEvent.on(t,"click",function(o){if(L.DomEvent.preventDefault(o),!L.DomUtil.hasClass(t,"active")){for(let t=0;t<s.length;t++){let o=s[t];L.DomUtil.hasClass(o,"active")&&L.DomUtil.removeClass(o,"active")}L.DomUtil.addClass(t,"active"),e.forEach(function(o){t.dataset.tabLink===o.dataset.tabContent?L.DomUtil.addClass(o,"active"):L.DomUtil.removeClass(o,"active")})}},t)}.bind(this)),this._toggleButton(t)},_toggleButton:function(t){const o=this._panel.querySelector(".sidepanel-toggle-container"),s=o.querySelector(".sidepanel-toggle-button");L.DomEvent.on(s,"click",function(o){let s=!0,e=L.DomUtil.hasClass(this._panel,"opened"),i=L.DomUtil.hasClass(this._panel,"closed");if(e||i?!e&&i?(L.DomUtil.addClass(this._panel,"opened"),L.DomUtil.removeClass(this._panel,"closed")):e&&!i?(s=!1,L.DomUtil.removeClass(this._panel,"opened"),L.DomUtil.addClass(this._panel,"closed")):L.DomUtil.addClass(this._panel,"opened"):L.DomUtil.addClass(this._panel,"opened"),this.options.pushControls){let o=t.getContainer().querySelector(".leaflet-control-container");L.DomUtil.addClass(o,"leaflet-anim-control-container"),s?(L.DomUtil.removeClass(o,this.options.panelPosition+"-closed"),L.DomUtil.addClass(o,this.options.panelPosition+"-opened")):(L.DomUtil.removeClass(o,this.options.panelPosition+"-opened"),L.DomUtil.addClass(o,this.options.panelPosition+"-closed"))}}.bind(this),o)}}),L.control.sidepanel=function(t,o){return new L.Control.SidePanel(t,o)};
\ No newline at end of file
diff --git a/public/leaflet-sidepanel.css b/src/components/maps/leaflet-sidepanel.css
similarity index 100%
rename from public/leaflet-sidepanel.css
rename to src/components/maps/leaflet-sidepanel.css
diff --git a/src/components/maps/leaflet-sidepanel.min.js b/src/components/maps/leaflet-sidepanel.min.js
new file mode 100644
index 00000000..1303c77c
--- /dev/null
+++ b/src/components/maps/leaflet-sidepanel.min.js
@@ -0,0 +1,92 @@
+/**
+ * @name Leaflet.SidePanel
+ * @link https://github.com/maxwell-ilai/Leaflet.SidePanel
+ */
+
+;(L.Control.SidePanel = L.Control.extend({
+  includes: L.Evented.prototype,
+  options: { panelPosition: 'left', hasTabs: !0, tabsPosition: 'top', darkMode: !1, pushControls: !1, startTab: 1 },
+  initialize: function (t, o) {
+    ;(this._panel = L.DomUtil.get(t)), L.setOptions(this, o)
+  },
+  addTo: function (t) {
+    L.DomUtil.addClass(this._panel, 'sidepanel-' + this.options.panelPosition),
+      this.options.darkMode && L.DomUtil.addClass(this._panel, 'sidepanel-dark'),
+      L.DomEvent.disableScrollPropagation(this._panel),
+      L.DomEvent.disableClickPropagation(this._panel),
+      this.options.hasTabs && this.initTabs(t, this.options.tabsPosition)
+  },
+  initTabs: function (t, o) {
+    'string' == typeof o && L.DomUtil.addClass(this._panel, 'tabs-' + o)
+    let s = this._panel.querySelectorAll('a.sidebar-tab-link'),
+      e = this._panel.querySelectorAll('.sidepanel-tab-content')
+    s.forEach(
+      function (t, o) {
+        let i, a
+        'number' == typeof this.options.startTab && this.options.startTab - 1 === o && ((i = t), (a = e[o - 1])),
+          'string' == typeof this.options.startTab &&
+            this.options.startTab === t.dataset.tabLink &&
+            ((i = t),
+            (a = this._panel.querySelector(`.sidepanel-tab-content[data-tab-content="${this.options.startTab}"]`))),
+          void 0 === i ||
+            L.DomUtil.hasClass(i, 'active') ||
+            (L.DomUtil.addClass(i, 'active'), L.DomUtil.addClass(a, 'active')),
+          L.DomEvent.on(
+            t,
+            'click',
+            function (o) {
+              if ((L.DomEvent.preventDefault(o), !L.DomUtil.hasClass(t, 'active'))) {
+                for (let t = 0; t < s.length; t++) {
+                  let o = s[t]
+                  L.DomUtil.hasClass(o, 'active') && L.DomUtil.removeClass(o, 'active')
+                }
+                L.DomUtil.addClass(t, 'active'),
+                  e.forEach(function (o) {
+                    t.dataset.tabLink === o.dataset.tabContent
+                      ? L.DomUtil.addClass(o, 'active')
+                      : L.DomUtil.removeClass(o, 'active')
+                  })
+              }
+            },
+            t,
+          )
+      }.bind(this),
+    ),
+      this._toggleButton(t)
+  },
+  _toggleButton: function (t) {
+    const o = this._panel.querySelector('.sidepanel-toggle-container'),
+      s = o.querySelector('.sidepanel-toggle-button')
+    L.DomEvent.on(
+      s,
+      'click',
+      function (o) {
+        let s = !0,
+          e = L.DomUtil.hasClass(this._panel, 'opened'),
+          i = L.DomUtil.hasClass(this._panel, 'closed')
+        if (
+          (e || i
+            ? !e && i
+              ? (L.DomUtil.addClass(this._panel, 'opened'), L.DomUtil.removeClass(this._panel, 'closed'))
+              : e && !i
+              ? ((s = !1), L.DomUtil.removeClass(this._panel, 'opened'), L.DomUtil.addClass(this._panel, 'closed'))
+              : L.DomUtil.addClass(this._panel, 'opened')
+            : L.DomUtil.addClass(this._panel, 'opened'),
+          this.options.pushControls)
+        ) {
+          let o = t.getContainer().querySelector('.leaflet-control-container')
+          L.DomUtil.addClass(o, 'leaflet-anim-control-container'),
+            s
+              ? (L.DomUtil.removeClass(o, this.options.panelPosition + '-closed'),
+                L.DomUtil.addClass(o, this.options.panelPosition + '-opened'))
+              : (L.DomUtil.removeClass(o, this.options.panelPosition + '-opened'),
+                L.DomUtil.addClass(o, this.options.panelPosition + '-closed'))
+        }
+      }.bind(this),
+      o,
+    )
+  },
+})),
+  (L.control.sidepanel = function (t, o) {
+    return new L.Control.SidePanel(t, o)
+  })
diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index b6a39fbf..3e088361 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -81,10 +81,10 @@
 
 <script setup>
   import 'leaflet/dist/leaflet.css'
-  import '../../../public/leaflet-sidepanel.css'
+  import '../../components/maps/leaflet-sidepanel.css'
   import * as L from 'leaflet'
   import 'leaflet-rotatedmarker'
-  import '../../../public/leaflet-sidepanel.min.js'
+  import '../../components/maps/leaflet-sidepanel.min.js'
   import { defaultBaseMapType, baseMaps, overlayMaps, boatMarkerTypes } from '../../components/maps/leafletHelpers.js'
 
   import { computed, ref, reactive, onMounted } from 'vue'

From 1e0a22f501bece01e2cac56262084258952b3873 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 22:05:40 +0200
Subject: [PATCH 22/30] Update leaflet-sidepanel.css

---
 src/components/maps/leaflet-sidepanel.css | 53 +++++++++++++++--------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/maps/leaflet-sidepanel.css b/src/components/maps/leaflet-sidepanel.css
index c38fbe2f..7602597e 100644
--- a/src/components/maps/leaflet-sidepanel.css
+++ b/src/components/maps/leaflet-sidepanel.css
@@ -1,7 +1,8 @@
 .sidepanel {
   width: 400px;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
   border: 0;
   position: absolute;
   background-color: #ffffff;
@@ -202,10 +203,12 @@
 .sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   color: #e7ecf1;
 }
-.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   color: #199900;
 }
-.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.sidepanel-dark .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   color: #199900;
 }
 
@@ -219,7 +222,8 @@
 .sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-bottom-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-bottom-color: #199900;
 }
 
@@ -229,7 +233,8 @@
 .sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-bottom-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.sidepanel-dark.tabs-top .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-bottom-color: #199900;
 }
 
@@ -245,7 +250,8 @@
 .sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-top-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-top-color: #199900;
 }
 
@@ -255,7 +261,8 @@
 .sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-top-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.sidepanel-dark.tabs-bottom .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-top-color: #199900;
 }
 
@@ -270,7 +277,8 @@
 .sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-right-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-right-color: #199900;
 }
 
@@ -280,7 +288,8 @@
 .sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-right-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.sidepanel-dark.tabs-left .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-right-color: #199900;
 }
 
@@ -295,7 +304,8 @@
 .sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-left-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-left-color: #199900;
 }
 
@@ -305,7 +315,8 @@
 .sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:hover {
   border-left-color: rgba(175, 184, 193, 0.2);
 }
-.sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active, .sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
+.sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link:active,
+.sidepanel.sidepanel-dark.tabs-right .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link.active {
   border-left-color: #199900;
 }
 
@@ -349,13 +360,14 @@
   box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
 }
 .sidepanel .sidepanel-toggle-container .sidepanel-toggle-button::before {
-  content: "";
+  content: '';
   position: absolute;
   width: 24px;
   height: 48px;
   top: 0;
   left: 0;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat 50% 50%;
   opacity: 1;
 }
 .sidepanel .sidepanel-toggle-container .sidepanel-toggle-button:focus {
@@ -367,7 +379,8 @@
   border-left: 1px solid #202429;
 }
 .sidepanel.sidepanel-dark .sidepanel-toggle-container .sidepanel-toggle-button::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat 50% 50%;
 }
 
 .sidepanel.sidepanel-right .sidepanel-toggle-container {
@@ -378,27 +391,31 @@
 .sidepanel.opened .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-right.closed .sidepanel-toggle-container .sidepanel-toggle-button::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat 50% 50%;
   transform: rotate(180deg);
 }
 
 .sidepanel.sidepanel-dark.opened .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-dark.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-dark.sidepanel-right.closed .sidepanel-toggle-container .sidepanel-toggle-button::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat 50% 50%;
 }
 
 .sidepanel .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.closed .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-right.opened .sidepanel-toggle-container .sidepanel-toggle-button::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234B5057%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat 50% 50%;
   transform: rotate(0deg);
 }
 
 .sidepanel.sidepanel-dark .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-dark.closed .sidepanel-toggle-container .sidepanel-toggle-button::before,
 .sidepanel.sidepanel-dark.sidepanel-right.opened .sidepanel-toggle-container .sidepanel-toggle-button::before {
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%236D737C%22%20class%3D%22bi%20bi-caret-right-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m12.14%208.753-5.482%204.796c-.646.566-1.658.106-1.658-.753V3.204a1%201%200%200%201%201.659-.753l5.48%204.796a1%201%200%200%201%200%201.506z%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat 50% 50%;
 }
 
 .sidepanel.sidepanel-right .sidepanel-toggle-container .sidepanel-toggle-button {

From e01269743a64f513e8e9c432d2e55c0c72c25824 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 22:11:58 +0200
Subject: [PATCH 23/30] Cleanup

no close() method for panel
---
 src/pages/logs-book/DetailsMap.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index 3e088361..f66e7f62 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -128,7 +128,6 @@
   })
   const mapContainer = ref(),
     map = ref(),
-    sidebarContainer = ref(),
     sidepanel = ref(),
     speed_arr = ref([]),
     wind_arr = ref([]),
@@ -458,7 +457,6 @@
 
   const confirmDeleteTrackpoint = async () => {
     console.log('confirmDeleteTrackpoint')
-    sidepanel.value.close()
     document.getElementById('mapContainer').style.display = 'none'
     isBusy.value = true
     updateError.value = null
@@ -567,7 +565,6 @@
   }
 
   const handleDelete = async (log) => {
-    sidepanel.value.close()
     document.getElementById('mapContainer').style.display = 'none'
     isBusy.value = true
     updateError.value = null

From 30e31210cfe6e0343f05eb02744f21305ad0286f Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 22:15:16 +0200
Subject: [PATCH 24/30] Performance: fix chart titles (swap)

---
 src/pages/logs-book/sidebars/Performance.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Performance.vue b/src/pages/logs-book/sidebars/Performance.vue
index 068e1d57..dc0c7b18 100644
--- a/src/pages/logs-book/sidebars/Performance.vue
+++ b/src/pages/logs-book/sidebars/Performance.vue
@@ -97,7 +97,7 @@
   <div class="p-2">
     <template v-if="winddata">
       <va-card v-if="winddata">
-        <va-card-title>Boat Speed</va-card-title>
+        <va-card-title>Wind Speed</va-card-title>
         <va-card-content>
           <VaChart :data="windChartDataComputed" type="line" :options="windChartOptionsComputed" />
         </va-card-content>
@@ -107,7 +107,7 @@
   <div class="p-2">
     <template v-if="speeddata">
       <va-card v-if="speeddata">
-        <va-card-title>Wind Speed</va-card-title>
+        <va-card-title>Boat Speed</va-card-title>
         <va-card-content>
           <VaChart :data="speedChartDataComputed" type="line" :options="speedChartOptionsComputed" />
         </va-card-content>

From 91da859600caa416fd6a6aa21d4246b8316c60ea Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 22:16:31 +0200
Subject: [PATCH 25/30] Summary: arrow shorter

---
 src/pages/logs-book/sidebars/Summary.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index 16fbb323..37cb601a 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -48,7 +48,7 @@
         version="1.0"
         xmlns="http://www.w3.org/2000/svg"
         width="30"
-        height="130"
+        height="120"
         viewBox="0 0 69.000000 900.000000"
         preserveAspectRatio="xMidYMid meet"
       >

From 0409e1c159a8b1cc07da847edee614cbf85fa024 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Thu, 9 May 2024 22:21:03 +0200
Subject: [PATCH 26/30] Summary: increase fromt/to font size

---
 src/pages/logs-book/sidebars/Summary.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index 37cb601a..322e238c 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -48,7 +48,7 @@
         version="1.0"
         xmlns="http://www.w3.org/2000/svg"
         width="30"
-        height="120"
+        height="130"
         viewBox="0 0 69.000000 900.000000"
         preserveAspectRatio="xMidYMid meet"
       >
@@ -99,7 +99,7 @@
     </div>
     <div class="ps-8 gap-6">
       <div class="text-xs uppercase">{{ $t('logs.log.from') }}</div>
-      <div class="text-sm">
+      <div class="text-base">
         <router-link
           v-if="typeof logbook.id !== 'undefined'"
           class="va-text-bold va-link link"
@@ -108,10 +108,10 @@
           {{ logbook.from }}
         </router-link>
       </div>
-      <div>{{ logbook.fromTime }}</div>
+      <div class="text-sm">{{ logbook.fromTime }}</div>
       <br />
       <div class="text-xs uppercase">{{ $t('logs.log.to') }}</div>
-      <div class="text-sm">
+      <div class="text-base">
         <router-link
           v-if="typeof logbook.id !== 'undefined'"
           class="va-text-bold va-link link"
@@ -120,7 +120,7 @@
           {{ logbook.to }}
         </router-link>
       </div>
-      <div>{{ logbook.toTime }}</div>
+      <div class="text-sm">{{ logbook.toTime }}</div>
     </div>
   </div>
   <div class="mt-2 text-center text-sm">

From 7313bad2c64d3e0056447d36227967ec74692d24 Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Fri, 10 May 2024 08:31:04 +0200
Subject: [PATCH 27/30] Switch to our blue color for active tab

---
 src/pages/logs-book/DetailsMap.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/logs-book/DetailsMap.vue b/src/pages/logs-book/DetailsMap.vue
index f66e7f62..058de75e 100644
--- a/src/pages/logs-book/DetailsMap.vue
+++ b/src/pages/logs-book/DetailsMap.vue
@@ -617,6 +617,11 @@
       width: 350px;
     }
   }
+  .sidebar-tab-link.active,
+  .sidebar-tab-link:hover {
+    color: var(--va-primary) !important;
+    border-bottom-color: var(--va-primary) !important;
+  }
   .mpopup {
     td:nth-child(1) {
       text-align: right;

From 400c73efc1e7af32c35f2e75e0967efcc25d380e Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Fri, 10 May 2024 09:06:43 +0200
Subject: [PATCH 28/30] Dashboard: fix batt/solar/power/tank color for dark
 mode

---
 src/pages/dashboard/Dashboard.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/dashboard/Dashboard.vue b/src/pages/dashboard/Dashboard.vue
index 659bd348..bfacf472 100644
--- a/src/pages/dashboard/Dashboard.vue
+++ b/src/pages/dashboard/Dashboard.vue
@@ -405,6 +405,9 @@
 
 <style lang="scss">
   .dashboard {
+    .va-icon {
+      fill: var(--va-text-primary);
+    }
     .va-card {
       margin-bottom: 0 !important;
       &__title {

From 53c37845bf39bccee5f26cc2f16d2f79eb192fce Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Fri, 10 May 2024 09:07:54 +0200
Subject: [PATCH 29/30] Summary: add NOTES header and Delete Log Book

---
 src/pages/logs-book/sidebars/Summary.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index 322e238c..2c27a67f 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -166,6 +166,7 @@
     <div class="flex-grow ml-2 text-sm">TODO / {{ $props.logbook.max_wind_speed }}</div>
   </div>
 
+  <div class="text-xs uppercase">NOTES</div>
   <div class="text-sm">
     <template v-if="isLoggedIn">
       <VaTextarea
@@ -187,7 +188,9 @@
                 </div>
                 -->
     <div class="flex flex-row pa-2">
-      <va-button :disable="readOnly" color="danger" @click="$emit('delete', logbook as Trip)">Delete</va-button>
+      <va-button :disable="readOnly" color="danger" @click="$emit('delete', logbook as Trip)"
+        >Delete Log Book</va-button
+      >
     </div>
   </template>
 </template>

From 21538b8c29ea981cefc59a876f89df6de032d6dd Mon Sep 17 00:00:00 2001
From: Luka Renko <46861689+lukarenko@users.noreply.github.com>
Date: Fri, 10 May 2024 11:12:26 +0200
Subject: [PATCH 30/30] Summary: add TAGS header

---
 src/pages/logs-book/sidebars/Summary.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/logs-book/sidebars/Summary.vue b/src/pages/logs-book/sidebars/Summary.vue
index ad3747f0..d4194701 100644
--- a/src/pages/logs-book/sidebars/Summary.vue
+++ b/src/pages/logs-book/sidebars/Summary.vue
@@ -196,11 +196,11 @@
   </div>
 
   <VaDivider class="my-6" />
+  <div class="text-xs uppercase">TAGS</div>
   <div class="">
     <template v-if="isLoggedIn">
       <VaSelect
         v-model="$props.formData.tags"
-        label="Select or create a tag"
         :options="$props.tags"
         allow-create="unique"
         multiple