From 7430f2240d283cc13be177b35d9e0ee36442cc86 Mon Sep 17 00:00:00 2001
From: wandji <wbertrand10@gmail.com>
Date: Mon, 25 Sep 2023 08:53:12 +0100
Subject: [PATCH 1/3] Add navigation section to item card [SCI-9154] (#6268)

---
 app/assets/stylesheets/application.sass.scss  |   1 -
 .../shared/repository_item_sidebar.scss       |  47 -----
 .../RepositoryItemSidebar.vue                 | 183 +++++++++---------
 .../repository_values/HighlightComponent.vue  |  16 --
 .../shared/_repository_row_sidebar.html.erb   |   2 +-
 config/locales/en.yml                         |   7 +-
 6 files changed, 101 insertions(+), 155 deletions(-)
 delete mode 100644 app/assets/stylesheets/shared/repository_item_sidebar.scss
 delete mode 100644 app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 7b1ba75ab..34c9335f6 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -77,7 +77,6 @@
 @import "shared/assets";
 @import "shared/avatar";
 @import "shared/cards";
-@import "shared/repository_item_sidebar";
 @import "shared/comments_sidebar";
 @import "shared/comments";
 @import "shared/content_pane";
diff --git a/app/assets/stylesheets/shared/repository_item_sidebar.scss b/app/assets/stylesheets/shared/repository_item_sidebar.scss
deleted file mode 100644
index eacc01e5c..000000000
--- a/app/assets/stylesheets/shared/repository_item_sidebar.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-// Should use tailwind; commented out for reference when refactoring
-
-// // scss-lint:disable IdSelector
-// // scss-lint:disable SelectorDepth
-// // scss-lint:disable NestingDepth
-
-// .repository-item-sidebar {
-//   font-size: 14px;
-//   font-weight: 400;
-//   line-height: 20px;
-
-//   .header {
-//     border-bottom: 1px solid var(--sn-sleepy-grey);
-//     height: var(--top-navigation-height);
-
-//     .item-name {
-//       font-size: 20px;
-//       line-height: 30px;
-//       width: calc(100% - 2rem);
-//     }
-//   }
-
-//   .title {
-//     font-size: 18px;
-//     font-weight: 600;
-//     line-height: 28px;
-//   }
-
-//   #information {
-//     width: 70%;
-//   }
-
-//   .item-details {
-//     div {
-//       border-bottom: 1px solid var(--sn-sleepy-grey);
-
-//       span {
-//         &.repository-name {
-//           -webkit-box-orient: vertical;
-//           display: -webkit-box;
-//           -webkit-line-clamp: 3;
-//           overflow: hidden;
-//         }
-//       }
-//     }
-//   }
-// }
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 85e54e04b..4f011e4b8 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -1,26 +1,46 @@
 <template>
-  <div id="repository-item-sidebar" class="w-ful h-full py-6 px-6 bg-white flex flex-col">
-    <div class="header flex w-full">
-      <h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
-        {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
-        {{ defaultColumns?.name }}
-      </h4>
-      <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
+  <div id="repository-item-sidebar" class="w-ful h-full bg-white flex flex-col relative">
+    <div class="header fixed w-full">
+      <div class="flex justify-between m-6 h-[31px]">
+        <h4 class="my-auto truncate" :title="defaultColumns?.name">
+          {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
+          {{ defaultColumns?.name }}
+        </h4>
+        <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
+      </div>
     </div>
 
-    <div id="divider" class="w-500 bg-sn-light-grey flex my-6 items-center self-stretch h-px	"></div>
-
-    <div id="body-wrapper" class="flex flex-1 justify-between">
-      <div id="left-col" class="flex flex-col gap-4 mb-4">
-        <div id="information">
-          <div id="title" class="font-inter text-xl font-semibold leading-7 mb-4">{{
-            i18n.t('repositories.item_card.title.information') }}</div>
-          <div class="item-details">
+    <div id="divider" class="bg-sn-sleepy-grey flex mt-[79px] mx-6 items-center self-stretch h-px"></div>
+    <div class="overflow-auto content flex flex-col justify-between px-6 h-full relative scroll-smooth">
+      <aside class="navigations fixed top-28 right-6">
+        <nav class="w-full">
+          <ul class="flex flex-col gap-3 text-right list-none">
+            <li v-for="nav in navigations" :key="nav.value" class="cursor-pointer inline-block relative">
+              <span
+                :class="`${activeNav === nav.value ? 'text-sn-science-blue' : 'text-sn-grey'} mr-8 transition-colors`"
+                @click.prevent="hightlightContent(nav.value)"
+              >
+                {{ nav.label }}
+              </span>
+              <span
+                :class="`${activeNav === nav.value ? 'bg-sn-science-blue w-1 inset-y-0 right-0.5' : 'transparent hidden'} absolute transition-all rounded`"
+              >
+              </span>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+      <div id="body-wrapper" class="grow-1">
+        <div class="flex flex-col gap-4 mb-4 mt-4 w-[350px]">
+          <section id="information_wrapper">
+            <h4 class="font-inter text-base font-semibold leading-7 mb-4">
+              {{ i18n.t('repositories.item_card.title.information') }}
+            </h4>
             <div class="flex flex-col gap-4">
               <div class="flex flex-col ">
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.repository_name') }}</span>
-                <span class="repository-name flex text-sn-dark-grey" :title="repositoryName">
+                <span class="text-sn-dark-grey line-clamp-3" :title="repositoryName">
                   {{ repositoryName }}
                 </span>
               </div>
@@ -30,7 +50,7 @@
               <div class="flex flex-col ">
                 <span class="inline-block font-semibold pb-[6px]">{{ i18n.t('repositories.item_card.default_columns.id')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.code">
+                <span class="inline-block text-sn-dark-grey">
                   {{ defaultColumns?.code }}
                 </span>
               </div>
@@ -41,7 +61,7 @@
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.added_on')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_on">
+                <span class="inline-block text-sn-dark-grey">
                   {{ defaultColumns?.added_on }}
                 </span>
               </div>
@@ -52,21 +72,20 @@
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.added_by')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_by">
+                <span class="inline-block text-sn-dark-grey">
                   {{ defaultColumns?.added_by }}
                 </span>
 
               </div>
             </div>
-          </div>
-        </div>
-
-        <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px	"></div>
-
-        <div id="custom-col-assigned-qr-wrapper" class="flex flex-col gap-4">
-          <div id="custom-columns-wrapper" class="flex flex-col min-h-[64px] h-auto">
-
-            <div id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">Custom columns</div>
+          </section>
+  
+          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px	"></div>
+  
+          <section id="custom_columns_wrapper" class="flex flex-col min-h-[64px] h-auto">
+            <h4 id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">
+              {{ i18n.t('repositories.item_card.navigations.custom_columns') }}
+            </h4>
             <!-- start of custom columns -->
             <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
               <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
@@ -84,11 +103,11 @@
             <div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
               {{ i18n.t('repositories.item_card.no_custom_columns_label') }}
             </div>
-          </div>
+          </section>
 
           <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px	"></div>
 
-          <div id="assigned-wrapper" class="flex flex-col h-[64px] ">
+          <section id="assigned_wrapper" class="flex flex-col ">
 
             <div v-if="this.assigned" id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4">
               Assigned (3)
@@ -104,11 +123,11 @@
             <div id="assigned-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
               {{ this.assigned }}
             </div>
-          </div>
+          </section>
 
           <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px	"></div>
 
-          <section id="qr-wrapper">
+          <section id="qr_wrapper">
             <h4 class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.navigations.qr') }}</h4>
             <div class="bar-code-container">
               <canvas id="bar-code-canvas" class="hidden"></canvas>
@@ -117,30 +136,15 @@
           </section>
         </div>
       </div>
-      <div id="navigation" class="min-w-[130px] h-[130px] flex item-end gap-x-4	">
-        <div class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px]  justify-center items-center">
-          <div class="flex flex-col w-[130px] h-[130px] justify-between text-right">
-            <div @click="handleSideNavClick" id="text-item-1" class="hover:cursor-pointer text-sn-grey">Information</div>
-            <div @click="handleSideNavClick" id="text-item-2" class="hover:cursor-pointer text-sn-grey">Custom columns
-            </div>
-            <div @click="handleSideNavClick" id="text-item-3" class="hover:cursor-pointer text-sn-grey">Assigned</div>
-            <div @click="handleSideNavClick" id="text-item-4" class="hover:cursor-pointer text-sn-grey">QR</div>
-          </div>
+  
+      <div class="footer">
+        <div id="divider" class="w-full bg-sn-sleepy-grey flex items-center self-stretch h-px mb-6"></div>
+        <div id="bottom-button-wrapper" class="flex mb-6 justify-end">
+          <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
+            {{ i18n.t('repository_row.modal_print_label.print_label') }}
+          </button>
         </div>
       </div>
-
-      <highlight-component
-        :items-to-create="['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']">
-      </highlight-component>
-    </div>
-
-    <div id="bottom" class="h-[100px] flex flex-col justify-end" :class="{ 'pb-6': customColumns?.length }">
-      <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
-      <div id="bottom-button-wrapper" class="flex h-10 justify-end">
-        <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
-          {{ i18n.t('repository_row.modal_print_label.print_label') }}
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -158,7 +162,6 @@ import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTime
 import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
 import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
 import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
-import HighlightComponent from './repository_values/HighlightComponent.vue';
 
 export default {
   name: 'RepositoryItemSidebar',
@@ -175,16 +178,16 @@ export default {
     RepositoryDateValue,
     RepositoryDateRangeValue,
     RepositoryTimeRangeValue,
-    'highlight-component': HighlightComponent
   },
   data() {
-    // using dummy data for now
     return {
       repositoryRowId: null,
       repositoryName: null,
       defaultColumns: null,
       customColumns: null,
       isShowing: false,
+      navClicked: false,
+      activeNav: 'information',
       sequenceExpanded: false,
       assigned: 'Assigned to 3 private tasks that will not be displayed',
       barCodeSrc: null
@@ -204,6 +207,13 @@ export default {
       }
     }
   },
+  computed: {
+    navigations() {
+      return ['information', 'custom_columns', 'assigned', 'qr'].map(nav => (
+        { label: I18n.t(`repositories.item_card.navigations.${nav}`), value: nav }
+      ));
+    }
+  },
   beforeDestroy() {
     delete window.repositoryItemSidebarComponent;
   },
@@ -234,42 +244,39 @@ export default {
           this.customColumns = result.custom_columns;
           this.$nextTick(() => {
             this.generateBarCode(this.defaultColumns.code);
+            this.attachScrollEvent();
           });
         }
       });
     },
-    // determine the identifier value according to the text-item (target) value
-    handleSideNavClick(e) {
-      let highlightItemId
-      const targetId = e.target.id
-      switch (targetId) {
-        case 'text-item-1':
-          highlightItemId = 'highlight-item-1'
-          break
-        case 'text-item-2':
-          highlightItemId = 'highlight-item-2'
-          break
-        case 'text-item-3':
-          highlightItemId = 'highlight-item-3'
-          break
-        case 'text-item-4':
-          highlightItemId = 'highlight-item-4'
-          break
-        default: null
+    hightlightContent(nav) {
+      this.activeNav = nav;
+      this.navClicked = true;
+      this.$nextTick(function() {
+        $(`#repository-item-sidebar #${nav}_wrapper`)[0].scrollIntoView();
+      })
+    },
+    attachScrollEvent() {
+      const topOffsets = {}
+      const sections = ['information', 'custom_columns', 'assigned', 'qr'];
+      for(let idx = 0; idx < sections.length; idx++) {
+      topOffsets[sections[idx]] = $(`#repository-item-sidebar #${sections[idx]}_wrapper`).offset().top;
       }
-
-      const arrOfBurgerItemIds = ['text-item-1', 'text-item-2', 'text-item-3', 'text-item-4']
-      const arrOfBurgerHighlightItemIds = ['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']
-      const arrToUnhighlight_1 = arrOfBurgerItemIds.filter((i) => i !== targetId)
-      const arrToUnhighlight_2 = arrOfBurgerHighlightItemIds.filter((i) => i !== highlightItemId)
-
-      // highlight the target text and corresponding identifier
-      document.getElementById(targetId).classList.add('text-sn-science-blue')
-      document.getElementById(highlightItemId).classList.add('bg-sn-science-blue')
-
-      //unhighlight the rest of the text and identifiers
-      arrToUnhighlight_1.forEach(id => document.getElementById(id).classList.remove('text-sn-science-blue'))
-      arrToUnhighlight_2.forEach(id => document.getElementById(id).classList.remove('bg-sn-science-blue'))
+      let isScrolling;
+      $('.content').on('scroll', () => {
+        if(isScrolling !== null) clearTimeout(isScrolling);
+        isScrolling = setTimeout(() => {
+          const scrollPosition = $('.content').scrollTop();
+          for(let idx = 0; idx < sections.length; idx++) {
+            if(scrollPosition < topOffsets[sections[idx + 1]] - topOffsets['information']) {
+              // Set nav only when scrolling is not triggered by ckicking nav
+              if(sections[idx] !== this.activeNav && !this.navClicked) this.activeNav = sections[idx];
+              break;
+            }
+          }
+          this.navClicked = false;
+        }, 150)
+      })
     },
     generateBarCode(text) {
       if(!text) return;
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue b/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue
deleted file mode 100644
index e696d5a6d..000000000
--- a/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
-    <div v-for="(item, index) in itemsToCreate">
-      <div :key="index" :id="item" class="w-[5px] h-[28px] rounded-[11px]"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HighlightComponent',
-  props: {
-    itemsToCreate: Array
-  }
-}
-</script>
diff --git a/app/views/shared/_repository_row_sidebar.html.erb b/app/views/shared/_repository_row_sidebar.html.erb
index f32aeb03b..c08ee42cf 100644
--- a/app/views/shared/_repository_row_sidebar.html.erb
+++ b/app/views/shared/_repository_row_sidebar.html.erb
@@ -1,6 +1,6 @@
 <div
     id="repositoryItemSidebar"
     data-behaviour="vue"
-    class='bg-white fixed top-0 right-0 h-screen w-[565px] overflow-auto gap-2.5 self-stretch z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
+    class='bg-white fixed top-0 right-0 h-screen w-[565px] z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
     <repository-item-sidebar />
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index de5599bf8..3f2b49079 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2114,10 +2114,13 @@ en:
         id: "Item ID"
         added_on: "Added on"
         added_at: "Added at"
-        added_by: 'Added by'
-      no_custom_columns_label: 'This item has no custom columns'
+        added_by: "Added by"
       navigations:
+        information: "Information"
+        custom_columns: "Custom columns"
+        assigned: "Assigned"
         qr: "QR"
+      no_custom_columns_label: 'This item has no custom columns'
       repository_time_range_value:
         no_time_range: 'No time range'
       repository_text_value:

From 5314ef14c77d183f8ceaabf0323d0dfafa988ec1 Mon Sep 17 00:00:00 2001
From: wandji <wbertrand10@gmail.com>
Date: Mon, 25 Sep 2023 09:46:19 +0100
Subject: [PATCH 2/3] Revert "Add navigation section to item card [SCI-9154]
 (#6268)" (#6284)

This reverts commit 7430f2240d283cc13be177b35d9e0ee36442cc86.
---
 app/assets/stylesheets/application.sass.scss  |   1 +
 .../shared/repository_item_sidebar.scss       |  47 +++++
 .../RepositoryItemSidebar.vue                 | 183 +++++++++---------
 .../repository_values/HighlightComponent.vue  |  16 ++
 .../shared/_repository_row_sidebar.html.erb   |   2 +-
 config/locales/en.yml                         |   9 +-
 6 files changed, 156 insertions(+), 102 deletions(-)
 create mode 100644 app/assets/stylesheets/shared/repository_item_sidebar.scss
 create mode 100644 app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 34c9335f6..7b1ba75ab 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -77,6 +77,7 @@
 @import "shared/assets";
 @import "shared/avatar";
 @import "shared/cards";
+@import "shared/repository_item_sidebar";
 @import "shared/comments_sidebar";
 @import "shared/comments";
 @import "shared/content_pane";
diff --git a/app/assets/stylesheets/shared/repository_item_sidebar.scss b/app/assets/stylesheets/shared/repository_item_sidebar.scss
new file mode 100644
index 000000000..eacc01e5c
--- /dev/null
+++ b/app/assets/stylesheets/shared/repository_item_sidebar.scss
@@ -0,0 +1,47 @@
+// Should use tailwind; commented out for reference when refactoring
+
+// // scss-lint:disable IdSelector
+// // scss-lint:disable SelectorDepth
+// // scss-lint:disable NestingDepth
+
+// .repository-item-sidebar {
+//   font-size: 14px;
+//   font-weight: 400;
+//   line-height: 20px;
+
+//   .header {
+//     border-bottom: 1px solid var(--sn-sleepy-grey);
+//     height: var(--top-navigation-height);
+
+//     .item-name {
+//       font-size: 20px;
+//       line-height: 30px;
+//       width: calc(100% - 2rem);
+//     }
+//   }
+
+//   .title {
+//     font-size: 18px;
+//     font-weight: 600;
+//     line-height: 28px;
+//   }
+
+//   #information {
+//     width: 70%;
+//   }
+
+//   .item-details {
+//     div {
+//       border-bottom: 1px solid var(--sn-sleepy-grey);
+
+//       span {
+//         &.repository-name {
+//           -webkit-box-orient: vertical;
+//           display: -webkit-box;
+//           -webkit-line-clamp: 3;
+//           overflow: hidden;
+//         }
+//       }
+//     }
+//   }
+// }
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 4f011e4b8..85e54e04b 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -1,46 +1,26 @@
 <template>
-  <div id="repository-item-sidebar" class="w-ful h-full bg-white flex flex-col relative">
-    <div class="header fixed w-full">
-      <div class="flex justify-between m-6 h-[31px]">
-        <h4 class="my-auto truncate" :title="defaultColumns?.name">
-          {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
-          {{ defaultColumns?.name }}
-        </h4>
-        <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
-      </div>
+  <div id="repository-item-sidebar" class="w-ful h-full py-6 px-6 bg-white flex flex-col">
+    <div class="header flex w-full">
+      <h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
+        {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
+        {{ defaultColumns?.name }}
+      </h4>
+      <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
     </div>
 
-    <div id="divider" class="bg-sn-sleepy-grey flex mt-[79px] mx-6 items-center self-stretch h-px"></div>
-    <div class="overflow-auto content flex flex-col justify-between px-6 h-full relative scroll-smooth">
-      <aside class="navigations fixed top-28 right-6">
-        <nav class="w-full">
-          <ul class="flex flex-col gap-3 text-right list-none">
-            <li v-for="nav in navigations" :key="nav.value" class="cursor-pointer inline-block relative">
-              <span
-                :class="`${activeNav === nav.value ? 'text-sn-science-blue' : 'text-sn-grey'} mr-8 transition-colors`"
-                @click.prevent="hightlightContent(nav.value)"
-              >
-                {{ nav.label }}
-              </span>
-              <span
-                :class="`${activeNav === nav.value ? 'bg-sn-science-blue w-1 inset-y-0 right-0.5' : 'transparent hidden'} absolute transition-all rounded`"
-              >
-              </span>
-            </li>
-          </ul>
-        </nav>
-      </aside>
-      <div id="body-wrapper" class="grow-1">
-        <div class="flex flex-col gap-4 mb-4 mt-4 w-[350px]">
-          <section id="information_wrapper">
-            <h4 class="font-inter text-base font-semibold leading-7 mb-4">
-              {{ i18n.t('repositories.item_card.title.information') }}
-            </h4>
+    <div id="divider" class="w-500 bg-sn-light-grey flex my-6 items-center self-stretch h-px	"></div>
+
+    <div id="body-wrapper" class="flex flex-1 justify-between">
+      <div id="left-col" class="flex flex-col gap-4 mb-4">
+        <div id="information">
+          <div id="title" class="font-inter text-xl font-semibold leading-7 mb-4">{{
+            i18n.t('repositories.item_card.title.information') }}</div>
+          <div class="item-details">
             <div class="flex flex-col gap-4">
               <div class="flex flex-col ">
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.repository_name') }}</span>
-                <span class="text-sn-dark-grey line-clamp-3" :title="repositoryName">
+                <span class="repository-name flex text-sn-dark-grey" :title="repositoryName">
                   {{ repositoryName }}
                 </span>
               </div>
@@ -50,7 +30,7 @@
               <div class="flex flex-col ">
                 <span class="inline-block font-semibold pb-[6px]">{{ i18n.t('repositories.item_card.default_columns.id')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey">
+                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.code">
                   {{ defaultColumns?.code }}
                 </span>
               </div>
@@ -61,7 +41,7 @@
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.added_on')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey">
+                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_on">
                   {{ defaultColumns?.added_on }}
                 </span>
               </div>
@@ -72,20 +52,21 @@
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.added_by')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey">
+                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_by">
                   {{ defaultColumns?.added_by }}
                 </span>
 
               </div>
             </div>
-          </section>
-  
-          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px	"></div>
-  
-          <section id="custom_columns_wrapper" class="flex flex-col min-h-[64px] h-auto">
-            <h4 id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">
-              {{ i18n.t('repositories.item_card.navigations.custom_columns') }}
-            </h4>
+          </div>
+        </div>
+
+        <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px	"></div>
+
+        <div id="custom-col-assigned-qr-wrapper" class="flex flex-col gap-4">
+          <div id="custom-columns-wrapper" class="flex flex-col min-h-[64px] h-auto">
+
+            <div id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">Custom columns</div>
             <!-- start of custom columns -->
             <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
               <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
@@ -103,11 +84,11 @@
             <div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
               {{ i18n.t('repositories.item_card.no_custom_columns_label') }}
             </div>
-          </section>
+          </div>
 
           <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px	"></div>
 
-          <section id="assigned_wrapper" class="flex flex-col ">
+          <div id="assigned-wrapper" class="flex flex-col h-[64px] ">
 
             <div v-if="this.assigned" id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4">
               Assigned (3)
@@ -123,11 +104,11 @@
             <div id="assigned-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
               {{ this.assigned }}
             </div>
-          </section>
+          </div>
 
           <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px	"></div>
 
-          <section id="qr_wrapper">
+          <section id="qr-wrapper">
             <h4 class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.navigations.qr') }}</h4>
             <div class="bar-code-container">
               <canvas id="bar-code-canvas" class="hidden"></canvas>
@@ -136,15 +117,30 @@
           </section>
         </div>
       </div>
-  
-      <div class="footer">
-        <div id="divider" class="w-full bg-sn-sleepy-grey flex items-center self-stretch h-px mb-6"></div>
-        <div id="bottom-button-wrapper" class="flex mb-6 justify-end">
-          <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
-            {{ i18n.t('repository_row.modal_print_label.print_label') }}
-          </button>
+      <div id="navigation" class="min-w-[130px] h-[130px] flex item-end gap-x-4	">
+        <div class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px]  justify-center items-center">
+          <div class="flex flex-col w-[130px] h-[130px] justify-between text-right">
+            <div @click="handleSideNavClick" id="text-item-1" class="hover:cursor-pointer text-sn-grey">Information</div>
+            <div @click="handleSideNavClick" id="text-item-2" class="hover:cursor-pointer text-sn-grey">Custom columns
+            </div>
+            <div @click="handleSideNavClick" id="text-item-3" class="hover:cursor-pointer text-sn-grey">Assigned</div>
+            <div @click="handleSideNavClick" id="text-item-4" class="hover:cursor-pointer text-sn-grey">QR</div>
+          </div>
         </div>
       </div>
+
+      <highlight-component
+        :items-to-create="['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']">
+      </highlight-component>
+    </div>
+
+    <div id="bottom" class="h-[100px] flex flex-col justify-end" :class="{ 'pb-6': customColumns?.length }">
+      <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
+      <div id="bottom-button-wrapper" class="flex h-10 justify-end">
+        <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
+          {{ i18n.t('repository_row.modal_print_label.print_label') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -162,6 +158,7 @@ import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTime
 import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
 import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
 import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
+import HighlightComponent from './repository_values/HighlightComponent.vue';
 
 export default {
   name: 'RepositoryItemSidebar',
@@ -178,16 +175,16 @@ export default {
     RepositoryDateValue,
     RepositoryDateRangeValue,
     RepositoryTimeRangeValue,
+    'highlight-component': HighlightComponent
   },
   data() {
+    // using dummy data for now
     return {
       repositoryRowId: null,
       repositoryName: null,
       defaultColumns: null,
       customColumns: null,
       isShowing: false,
-      navClicked: false,
-      activeNav: 'information',
       sequenceExpanded: false,
       assigned: 'Assigned to 3 private tasks that will not be displayed',
       barCodeSrc: null
@@ -207,13 +204,6 @@ export default {
       }
     }
   },
-  computed: {
-    navigations() {
-      return ['information', 'custom_columns', 'assigned', 'qr'].map(nav => (
-        { label: I18n.t(`repositories.item_card.navigations.${nav}`), value: nav }
-      ));
-    }
-  },
   beforeDestroy() {
     delete window.repositoryItemSidebarComponent;
   },
@@ -244,39 +234,42 @@ export default {
           this.customColumns = result.custom_columns;
           this.$nextTick(() => {
             this.generateBarCode(this.defaultColumns.code);
-            this.attachScrollEvent();
           });
         }
       });
     },
-    hightlightContent(nav) {
-      this.activeNav = nav;
-      this.navClicked = true;
-      this.$nextTick(function() {
-        $(`#repository-item-sidebar #${nav}_wrapper`)[0].scrollIntoView();
-      })
-    },
-    attachScrollEvent() {
-      const topOffsets = {}
-      const sections = ['information', 'custom_columns', 'assigned', 'qr'];
-      for(let idx = 0; idx < sections.length; idx++) {
-      topOffsets[sections[idx]] = $(`#repository-item-sidebar #${sections[idx]}_wrapper`).offset().top;
+    // determine the identifier value according to the text-item (target) value
+    handleSideNavClick(e) {
+      let highlightItemId
+      const targetId = e.target.id
+      switch (targetId) {
+        case 'text-item-1':
+          highlightItemId = 'highlight-item-1'
+          break
+        case 'text-item-2':
+          highlightItemId = 'highlight-item-2'
+          break
+        case 'text-item-3':
+          highlightItemId = 'highlight-item-3'
+          break
+        case 'text-item-4':
+          highlightItemId = 'highlight-item-4'
+          break
+        default: null
       }
-      let isScrolling;
-      $('.content').on('scroll', () => {
-        if(isScrolling !== null) clearTimeout(isScrolling);
-        isScrolling = setTimeout(() => {
-          const scrollPosition = $('.content').scrollTop();
-          for(let idx = 0; idx < sections.length; idx++) {
-            if(scrollPosition < topOffsets[sections[idx + 1]] - topOffsets['information']) {
-              // Set nav only when scrolling is not triggered by ckicking nav
-              if(sections[idx] !== this.activeNav && !this.navClicked) this.activeNav = sections[idx];
-              break;
-            }
-          }
-          this.navClicked = false;
-        }, 150)
-      })
+
+      const arrOfBurgerItemIds = ['text-item-1', 'text-item-2', 'text-item-3', 'text-item-4']
+      const arrOfBurgerHighlightItemIds = ['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']
+      const arrToUnhighlight_1 = arrOfBurgerItemIds.filter((i) => i !== targetId)
+      const arrToUnhighlight_2 = arrOfBurgerHighlightItemIds.filter((i) => i !== highlightItemId)
+
+      // highlight the target text and corresponding identifier
+      document.getElementById(targetId).classList.add('text-sn-science-blue')
+      document.getElementById(highlightItemId).classList.add('bg-sn-science-blue')
+
+      //unhighlight the rest of the text and identifiers
+      arrToUnhighlight_1.forEach(id => document.getElementById(id).classList.remove('text-sn-science-blue'))
+      arrToUnhighlight_2.forEach(id => document.getElementById(id).classList.remove('bg-sn-science-blue'))
     },
     generateBarCode(text) {
       if(!text) return;
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue b/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue
new file mode 100644
index 000000000..e696d5a6d
--- /dev/null
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
+    <div v-for="(item, index) in itemsToCreate">
+      <div :key="index" :id="item" class="w-[5px] h-[28px] rounded-[11px]"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HighlightComponent',
+  props: {
+    itemsToCreate: Array
+  }
+}
+</script>
diff --git a/app/views/shared/_repository_row_sidebar.html.erb b/app/views/shared/_repository_row_sidebar.html.erb
index c08ee42cf..f32aeb03b 100644
--- a/app/views/shared/_repository_row_sidebar.html.erb
+++ b/app/views/shared/_repository_row_sidebar.html.erb
@@ -1,6 +1,6 @@
 <div
     id="repositoryItemSidebar"
     data-behaviour="vue"
-    class='bg-white fixed top-0 right-0 h-screen w-[565px] z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
+    class='bg-white fixed top-0 right-0 h-screen w-[565px] overflow-auto gap-2.5 self-stretch z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
     <repository-item-sidebar />
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 3f2b49079..de5599bf8 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2114,13 +2114,10 @@ en:
         id: "Item ID"
         added_on: "Added on"
         added_at: "Added at"
-        added_by: "Added by"
-      navigations:
-        information: "Information"
-        custom_columns: "Custom columns"
-        assigned: "Assigned"
-        qr: "QR"
+        added_by: 'Added by'
       no_custom_columns_label: 'This item has no custom columns'
+      navigations:
+        qr: "QR"
       repository_time_range_value:
         no_time_range: 'No time range'
       repository_text_value:

From 7dac5e63bede6aa9c0090914466ba812dd78fffb Mon Sep 17 00:00:00 2001
From: wandji <wbertrand10@gmail.com>
Date: Mon, 25 Sep 2023 09:49:09 +0100
Subject: [PATCH 3/3] Add navigation section to item card [SCI-9154] (#6252)

---
 app/assets/stylesheets/application.sass.scss  |   1 -
 .../shared/repository_item_sidebar.scss       |  47 -----
 .../RepositoryItemSidebar.vue                 | 183 +++++++++---------
 .../repository_values/HighlightComponent.vue  |  16 --
 .../shared/_repository_row_sidebar.html.erb   |   2 +-
 config/locales/en.yml                         |   7 +-
 6 files changed, 101 insertions(+), 155 deletions(-)
 delete mode 100644 app/assets/stylesheets/shared/repository_item_sidebar.scss
 delete mode 100644 app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue

diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
index 7b1ba75ab..34c9335f6 100644
--- a/app/assets/stylesheets/application.sass.scss
+++ b/app/assets/stylesheets/application.sass.scss
@@ -77,7 +77,6 @@
 @import "shared/assets";
 @import "shared/avatar";
 @import "shared/cards";
-@import "shared/repository_item_sidebar";
 @import "shared/comments_sidebar";
 @import "shared/comments";
 @import "shared/content_pane";
diff --git a/app/assets/stylesheets/shared/repository_item_sidebar.scss b/app/assets/stylesheets/shared/repository_item_sidebar.scss
deleted file mode 100644
index eacc01e5c..000000000
--- a/app/assets/stylesheets/shared/repository_item_sidebar.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-// Should use tailwind; commented out for reference when refactoring
-
-// // scss-lint:disable IdSelector
-// // scss-lint:disable SelectorDepth
-// // scss-lint:disable NestingDepth
-
-// .repository-item-sidebar {
-//   font-size: 14px;
-//   font-weight: 400;
-//   line-height: 20px;
-
-//   .header {
-//     border-bottom: 1px solid var(--sn-sleepy-grey);
-//     height: var(--top-navigation-height);
-
-//     .item-name {
-//       font-size: 20px;
-//       line-height: 30px;
-//       width: calc(100% - 2rem);
-//     }
-//   }
-
-//   .title {
-//     font-size: 18px;
-//     font-weight: 600;
-//     line-height: 28px;
-//   }
-
-//   #information {
-//     width: 70%;
-//   }
-
-//   .item-details {
-//     div {
-//       border-bottom: 1px solid var(--sn-sleepy-grey);
-
-//       span {
-//         &.repository-name {
-//           -webkit-box-orient: vertical;
-//           display: -webkit-box;
-//           -webkit-line-clamp: 3;
-//           overflow: hidden;
-//         }
-//       }
-//     }
-//   }
-// }
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 85e54e04b..4f011e4b8 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -1,26 +1,46 @@
 <template>
-  <div id="repository-item-sidebar" class="w-ful h-full py-6 px-6 bg-white flex flex-col">
-    <div class="header flex w-full">
-      <h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
-        {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
-        {{ defaultColumns?.name }}
-      </h4>
-      <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
+  <div id="repository-item-sidebar" class="w-ful h-full bg-white flex flex-col relative">
+    <div class="header fixed w-full">
+      <div class="flex justify-between m-6 h-[31px]">
+        <h4 class="my-auto truncate" :title="defaultColumns?.name">
+          {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
+          {{ defaultColumns?.name }}
+        </h4>
+        <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
+      </div>
     </div>
 
-    <div id="divider" class="w-500 bg-sn-light-grey flex my-6 items-center self-stretch h-px	"></div>
-
-    <div id="body-wrapper" class="flex flex-1 justify-between">
-      <div id="left-col" class="flex flex-col gap-4 mb-4">
-        <div id="information">
-          <div id="title" class="font-inter text-xl font-semibold leading-7 mb-4">{{
-            i18n.t('repositories.item_card.title.information') }}</div>
-          <div class="item-details">
+    <div id="divider" class="bg-sn-sleepy-grey flex mt-[79px] mx-6 items-center self-stretch h-px"></div>
+    <div class="overflow-auto content flex flex-col justify-between px-6 h-full relative scroll-smooth">
+      <aside class="navigations fixed top-28 right-6">
+        <nav class="w-full">
+          <ul class="flex flex-col gap-3 text-right list-none">
+            <li v-for="nav in navigations" :key="nav.value" class="cursor-pointer inline-block relative">
+              <span
+                :class="`${activeNav === nav.value ? 'text-sn-science-blue' : 'text-sn-grey'} mr-8 transition-colors`"
+                @click.prevent="hightlightContent(nav.value)"
+              >
+                {{ nav.label }}
+              </span>
+              <span
+                :class="`${activeNav === nav.value ? 'bg-sn-science-blue w-1 inset-y-0 right-0.5' : 'transparent hidden'} absolute transition-all rounded`"
+              >
+              </span>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+      <div id="body-wrapper" class="grow-1">
+        <div class="flex flex-col gap-4 mb-4 mt-4 w-[350px]">
+          <section id="information_wrapper">
+            <h4 class="font-inter text-base font-semibold leading-7 mb-4">
+              {{ i18n.t('repositories.item_card.title.information') }}
+            </h4>
             <div class="flex flex-col gap-4">
               <div class="flex flex-col ">
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.repository_name') }}</span>
-                <span class="repository-name flex text-sn-dark-grey" :title="repositoryName">
+                <span class="text-sn-dark-grey line-clamp-3" :title="repositoryName">
                   {{ repositoryName }}
                 </span>
               </div>
@@ -30,7 +50,7 @@
               <div class="flex flex-col ">
                 <span class="inline-block font-semibold pb-[6px]">{{ i18n.t('repositories.item_card.default_columns.id')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.code">
+                <span class="inline-block text-sn-dark-grey">
                   {{ defaultColumns?.code }}
                 </span>
               </div>
@@ -41,7 +61,7 @@
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.added_on')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_on">
+                <span class="inline-block text-sn-dark-grey">
                   {{ defaultColumns?.added_on }}
                 </span>
               </div>
@@ -52,21 +72,20 @@
                 <span class="inline-block font-semibold pb-[6px]">{{
                   i18n.t('repositories.item_card.default_columns.added_by')
                 }}</span>
-                <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_by">
+                <span class="inline-block text-sn-dark-grey">
                   {{ defaultColumns?.added_by }}
                 </span>
 
               </div>
             </div>
-          </div>
-        </div>
-
-        <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px	"></div>
-
-        <div id="custom-col-assigned-qr-wrapper" class="flex flex-col gap-4">
-          <div id="custom-columns-wrapper" class="flex flex-col min-h-[64px] h-auto">
-
-            <div id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">Custom columns</div>
+          </section>
+  
+          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px	"></div>
+  
+          <section id="custom_columns_wrapper" class="flex flex-col min-h-[64px] h-auto">
+            <h4 id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">
+              {{ i18n.t('repositories.item_card.navigations.custom_columns') }}
+            </h4>
             <!-- start of custom columns -->
             <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
               <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
@@ -84,11 +103,11 @@
             <div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
               {{ i18n.t('repositories.item_card.no_custom_columns_label') }}
             </div>
-          </div>
+          </section>
 
           <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px	"></div>
 
-          <div id="assigned-wrapper" class="flex flex-col h-[64px] ">
+          <section id="assigned_wrapper" class="flex flex-col ">
 
             <div v-if="this.assigned" id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4">
               Assigned (3)
@@ -104,11 +123,11 @@
             <div id="assigned-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
               {{ this.assigned }}
             </div>
-          </div>
+          </section>
 
           <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px	"></div>
 
-          <section id="qr-wrapper">
+          <section id="qr_wrapper">
             <h4 class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.navigations.qr') }}</h4>
             <div class="bar-code-container">
               <canvas id="bar-code-canvas" class="hidden"></canvas>
@@ -117,30 +136,15 @@
           </section>
         </div>
       </div>
-      <div id="navigation" class="min-w-[130px] h-[130px] flex item-end gap-x-4	">
-        <div class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px]  justify-center items-center">
-          <div class="flex flex-col w-[130px] h-[130px] justify-between text-right">
-            <div @click="handleSideNavClick" id="text-item-1" class="hover:cursor-pointer text-sn-grey">Information</div>
-            <div @click="handleSideNavClick" id="text-item-2" class="hover:cursor-pointer text-sn-grey">Custom columns
-            </div>
-            <div @click="handleSideNavClick" id="text-item-3" class="hover:cursor-pointer text-sn-grey">Assigned</div>
-            <div @click="handleSideNavClick" id="text-item-4" class="hover:cursor-pointer text-sn-grey">QR</div>
-          </div>
+  
+      <div class="footer">
+        <div id="divider" class="w-full bg-sn-sleepy-grey flex items-center self-stretch h-px mb-6"></div>
+        <div id="bottom-button-wrapper" class="flex mb-6 justify-end">
+          <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
+            {{ i18n.t('repository_row.modal_print_label.print_label') }}
+          </button>
         </div>
       </div>
-
-      <highlight-component
-        :items-to-create="['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']">
-      </highlight-component>
-    </div>
-
-    <div id="bottom" class="h-[100px] flex flex-col justify-end" :class="{ 'pb-6': customColumns?.length }">
-      <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
-      <div id="bottom-button-wrapper" class="flex h-10 justify-end">
-        <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
-          {{ i18n.t('repository_row.modal_print_label.print_label') }}
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -158,7 +162,6 @@ import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTime
 import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
 import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
 import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
-import HighlightComponent from './repository_values/HighlightComponent.vue';
 
 export default {
   name: 'RepositoryItemSidebar',
@@ -175,16 +178,16 @@ export default {
     RepositoryDateValue,
     RepositoryDateRangeValue,
     RepositoryTimeRangeValue,
-    'highlight-component': HighlightComponent
   },
   data() {
-    // using dummy data for now
     return {
       repositoryRowId: null,
       repositoryName: null,
       defaultColumns: null,
       customColumns: null,
       isShowing: false,
+      navClicked: false,
+      activeNav: 'information',
       sequenceExpanded: false,
       assigned: 'Assigned to 3 private tasks that will not be displayed',
       barCodeSrc: null
@@ -204,6 +207,13 @@ export default {
       }
     }
   },
+  computed: {
+    navigations() {
+      return ['information', 'custom_columns', 'assigned', 'qr'].map(nav => (
+        { label: I18n.t(`repositories.item_card.navigations.${nav}`), value: nav }
+      ));
+    }
+  },
   beforeDestroy() {
     delete window.repositoryItemSidebarComponent;
   },
@@ -234,42 +244,39 @@ export default {
           this.customColumns = result.custom_columns;
           this.$nextTick(() => {
             this.generateBarCode(this.defaultColumns.code);
+            this.attachScrollEvent();
           });
         }
       });
     },
-    // determine the identifier value according to the text-item (target) value
-    handleSideNavClick(e) {
-      let highlightItemId
-      const targetId = e.target.id
-      switch (targetId) {
-        case 'text-item-1':
-          highlightItemId = 'highlight-item-1'
-          break
-        case 'text-item-2':
-          highlightItemId = 'highlight-item-2'
-          break
-        case 'text-item-3':
-          highlightItemId = 'highlight-item-3'
-          break
-        case 'text-item-4':
-          highlightItemId = 'highlight-item-4'
-          break
-        default: null
+    hightlightContent(nav) {
+      this.activeNav = nav;
+      this.navClicked = true;
+      this.$nextTick(function() {
+        $(`#repository-item-sidebar #${nav}_wrapper`)[0].scrollIntoView();
+      })
+    },
+    attachScrollEvent() {
+      const topOffsets = {}
+      const sections = ['information', 'custom_columns', 'assigned', 'qr'];
+      for(let idx = 0; idx < sections.length; idx++) {
+      topOffsets[sections[idx]] = $(`#repository-item-sidebar #${sections[idx]}_wrapper`).offset().top;
       }
-
-      const arrOfBurgerItemIds = ['text-item-1', 'text-item-2', 'text-item-3', 'text-item-4']
-      const arrOfBurgerHighlightItemIds = ['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']
-      const arrToUnhighlight_1 = arrOfBurgerItemIds.filter((i) => i !== targetId)
-      const arrToUnhighlight_2 = arrOfBurgerHighlightItemIds.filter((i) => i !== highlightItemId)
-
-      // highlight the target text and corresponding identifier
-      document.getElementById(targetId).classList.add('text-sn-science-blue')
-      document.getElementById(highlightItemId).classList.add('bg-sn-science-blue')
-
-      //unhighlight the rest of the text and identifiers
-      arrToUnhighlight_1.forEach(id => document.getElementById(id).classList.remove('text-sn-science-blue'))
-      arrToUnhighlight_2.forEach(id => document.getElementById(id).classList.remove('bg-sn-science-blue'))
+      let isScrolling;
+      $('.content').on('scroll', () => {
+        if(isScrolling !== null) clearTimeout(isScrolling);
+        isScrolling = setTimeout(() => {
+          const scrollPosition = $('.content').scrollTop();
+          for(let idx = 0; idx < sections.length; idx++) {
+            if(scrollPosition < topOffsets[sections[idx + 1]] - topOffsets['information']) {
+              // Set nav only when scrolling is not triggered by ckicking nav
+              if(sections[idx] !== this.activeNav && !this.navClicked) this.activeNav = sections[idx];
+              break;
+            }
+          }
+          this.navClicked = false;
+        }, 150)
+      })
     },
     generateBarCode(text) {
       if(!text) return;
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue b/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue
deleted file mode 100644
index e696d5a6d..000000000
--- a/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
-    <div v-for="(item, index) in itemsToCreate">
-      <div :key="index" :id="item" class="w-[5px] h-[28px] rounded-[11px]"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HighlightComponent',
-  props: {
-    itemsToCreate: Array
-  }
-}
-</script>
diff --git a/app/views/shared/_repository_row_sidebar.html.erb b/app/views/shared/_repository_row_sidebar.html.erb
index f32aeb03b..c08ee42cf 100644
--- a/app/views/shared/_repository_row_sidebar.html.erb
+++ b/app/views/shared/_repository_row_sidebar.html.erb
@@ -1,6 +1,6 @@
 <div
     id="repositoryItemSidebar"
     data-behaviour="vue"
-    class='bg-white fixed top-0 right-0 h-screen w-[565px] overflow-auto gap-2.5 self-stretch z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
+    class='bg-white fixed top-0 right-0 h-screen w-[565px] z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
     <repository-item-sidebar />
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index de5599bf8..3f2b49079 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2114,10 +2114,13 @@ en:
         id: "Item ID"
         added_on: "Added on"
         added_at: "Added at"
-        added_by: 'Added by'
-      no_custom_columns_label: 'This item has no custom columns'
+        added_by: "Added by"
       navigations:
+        information: "Information"
+        custom_columns: "Custom columns"
+        assigned: "Assigned"
         qr: "QR"
+      no_custom_columns_label: 'This item has no custom columns'
       repository_time_range_value:
         no_time_range: 'No time range'
       repository_text_value: