✨ (note) add an header

src/assets/icons/dark-left-arrow.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="5" y1="12" x2="19" y2="12" />
+  <line x1="5" y1="12" x2="9" y2="16" />
+  <line x1="5" y1="12" x2="9" y2="8" />
+</svg>

src/assets/icons/download.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-download" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4" />
+  <line x1="12" y1="13" x2="12" y2="22" />
+  <polyline points="9 19 12 22 15 19" />
+</svg>

src/components/HeaderNote.vue

@@ -0,0 +1,23 @@
+<template>
+  <header class="header-note">
+    <router-link :to="{ name: 'Home' }">
+      <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
+    </router-link>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'HeaderNote'
+})
+</script>
+
+<style scoped lang="scss">
+.header-note {
+  img:hover {
+    cursor: pointer;
+  }
+}
+</style>

src/components/StackedNote.vue

@@ -97,7 +97,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   a {
     color: #363636;
     display: block;
-    white-space: nowrap;
   }
 }
 
@@ -127,5 +126,9 @@ $border-color: rgba(18, 19, 58, 0.2);
     transform-origin: 0 0;
     transform: rotate(90deg);
   }
+
+  a {
+    white-space: nowrap;
+  }
 }
 </style>

src/views/Home.vue

@@ -8,7 +8,8 @@
     </div>
   </div>
   <div class="home content note-container" v-else>
-    <div class="readme note">
+    <div class="note readme">
+      <header-note class="header" />
       <div class="repo-title">
         <h1 class="title is-1">
           [<router-link
@@ -41,6 +42,7 @@
 import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue'
 import { useNote } from '@/hooks/useNote.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import HeaderNote from '@/components/HeaderNote.vue'
 
 const StackedNote = defineAsyncComponent(() =>
   import('@/components/StackedNote.vue')
@@ -54,7 +56,8 @@ export default defineComponent({
   name: 'Home',
   components: {
     StackedNote,
-    WelcomeWorld
+    WelcomeWorld,
+    HeaderNote
   },
   props: {
     user: { type: String, required: false, default: '' },
@@ -73,17 +76,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+$header-height: 40px;
+
 .home {
   display: flex;
   flex: 1;
 
+  .header {
+    height: $header-height;
+  }
+
   .readme {
     position: sticky;
     left: 0;
     top: 0;
-    padding: 2.5rem 2rem 1rem;
+    padding: 0 2rem 1rem;
 
     .repo-title {
+      margin-top: 1rem;
       text-align: center;
     }
   }
@@ -113,7 +123,7 @@ export default defineComponent({
     flex-wrap: wrap;
 
     .note {
-      width: 100vw;
+      width: 100%;
     }
   }
 }