From 5bbb69886ad497f5eb5471ba689229b97ea6359c Mon Sep 17 00:00:00 2001
From: Vitalii Shpital <takur12345@gmail.com>
Date: Tue, 26 Oct 2021 14:03:57 +0300
Subject: [PATCH] web/satellite: improved responsiveness of new nav sidebar

Since we don't have main content responsiveness I decided to make sidebar shrink earlier (1280px).
Added event listener for dropdowns to close if navigation sidebar is being scrolled vertically.

Change-Id: I15ac2ae652aedfc06fd331585bb64b69076c0eed
---
 .../newNavigationStructure/AccountArea.vue    |  2 +-
 .../NewNavigationArea.vue                     | 21 +++++++++++++++++--
 .../NewProjectSelection.vue                   |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue b/web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
index e6ea4a473..834b5a3fb 100644
--- a/web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
+++ b/web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
@@ -287,7 +287,7 @@ export default class AccountArea extends Vue {
         background-color: #f7f8fb;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 1280px) {
 
         .account-area__info {
             display: none;
diff --git a/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue b/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
index 9a8998e19..8645e46e8 100644
--- a/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
+++ b/web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
@@ -3,7 +3,7 @@
 
 <template>
     <div v-if="!isNavigationHidden" class="navigation-area">
-        <div class="navigation-area__container">
+        <div ref="navigationContainer" class="navigation-area__container">
             <div class="navigation-area__container__wrap">
                 <LogoIcon class="navigation-area__container__wrap__logo" @click.stop="onLogoClick" />
                 <SmallLogoIcon class="navigation-area__container__wrap__small-logo" @click.stop="onLogoClick" />
@@ -209,8 +209,25 @@ export default class NewNavigationArea extends Vue {
     public $refs!: {
         resourcesContainer: HTMLDivElement;
         quickStartContainer: HTMLDivElement;
+        navigationContainer: HTMLDivElement;
     };
 
+    /**
+     * Mounted hook after initial render.
+     * Adds scroll event listener to close dropdowns.
+     */
+    public mounted(): void {
+        this.$refs.navigationContainer.addEventListener('scroll', this.closeDropdowns)
+    }
+
+    /**
+     * Mounted hook before component destroy.
+     * Removes scroll event listener.
+     */
+    public beforeDestroy(): void {
+        this.$refs.navigationContainer.removeEventListener('scroll', this.closeDropdowns)
+    }
+
     /**
      * Reloads page.
      */
@@ -454,7 +471,7 @@ export default class NewNavigationArea extends Vue {
         opacity: 0.1;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 1280px) {
 
         .navigation-area {
             min-width: unset;
diff --git a/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue b/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
index c933333c5..060f72f53 100644
--- a/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
+++ b/web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
@@ -356,7 +356,7 @@ export default class NewProjectSelection extends Vue {
         background-color: #fafafb;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 1280px) {
 
         .project-selection__selected {