From f92f0790edd18337fb294239b672d1c9f5a8fd75 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Wed, 8 Nov 2023 19:32:43 +0100
Subject: [PATCH] Fix resizeable navigator

---
 app/assets/javascripts/my_modules.js          |  4 +--
 .../stylesheets/navigation/navigator.scss     |  9 +++++
 app/javascript/packs/application.js           |  1 +
 app/javascript/packs/vue/action_toolbar.js    |  6 ++--
 .../packs/vue/assign_items_to_task_modal.js   |  5 +--
 .../vue/export_stock_consumption_modal.js     |  5 ++-
 .../packs/vue/helpers/turbolinks.js           |  7 ++++
 app/javascript/packs/vue/label_template.js    |  4 +--
 .../packs/vue/legacy/datetime_picker.js       |  7 ++--
 .../packs/vue/navigation/breadcrumbs.js       |  5 +--
 .../packs/vue/open_vector_editor.js           |  4 +--
 app/javascript/packs/vue/protocol.js          |  4 +--
 .../packs/vue/protocol_file_import_modal.js   |  4 +--
 app/javascript/packs/vue/repository_filter.js |  4 +--
 .../packs/vue/repository_item_sidebar.js      |  4 +--
 .../packs/vue/repository_print_modal.js       |  4 +--
 app/javascript/packs/vue/repository_search.js |  4 +--
 app/javascript/packs/vue/results.js           |  4 +--
 .../assign_items_to_tasks_modal/container.vue |  2 +-
 .../vue/components/action_toolbar.vue         |  2 +-
 .../vue/mixins/moduleNameObserver.js          |  2 +-
 .../vue/mixins/stackableHeadersMixin.js       |  2 +-
 app/javascript/vue/navigation/navigator.vue   | 36 ++++++++++---------
 app/javascript/vue/navigation/top_menu.vue    |  2 +-
 app/javascript/vue/protocol/container.vue     |  2 +-
 .../RepositoryItemSidebar.vue                 |  2 +-
 .../export_stock_consumption_modal.vue        |  6 ++--
 app/javascript/vue/results/results.vue        |  2 +-
 app/javascript/vue/shared/content/table.vue   |  2 +-
 app/javascript/vue/shared/select.vue          |  2 +-
 package.json                                  |  1 -
 yarn.lock                                     |  5 ---
 32 files changed, 83 insertions(+), 70 deletions(-)
 create mode 100644 app/javascript/packs/vue/helpers/turbolinks.js

diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js
index dcd6e2b1a..4db6aa550 100644
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@@ -56,12 +56,12 @@
 
   // Bind ajax for editing due dates
   function initStartDatePicker() {
-    window.initDateTimePickerComponent('#calendarStartDateContainer');
     $('.datetime-picker-container#start-date').on('dp:ready', () => {
       $('#calendarStartDate').data('dateTimePicker').onChange = () => {
         updateStartDate();
       };
     });
+    window.initDateTimePickerComponent('#calendarStartDateContainer');
   }
 
   function updateDueDate() {
@@ -85,12 +85,12 @@
 
   // Bind ajax for editing due dates
   function initDueDatePicker() {
-    window.initDateTimePickerComponent('#calendarDueDateContainer');
     $('.datetime-picker-container#due-date').on('dp:ready', () => {
       $('#calendarDueDate').data('dateTimePicker').onChange = () => {
         updateDueDate();
       };
     });
+    window.initDateTimePickerComponent('#calendarDueDateContainer');
   }
 
   function initTagsSelector() {
diff --git a/app/assets/stylesheets/navigation/navigator.scss b/app/assets/stylesheets/navigation/navigator.scss
index 1b595fd38..e6474e082 100644
--- a/app/assets/stylesheets/navigation/navigator.scss
+++ b/app/assets/stylesheets/navigation/navigator.scss
@@ -1,4 +1,13 @@
 .sci--layout-navigation-navigator {
+  .handle-mr {
+    display: block !important;
+    height: 100%;
+    opacity: 0;
+    right: -2px;
+    top: 0;
+  }
+
+
   .menu-item:not(.active):hover {
     background-color: var(--sn-super-light-grey);
 
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 3f72451c1..682823548 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -11,6 +11,7 @@ require('hammerjs');
 import 'bootstrap';
 require('bootstrap-select/js/bootstrap-select');
 import '@vuepic/vue-datepicker/dist/main.css';
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 
 window.bwipjs = require('bwip-js');
 window.Decimal = require('decimal.js');
diff --git a/app/javascript/packs/vue/action_toolbar.js b/app/javascript/packs/vue/action_toolbar.js
index 789ff6f07..4267a8d8c 100644
--- a/app/javascript/packs/vue/action_toolbar.js
+++ b/app/javascript/packs/vue/action_toolbar.js
@@ -1,16 +1,16 @@
 /* global notTurbolinksPreview */
 
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ActionToolbar from '../../vue/components/action_toolbar.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 window.initActionToolbar = () => {
-  if (window.actionToolbarComponent) return;
+
   if (notTurbolinksPreview()) {
     const app = createApp({});
     app.component('ActionToolbar', ActionToolbar);
-    app.use(TurbolinksAdapter);
     app.config.globalProperties.i18n = window.I18n;
     app.mount('#actionToolbar');
+    handleTurbolinks(app);
   }
 }
diff --git a/app/javascript/packs/vue/assign_items_to_task_modal.js b/app/javascript/packs/vue/assign_items_to_task_modal.js
index 1dbf89f5a..4669f571c 100644
--- a/app/javascript/packs/vue/assign_items_to_task_modal.js
+++ b/app/javascript/packs/vue/assign_items_to_task_modal.js
@@ -1,8 +1,9 @@
-import TurbolinksAdapter from 'vue-turbolinks';
+
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import AssignItemsToTaskModalContainer from '../../vue/assign_items_to_tasks_modal/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 function initAssignItemsToTaskModalComponent() {
   const container = $('.assign-items-to-task-modal-container');
@@ -31,10 +32,10 @@ function initAssignItemsToTaskModalComponent() {
       }
     });
     app.component('AssignItemsToTaskModalContainer', AssignItemsToTaskModalContainer);
-    app.use(TurbolinksAdapter);
     app.use(PerfectScrollbar);
     app.config.globalProperties.i18n = window.I18n;
     app.mount('.assign-items-to-task-modal-container');
+    handleTurbolinks(app);
 
     window.AssignItemsToTaskModalComponentContainer = app;
   }
diff --git a/app/javascript/packs/vue/export_stock_consumption_modal.js b/app/javascript/packs/vue/export_stock_consumption_modal.js
index a1f1a4388..9726faf94 100644
--- a/app/javascript/packs/vue/export_stock_consumption_modal.js
+++ b/app/javascript/packs/vue/export_stock_consumption_modal.js
@@ -1,8 +1,7 @@
 /* global notTurbolinksPreview */
-
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ExportStockConsumptionModal from '../../vue/repository_row/export_stock_consumption_modal.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 window.initExportStockConsumptionModal = () => {
   if (window.exportStockConsumptionModalComponent) return;
@@ -10,8 +9,8 @@ window.initExportStockConsumptionModal = () => {
   if (notTurbolinksPreview()) {
     const app = createApp({});
     app.component('ExportStockConsumptionModal', ExportStockConsumptionModal);
-    app.use(TurbolinksAdapter);
     app.config.globalProperties.i18n = window.I18n;
     app.mount('#exportStockConsumtionModal');
+    handleTurbolinks(app);
   }
 };
