From d6860154f722ab1883cf2c3a6c48b57176a2a404 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 17 Jan 2024 23:39:44 +0100
Subject: [PATCH] Add initial component for highlight sidebar, with styling but
 without logic

---
 .../highlights/HighlightSidebar.vue           | 75 +++++++++++++++++++
 client/src/layouts/DefaultLayout.vue          |  3 +
 client/src/styles/variables.css               |  6 ++
 3 files changed, 84 insertions(+)
 create mode 100644 client/src/components/highlights/HighlightSidebar.vue

diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
new file mode 100644
index 00000000..acf95d3f
--- /dev/null
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="highlight-sidebar">
+    <div class="highlight-sidebar__close-button">
+      <cross class="highlight-sidebar__close-icon" />
+    </div>
+    <div class="highlight-sidebar__section highlight-sidebar__highlight">
+      <h2 class="highlight-sidebar__section-title">Meine Markierung</h2>
+      <mark class="highlight-sidebar__highlighted-text">
+        Haben Sie sich beim Shoppen schon mal überlegt, aus welchem Beweggrund Sie ein b...
+      </mark>
+    </div>
+    <div class="highlight-sidebar__section highlight-sidebar__note">
+      <h2 class="highlight-sidebar__section-title">Meine Notiz</h2>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+
+const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
+</script>
+
+<style scoped lang="postcss">
+@custom-media --desktop (min-width: 1200px);
+
+.highlight-sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 15;
+  height: 100vh;
+  background-color: var(--color-white);
+  padding: var(--medium-spacing);
+
+  box-shadow: -2px 4px 11px 0px rgba(0, 0, 0, 0.12);
+
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  grid-template-rows: 50px max-content;
+
+  grid-template-areas: '. x' 'h h' 'n n';
+
+  @media (--desktop) {
+    width: 300px;
+  }
+
+  &__close-button {
+    grid-area: x;
+  }
+  &__highlight {
+    grid-area: h;
+  }
+  &__note {
+    grid-area: n;
+  }
+
+  &__section {
+    border-top: 1px solid var(--color-silver);
+    padding: var(--large-spacing) 0;
+  }
+
+  &__section-title {
+    font-family: var(--sans-serif-font-family);
+    font-weight: 600;
+    font-size: var(--regular-font-size);
+  }
+
+  &__highlighted-text {
+    font-family: var(--serif-font-family);
+    line-height: 1.5rem;
+  }
+}
+</style>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 7efdece2..68477d85 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -5,6 +5,7 @@
   >
     <navigation-sidebar />
     <profile-sidebar />
+    <highlight-sidebar />
     <header-bar
       class="header layout__header"
       v-if="showHeader"
@@ -27,6 +28,7 @@ import HeaderBar from '@/components/HeaderBar.vue';
 import ProfileSidebar from '@/components/profile/ProfileSidebar.vue';
 import DynamicFooter from '@/layouts/DynamicFooter.vue';
 import NavigationSidebar from '@/components/book-navigation/NavigationSidebar.vue';
+import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
 
 export default {
   components: {
@@ -34,6 +36,7 @@ export default {
     ProfileSidebar,
     NavigationSidebar,
     DynamicFooter,
+    HighlightSidebar,
   },
 
   computed: {
diff --git a/client/src/styles/variables.css b/client/src/styles/variables.css
index fb7aac6a..707f0105 100644
--- a/client/src/styles/variables.css
+++ b/client/src/styles/variables.css
@@ -10,6 +10,12 @@
   --mark-beta: #FF8BDE;
   --mark-gamma: #6FDCFF;
 
+  --color-white: #ffffff;
   --color-silver: #d0d0d0;
   --color-charcoal-dark: #333333;
+
+  --sans-serif-font-family: 'Montserrat', Arial, sans-serif;
+  --serif-font-family: 'ff-meta-serif-web-pro', serif;
+
+  --regular-font-size: 18px;
 }