web/satellite: make all header components visible on smaller screen sizes

Change-Id: If84ad344a40bb666250106d2f2b9ffaa01413296

web/satellite/src/components/header/HeaderArea.vue

@@ -19,10 +19,12 @@
                     @click.stop="onLogoClick"
                 />
             </div>
+            <div class="header-container__left-area__selection-wrapper">
                 <ProjectSelection class="project-selection" />
                 <ResourcesSelection class="resources-selection" />
                 <SettingsSelection class="settings-selection" />
             </div>
+        </div>
         <div class="header-container__right-area">
             <VInfo
                 v-if="!isOnboardingTour"
@@ -170,6 +172,10 @@ export default class HeaderArea extends Vue {
                     }
                 }
             }
+
+            &__selection-wrapper {
+                display: flex;
+            }
         }
 
         &__right-area {
@@ -240,7 +246,7 @@ export default class HeaderArea extends Vue {
         position: absolute;
         top: 62px;
         left: 220px;
-        z-index: 100;
+        z-index: 99;
         background: rgba(134, 134, 148, 0.4);
     }
 
@@ -291,4 +297,36 @@ export default class HeaderArea extends Vue {
             margin-left: 0;
         }
     }
+
+    @media screen and (max-width: 1024px) {
+
+        .header-container {
+
+            &__left-area {
+
+                &__logo-area {
+                    width: 100px;
+                }
+            }
+        }
+
+        .project-selection,
+        .resources-selection {
+            margin-right: 15px;
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+
+        .header-container {
+
+            &__left-area {
+
+                &__selection-wrapper {
+                    display: none;
+                }
+            }
+        }
+    }
+
 </style>

web/satellite/src/components/header/projectsDropdown/ProjectSelection.vue

@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="project-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
+    <div class="project-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown, navigation: inNavigation }">
         <div
             class="project-selection__toggle-container"
             @click.stop="toggleSelection"
         >
-            <p class="project-selection__toggle-container__name" :class="{ white: isDropdownShown }">Projects</p>
+            <p class="project-selection__toggle-container__name" :class="{ 'white': isDropdownShown, 'name-navigation': inNavigation }">Projects</p>
             <ExpandIcon
                 class="project-selection__toggle-container__expand-icon"
                 :class="{ expanded: isDropdownShown }"
@@ -17,6 +17,7 @@
                 v-show="isDropdownShown"
                 v-click-outside="closeDropdown"
                 :is-loading="isLoading"
+                in-navigation="true"
                 @close="closeDropdown"
             />
         </div>
@@ -24,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -42,6 +43,10 @@ import ProjectDropdown from './ProjectDropdown.vue';
     },
 })
 export default class ProjectSelection extends Vue {
+
+    @Prop({default: false})
+    protected readonly inNavigation: boolean;
+
     private isLoading = false;
 
     /**
@@ -132,6 +137,11 @@ export default class ProjectSelection extends Vue {
                 margin: 0;
             }
 
+            &__name.name-navigation {
+                color: #1b2533;
+                white-space: nowrap;
+            }
+
             &__expand-icon {
                 margin-left: 15px;
             }
@@ -165,4 +175,31 @@ export default class ProjectSelection extends Vue {
         font-family: 'font_bold', sans-serif;
         color: #fff !important;
     }
+
+    .navigation {
+        background: none;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding: 10px;
+        width: calc(100% - 20px);
+        margin-bottom: 15px;
+        text-decoration: none;
+
+        &:hover {
+            background-color: #0068dc;
+
+            .project-selection__toggle-container__name {
+                color: #fff;
+            }
+
+            .black-arrow-expand-path {
+                fill: #fff;
+            }
+        }
+    }
+
+    .navigation.active {
+        background: #0068dc !important;
+    }
 </style>

web/satellite/src/components/header/resourcesDropdown/ResourcesSelection.vue

@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="resources-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
+    <div class="resources-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown, navigation: inNavigation }">
         <div
             class="resources-selection__toggle-container"
             @click.stop="toggleDropdown"
         >
-            <p class="resources-selection__toggle-container__name" :class="{ white: isDropdownShown }">Resources</p>
+            <p class="resources-selection__toggle-container__name" :class="{ 'white': isDropdownShown, 'name-navigation': inNavigation }">Resources</p>
             <ExpandIcon
                 class="resources-selection__toggle-container__expand-icon"
                 :class="{ expanded: isDropdownShown }"
@@ -16,6 +16,7 @@
             <ResourcesDropdown
                 v-show="isDropdownShown"
                 v-click-outside="closeDropdown"
+                in-navigation="true"
                 @close="closeDropdown"
             />
         </div>
@@ -23,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -40,6 +41,10 @@ import ResourcesDropdown from './ResourcesDropdown.vue';
     },
 })
 export default class ResourcesSelection extends Vue {
+
+    @Prop({default: false})
+    protected readonly inNavigation: boolean;
+
     /**
      * Indicates if current route is onboarding tour.
      */
@@ -107,6 +112,11 @@ export default class ResourcesSelection extends Vue {
                 margin: 0;
             }
 
+            &__name.name-navigation {
+                color: #1b2533;
+                white-space: nowrap;
+            }
+
             &__expand-icon {
                 margin-left: 15px;
             }
@@ -140,4 +150,35 @@ export default class ResourcesSelection extends Vue {
         font-family: 'font_bold', sans-serif;
         color: #fff !important;
     }
+
+    .navigation {
+        background: none;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding: 10px;
+        width: calc(100% - 20px);
+        margin-bottom: 15px;
+        text-decoration: none;
+
+        &:hover {
+            background-color: #0068dc;
+
+            .resources-selection__toggle-container__name {
+                color: #fff;
+            }
+
+            .black-arrow-expand-path {
+                fill: #fff;
+            }
+        }
+
+        .active {
+            background: #0068dc !important;
+        }
+    }
+
+    .navigation.active {
+        background: #0068dc !important;
+    }
 </style>

web/satellite/src/components/header/settingsDropdown/SettingsSelection.vue

@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="settings-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown }">
+    <div class="settings-selection" :class="{ disabled: isOnboardingTour, active: isDropdownShown, navigation: inNavigation }">
         <div
             class="settings-selection__toggle-container"
             @click.stop="toggleDropdown"
         >
-            <p class="settings-selection__toggle-container__name" :class="{ white: isDropdownShown }">Settings</p>
+            <p class="settings-selection__toggle-container__name" :class="{ 'white': isDropdownShown, 'name-navigation': inNavigation }">Settings</p>
             <ExpandIcon
                 class="settings-selection__toggle-container__expand-icon"
                 :class="{ expanded: isDropdownShown }"
@@ -16,6 +16,7 @@
             <SettingsDropdown
                 v-show="isDropdownShown"
                 v-click-outside="closeDropdown"
+                in-navigation="true"
                 @close="closeDropdown"
             />
         </div>
@@ -23,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
 
@@ -40,6 +41,10 @@ import SettingsDropdown from './SettingsDropdown.vue';
     },
 })
 export default class SettingsSelection extends Vue {
+
+    @Prop({default: false})
+    protected readonly inNavigation: boolean;
+
     /**
      * Indicates if current route is onboarding tour.
      */
@@ -106,6 +111,11 @@ export default class SettingsSelection extends Vue {
                 margin: 0;
             }
 
+            &__name.name-navigation {
+                color: #1b2533;
+                white-space: nowrap;
+            }
+
             &__expand-icon {
                 margin-left: 15px;
             }
@@ -139,4 +149,34 @@ export default class SettingsSelection extends Vue {
         font-family: 'font_bold', sans-serif;
         color: #fff !important;
     }
+
+    .navigation {
+        background: none;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding: 10px;
+        width: calc(100% - 20px);
+        text-decoration: none;
+
+        &:hover {
+            background-color: #0068dc;
+
+            .settings-selection__toggle-container__name {
+                color: #fff;
+            }
+
+            .black-arrow-expand-path {
+                fill: #fff;
+            }
+        }
+
+        .active {
+            background: #0068dc !important;
+        }
+    }
+
+    .navigation.active {
+        background: #0068dc !important;
+    }
 </style>

web/satellite/src/components/navigation/NavigationArea.vue

@@ -16,6 +16,11 @@
                 <p class="navigation-area__item-container__link__title">{{ navItem.name }}</p>
             </div>
         </router-link>
+        <div class="navigation-area__selection-wrapper">
+            <ProjectSelection in-navigation="true" class="project-selection" />
+            <ResourcesSelection in-navigation="true" class="resources-selection" />
+            <SettingsSelection in-navigation="true" class="settings-selection" />
+        </div>
     </div>
 </template>
 
@@ -27,6 +32,9 @@ import EditProjectDropdown from '@/components/navigation/EditProjectDropdown.vue
 import AccessGrantsIcon from '@/../static/images/navigation/apiKeys.svg';
 import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
 import ObjectsIcon from '@/../static/images/navigation/objects.svg';
+import ProjectSelection from '@/components/header/projectsDropdown/ProjectSelection.vue';
+import ResourcesSelection from '@/components/header/resourcesDropdown/ResourcesSelection.vue';
+import SettingsSelection from '@/components/header/settingsDropdown/SettingsSelection.vue';
 import TeamIcon from '@/../static/images/navigation/team.svg';
 
 import { RouteConfig } from '@/router';
@@ -41,6 +49,9 @@ import { MetaUtils } from '@/utils/meta';
         TeamIcon,
         EditProjectDropdown,
         ObjectsIcon,
+        ProjectSelection,
+        ResourcesSelection,
+        SettingsSelection
     },
 })
 export default class NavigationArea extends Vue {
@@ -154,5 +165,35 @@ export default class NavigationArea extends Vue {
                 }
             }
         }
+
+        &__selection-wrapper {
+            display: none;
+
+            .project-selection {
+
+                &__toggle-container {
+                    background: none;
+
+                    &__name {
+                        font-family: 'font_medium', sans-serif;
+                        font-size: 16px;
+                        line-height: 23px;
+                        color: #1b2533;
+                        margin: 0 0 0 18px;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+
+        @media screen and (max-width: 768px) {
+
+            .navigation-area {
+
+                &__selection-wrapper {
+                    display: block;
+                }
+            }
+        }
     }
 </style>