diff --git a/app/javascript/packs/vue/helpers/turbolinks.js b/app/javascript/packs/vue/helpers/turbolinks.js
new file mode 100644
index 000000000..83a89cf4c
--- /dev/null
+++ b/app/javascript/packs/vue/helpers/turbolinks.js
@@ -0,0 +1,7 @@
+function handleTurbolinks(app) {
+  document.addEventListener('turbolinks:before-cache', () => {
+    app.unmount();
+  }, { once: true });
+}
+
+export { handleTurbolinks };
\ No newline at end of file
diff --git a/app/javascript/packs/vue/label_template.js b/app/javascript/packs/vue/label_template.js
index a0f77ba9e..c5923350e 100644
--- a/app/javascript/packs/vue/label_template.js
+++ b/app/javascript/packs/vue/label_template.js
@@ -1,6 +1,6 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import LabelTemplateContainer from '../../vue/label_template/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 window.initLabelTemplateComponent = () => {
   const app = createApp({
@@ -14,9 +14,9 @@ window.initLabelTemplateComponent = () => {
     }
   });
   app.component('LabelTemplateContainer', LabelTemplateContainer);
-  app.use(TurbolinksAdapter);
   app.config.globalProperties.i18n = window.I18n;
   app.mount('#labelTemplateContainer');
+  handleTurbolinks(app);
 };
 
 initLabelTemplateComponent();
diff --git a/app/javascript/packs/vue/legacy/datetime_picker.js b/app/javascript/packs/vue/legacy/datetime_picker.js
index 369a5a919..9729ffd4f 100644
--- a/app/javascript/packs/vue/legacy/datetime_picker.js
+++ b/app/javascript/packs/vue/legacy/datetime_picker.js
@@ -1,7 +1,6 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import DateTimePicker from '../../../vue/shared/date_time_picker.vue';
-
+import { handleTurbolinks } from '../helpers/turbolinks.js';
 /*
 <div  id="date-time-picker" class="vue-date-time-picker">
   <input ref="input" type="hidden" v-model="date" id="legacy-id" data-default="" />
@@ -66,11 +65,9 @@ window.initDateTimePickerComponent = (id) => {
     }
   });
   app.component('DateTimePicker', DateTimePicker);
-  app.use(TurbolinksAdapter);
   app.config.globalProperties.i18n = window.I18n;
   app.mount(id);
-
-
+  handleTurbolinks(app);
 };
 
 document.addEventListener('turbolinks:load', () => {
diff --git a/app/javascript/packs/vue/navigation/breadcrumbs.js b/app/javascript/packs/vue/navigation/breadcrumbs.js
index d484fc959..dc79e25b1 100644
--- a/app/javascript/packs/vue/navigation/breadcrumbs.js
+++ b/app/javascript/packs/vue/navigation/breadcrumbs.js
@@ -1,14 +1,15 @@
-import TurbolinksAdapter from 'vue-turbolinks';
+
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import Breadcrumbs from '../../../vue/navigation/breadcrumbs/breadcrumbs.vue';
+import { handleTurbolinks } from '../helpers/turbolinks.js';
 
 
 const app = createApp({});
 app.component('Breadcrumbs', Breadcrumbs);
 app.use(PerfectScrollbar);
-app.use(TurbolinksAdapter);
 app.config.globalProperties.i18n = window.I18n;
 app.mount('#breadcrumbs');
+handleTurbolinks(app);
 window.breadcrumbsComponent = app;
diff --git a/app/javascript/packs/vue/open_vector_editor.js b/app/javascript/packs/vue/open_vector_editor.js
index b8c73c01a..2057c0154 100644
--- a/app/javascript/packs/vue/open_vector_editor.js
+++ b/app/javascript/packs/vue/open_vector_editor.js
@@ -1,9 +1,9 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import OpenVectorEditor from '../../vue/ove/OpenVectorEditor.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 const app = createApp({});
 app.component('OpenVectorEditor', OpenVectorEditor);
-app.use(TurbolinksAdapter);
 app.config.globalProperties.i18n = window.I18n;
 app.mount('#open-vector-editor');
+handleTurbolinks(app);
diff --git a/app/javascript/packs/vue/protocol.js b/app/javascript/packs/vue/protocol.js
index 0cb26398a..c3cf7eb9c 100644
--- a/app/javascript/packs/vue/protocol.js
+++ b/app/javascript/packs/vue/protocol.js
@@ -1,10 +1,10 @@
 /* global HelperModule */
 
