feat: make left-side navigation bar sticky (#439) (#441)

bihealth · Feb 6, 2024 · f25548e · f25548e
1 parent 715f05c
commit f25548e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/frontend/src/views/GeneDetailView/GeneDetailView.vue b/frontend/src/views/GeneDetailView/GeneDetailView.vue
@@ -147,7 +147,10 @@ const SECTIONS: Section[] = [
       <v-container fluid>
         <v-row>
           <v-col cols="2">
-            <div v-if="geneInfoStore.storeState == StoreState.Active">
+            <div
+              v-if="geneInfoStore.storeState == StoreState.Active"
+              style="position: sticky; top: 20px"
+            >
               <v-list v-model:opened="openedSection" rounded="lg">
                 <BookmarkListItem :id="geneInfoStore.hgncId ?? ''" :type="'gene'" />
 

diff --git a/frontend/src/views/SeqvarDetailsView/SeqvarDetailsView.vue b/frontend/src/views/SeqvarDetailsView/SeqvarDetailsView.vue
@@ -276,7 +276,10 @@ const SECTIONS: { [key: string]: Section[] } = {
       <v-container fluid>
         <v-row>
           <v-col cols="2">
-            <div v-if="seqvarInfoStore.storeState == StoreState.Active">
+            <div
+              v-if="seqvarInfoStore.storeState == StoreState.Active"
+              style="position: sticky; top: 20px"
+            >
               <v-list v-model:opened="openedSection" density="compact" rounded="lg">
                 <BookmarkListItem :id="idForBookmark" type="seqvar" />
 

diff --git a/frontend/src/views/StrucvarDetailsView/StrucvarDetailsView.vue b/frontend/src/views/StrucvarDetailsView/StrucvarDetailsView.vue
@@ -296,7 +296,10 @@ const SECTIONS: { [key: string]: Section[] } = {
       <v-container fluid>
         <v-row>
           <v-col cols="2">
-            <div v-if="strucvarInfoStore.storeState == StoreState.Active">
+            <div
+              v-if="strucvarInfoStore.storeState == StoreState.Active"
+              style="position: sticky; top: 20px"
+            >
               <v-list v-model:opened="openedSection" density="compact" rounded="lg">
                 <BookmarkListItem :id="idForBookmark" type="strucvar" />