-import TurbolinksAdapter from 'vue-turbolinks';
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ProtocolContainer from '../../vue/protocol/container.vue';
 import outsideClick from './directives/outside_click';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 window.initProtocolComponent = () => {
   const app = createApp({
@@ -16,13 +16,13 @@ window.initProtocolComponent = () => {
   });
   app.component('ProtocolContainer', ProtocolContainer);
   app.use(PerfectScrollbar);
-  app.use(TurbolinksAdapter);
   app.directive('click-outside', outsideClick);
   app.config.globalProperties.i18n = window.I18n;
   app.config.globalProperties.inlineEditing = window.inlineEditing;
   app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
   app.config.globalProperties.dateFormat = $('#protocolContainer').data('date-format');
   app.mount('#protocolContainer');
+  handleTurbolinks(app);
 
   $('.protocols-show').on('click', '#protocol-versions-modal .delete-draft', (e) => {
     const url = e.currentTarget.dataset.url;
diff --git a/app/javascript/packs/vue/protocol_file_import_modal.js b/app/javascript/packs/vue/protocol_file_import_modal.js
index 71f85c01f..f0b3d8016 100644
--- a/app/javascript/packs/vue/protocol_file_import_modal.js
+++ b/app/javascript/packs/vue/protocol_file_import_modal.js
@@ -1,13 +1,13 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ProtocolFileImportModal from '../../vue/protocol_import/file_import_modal.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 window.initProtocolFileImportModalComponent = () => {
   const app = createApp({});
   app.component('ProtocolFileImportModal', ProtocolFileImportModal);
-  app.use(TurbolinksAdapter);
   app.config.globalProperties.i18n = window.I18n;
   app.mount('#protocolFileImportModal');
+  handleTurbolinks(app);
 };
 
 initProtocolFileImportModalComponent();
diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 82f16b3a3..74be66ca9 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -1,8 +1,8 @@
 /* global I18n */
 
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import FilterContainer from '../../vue/repository_filter/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 const DEFAULT_FILTERS = [
   {
@@ -148,10 +148,10 @@ window.initRepositoryFilter = () => {
     }
   });
   app.component('FilterContainer', FilterContainer);
-  app.use(TurbolinksAdapter);
   app.config.globalProperties.i18n = window.I18n;
   app.config.globalProperties.dateFormat = $('#filterContainer').data('date-format');
   app.mount('#filterContainer');
+  handleTurbolinks(app);
 
   $('#filterContainer').on('click', (e) => {
     $('#filterContainer .dropdown-selector-container').removeClass('open')
diff --git a/app/javascript/packs/vue/repository_item_sidebar.js b/app/javascript/packs/vue/repository_item_sidebar.js
index e60246652..7c134b677 100644
--- a/app/javascript/packs/vue/repository_item_sidebar.js
+++ b/app/javascript/packs/vue/repository_item_sidebar.js
@@ -1,16 +1,16 @@
 /* global notTurbolinksPreview */
 
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import RepositoryItemSidebar from '../../vue/repository_item_sidebar/RepositoryItemSidebar.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 
 function initRepositoryItemSidebar() {
   const app = createApp({});
   app.component('RepositoryItemSidebar', RepositoryItemSidebar);
-  app.use(TurbolinksAdapter);
   app.config.globalProperties.i18n = window.I18n;
   app.mount('#repositoryItemSidebar');
+  handleTurbolinks(app);
 }
 
 initRepositoryItemSidebar();
diff --git a/app/javascript/packs/vue/repository_print_modal.js b/app/javascript/packs/vue/repository_print_modal.js
index 79e44190c..935d1431b 100644
--- a/app/javascript/packs/vue/repository_print_modal.js
+++ b/app/javascript/packs/vue/repository_print_modal.js
@@ -1,6 +1,6 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import PrintModalContainer from '../../vue/repository_print_modal/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 function initPrintModalComponent() {
   const container = $('.print-label-modal-container');
@@ -29,9 +29,9 @@ function initPrintModalComponent() {
       }
     });
     app.component('PrintModalContainer', PrintModalContainer);
-    app.use(TurbolinksAdapter);
     app.config.globalProperties.i18n = window.I18n;
     app.mount('.print-label-modal-container');
+    handleTurbolinks(app);
     window.PrintModalComponent = app;
   }
 }
diff --git a/app/javascript/packs/vue/repository_search.js b/app/javascript/packs/vue/repository_search.js
index 65265d259..abf9791ef 100644
--- a/app/javascript/packs/vue/repository_search.js
+++ b/app/javascript/packs/vue/repository_search.js
@@ -1,15 +1,15 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import RepositorySearchContainer from '../../vue/repository_search/container.vue';
 import outsideClick from './directives/outside_click';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 window.initRepositorySearch = () => {
   const app = createApp({});
   app.component('RepositorySearchContainer', RepositorySearchContainer);
-  app.use(TurbolinksAdapter);
   app.directive('click-outside', outsideClick);
   app.config.globalProperties.i18n = window.I18n;
   app.mount('#inventorySearchComponent');
+  handleTurbolinks(app);
 
   window.RepositorySearchComponent = app;
 }
diff --git a/app/javascript/packs/vue/results.js b/app/javascript/packs/vue/results.js
index 033a9cc27..8e4f5757a 100644
--- a/app/javascript/packs/vue/results.js
+++ b/app/javascript/packs/vue/results.js
@@ -1,14 +1,14 @@
-import TurbolinksAdapter from 'vue-turbolinks';
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import Results from '../../vue/results/results.vue';
 import outsideClick from './directives/outside_click';
+import { handleTurbolinks } from './helpers/turbolinks.js';
 
 const app = createApp({});
 app.component('Results', Results);
-app.use(TurbolinksAdapter);
 app.use(PerfectScrollbar);
 app.directive('click-outside', outsideClick);
 app.config.globalProperties.i18n = window.I18n;
 app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
 app.mount('#results');
+handleTurbolinks(app);
diff --git a/app/javascript/vue/assign_items_to_tasks_modal/container.vue b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
index aed6d0568..f1ed120c8 100644
--- a/app/javascript/vue/assign_items_to_tasks_modal/container.vue
+++ b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
@@ -184,7 +184,7 @@ export default {
       this.$emit("close");
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     delete window.AssignItemsToTaskModalComponent;
   },
   computed: {
diff --git a/app/javascript/vue/components/action_toolbar.vue b/app/javascript/vue/components/action_toolbar.vue
index 6564ac3f2..aa514b51a 100644
--- a/app/javascript/vue/components/action_toolbar.vue
+++ b/app/javascript/vue/components/action_toolbar.vue
@@ -111,7 +111,7 @@
       this.$nextTick(this.setWidth);
       window.addEventListener('scroll', this.setLeftOffset);
     },
-    beforeDestroy() {
+    beforeUnmount() {
       delete window.actionToolbarComponent;
       window.removeEventListener('scroll', this.setLeftOffset);
     },
diff --git a/app/javascript/vue/mixins/moduleNameObserver.js b/app/javascript/vue/mixins/moduleNameObserver.js
index 66eb09545..afd67079d 100644
--- a/app/javascript/vue/mixins/moduleNameObserver.js
+++ b/app/javascript/vue/mixins/moduleNameObserver.js
@@ -14,7 +14,7 @@ export default {
   mounted() {
     this.observeChanges();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.observer) {
       this.observer.disconnect();
     }
diff --git a/app/javascript/vue/mixins/stackableHeadersMixin.js b/app/javascript/vue/mixins/stackableHeadersMixin.js
index 4477b2ce3..a56bc51ea 100644
--- a/app/javascript/vue/mixins/stackableHeadersMixin.js
+++ b/app/javascript/vue/mixins/stackableHeadersMixin.js
@@ -35,7 +35,7 @@ export default {
       this.handleTinyMCEOpened(e.detail.target);
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
diff --git a/app/javascript/vue/navigation/navigator.vue b/app/javascript/vue/navigation/navigator.vue
index e60ed72c0..0d312d319 100644
--- a/app/javascript/vue/navigation/navigator.vue
+++ b/app/javascript/vue/navigation/navigator.vue
@@ -1,14 +1,16 @@
 <template>
-  <vue-resizable
+  <Vue3DraggableResizable
+    :initW="getNavigatorWidth()"
     ref="vueResizable"
-    :max-width="400"
-    :min-width="208"
-    width="auto"
-    height="100%"
-    :active="['r']"
-    @resize:start="onResizeStart"
-    @resize:move="onResizeMove"
-    @resize:end="onResizeEnd"
+    :minW="208"
+    :disabledH="true"
+    :handles="['mr']"
+    :resizable="true"
+    :draggable="false"
+    class="max-w-[400px] !h-full"
+    @resize-start="onResizeStart"
+    @resizing="onResizeMove"
+    @resize-end="onResizeEnd"
   >
     <div class="ml-4 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
       <div class="px-3 py-2.5 flex items-center relative leading-4">
@@ -30,20 +32,20 @@
                       :archived="archived" />
       </perfect-scrollbar>
     </div>
-  </vue-resizable>
+  </Vue3DraggableResizable>
 </template>
 
 <script>
 
 import NavigatorItem from './navigator_item.vue'
-import VueResizable from 'vue-resizable'
 import axios from '../../packs/custom_axios.js';
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
 
 export default {
   name : 'NavigatorContainer',
   components: {
     NavigatorItem,
-    VueResizable
+    Vue3DraggableResizable
   },
   data() {
     return {
@@ -53,7 +55,7 @@ export default {
       navigatorYScroll: 0,
       navigatorXScroll: 0,
       currentItemId: null,
-      archived: null
+      archived: null,
     }
   },
   props: {
@@ -127,10 +129,11 @@ export default {
     },
     getNavigatorWidth() {
       const computedStyle = getComputedStyle(document.documentElement);
-      return computedStyle.getPropertyValue('--navigator-navigation-width').trim();
+      return parseInt(computedStyle.getPropertyValue('--navigator-navigation-width').trim());
     },
     onResizeMove(event) {
-      document.documentElement.style.setProperty('--navigator-navigation-width', event.width + 'px');
+      if (event.w > 400) event.w = 400;
+      document.documentElement.style.setProperty('--navigator-navigation-width', event.w + 'px');
     },
     onResizeStart() {
       document.body.style.cursor = 'url(/images/icon_small/Resize.svg) 0 0, auto';
@@ -138,10 +141,11 @@ export default {
       $('.sci--layout').addClass('!transition-none');
     },
     onResizeEnd(event) {
+      if (event.w > 400) event.w = 400;
       document.body.style.cursor = 'default';
       $('.sci--layout-navigation-navigator').removeClass('!transition-none');
       $('.sci--layout').removeClass('!transition-none');
-      this.changeNavigatorState(event.width)
+      this.changeNavigatorState(event.w)
     },
     async changeNavigatorState(newWidth) {
       try {
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index 448e44b0b..9d134732a 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -107,7 +107,7 @@
       // Track name update in user profile settings
       $(document).on('inlineEditing::updated', '.inline-editing-container[data-field-to-update="full_name"]', this.fetchData);
     },
-    beforeDestroy: function(){
+    beforeUnmount: function(){
       clearTimeout(this.unseenNotificationsTimeout);
     },
     computed: {
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index 7fe01de5c..ade63fb02 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -286,7 +286,7 @@
         })
       });
     },
-    beforeDestroy() {
+    beforeUnmount() {
       if (!this.inRepository) {
         window.removeEventListener('scroll', this.initStackableHeaders, false);
       }
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index d6511eb13..f74232b38 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -293,7 +293,7 @@ export default {
     document.addEventListener('click', this.handleOutsideClick);
     this.inRepository = $('.assign-items-to-task-modal-container').length > 0;
   },
-  beforeDestroy() {
+  beforeUnmount() {
     delete window.repositoryItemSidebarComponent;
     document.removeEventListener('click', this.handleDocumentClick);
   },
diff --git a/app/javascript/vue/repository_row/export_stock_consumption_modal.vue b/app/javascript/vue/repository_row/export_stock_consumption_modal.vue
index 0976f7f7e..ebfe611e7 100644
--- a/app/javascript/vue/repository_row/export_stock_consumption_modal.vue
+++ b/app/javascript/vue/repository_row/export_stock_consumption_modal.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="modal"
-       class="modal fade" 
+       class="modal fade"
        id="exportStockConsumptionModal"
        tabindex="-1"
        role="dialog"
@@ -22,7 +22,7 @@
           <button type='button' class='btn btn-secondary' data-dismiss='modal' id='close-modal-export-stock-consumption'>
             {{ i18n.t('general.cancel') }}
           </button>
-          
+
           <button class="btn btn-success" id="export-stock-consumption" @click="exportConsumption">
             {{ i18n.t('zip_export.consumption_generate') }}
           </button>
@@ -47,7 +47,7 @@
     created() {
       window.exportStockConsumptionModalComponent = this;
     },
-    beforeDestroy() {
+    beforeUnmount() {
       delete window.exportStockConsumptionModalComponent;
     },
     methods: {
diff --git a/app/javascript/vue/results/results.vue b/app/javascript/vue/results/results.vue
index 24a3cef4e..520356762 100644
--- a/app/javascript/vue/results/results.vue
+++ b/app/javascript/vue/results/results.vue
@@ -83,7 +83,7 @@
       this.loadResults();
       this.initStackableHeaders();
     },
-    beforeDestroy() {
+    beforeUnmount() {
       window.removeEventListener('scroll', this.loadResults, false);
       window.removeEventListener('scroll', this.initStackableHeaders, false);
     },
diff --git a/app/javascript/vue/shared/content/table.vue b/app/javascript/vue/shared/content/table.vue
index 358293a66..bb9d5dcd5 100644
--- a/app/javascript/vue/shared/content/table.vue
+++ b/app/javascript/vue/shared/content/table.vue
@@ -129,7 +129,7 @@
     created() {
       window.addEventListener('beforeunload', this.showSaveWarning);
     },
-    beforeDestroy() {
+    beforeUnmount() {
       window.removeEventListener('beforeunload', this.showSaveWarning);
     },
     updated() {
diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue
index 3a22e7035..12c1689e6 100644
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@@ -70,7 +70,7 @@
     mounted() {
       document.addEventListener('scroll', this.updateOptionPosition);
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('scroll', this.updateOptionPosition);
     },
     methods: {
diff --git a/package.json b/package.json
index 0409be7db..502d6564e 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,6 @@
     "twemoji": "^12.1.4",
     "vue": "^3.3.4",
     "vue-loader": "^16.0.0",
-    "vue-turbolinks": "^2.2.1",
     "vue3-draggable-resizable": "^1.6.5",
     "vue3-perfect-scrollbar": "^1.6.1",
     "vuedraggable": "^4.1.0",
diff --git a/yarn.lock b/yarn.lock
index b099333f8..f0a10cf95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7785,11 +7785,6 @@ vue-loader@^16.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
-vue-turbolinks@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/vue-turbolinks/-/vue-turbolinks-2.2.2.tgz#6b7b5c4120f5586907ef977be4b63a734bf8cd36"
-  integrity sha512-pPO2Fr+1UgdhUK9dc5OhjLSeYi5LZAm/VZBXOVQgLHCO31bRjAof/+W/e/6SHCbnb1xdZb1gW5T9MX0k9ejSAQ==
-
 vue3-draggable-resizable@^1.6.5:
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz#021b2c00bff2885ab4fa5981e03bf4f56f12cdac"