From 03d4ce7ab48eecb3cadee8675c617b02443f17ec Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Thu, 19 Dec 2019 11:44:55 +0530
Subject: [PATCH] improve header responsiveness with styleguide overrides

---
 webapp/layouts/default.vue | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 94a9c0912..b07347d2b 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,21 +4,21 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
           <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ lg: '3.5%' }" />
-            <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
+            <ds-flex-item :width="{ base: '142px' }">
               <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
                 <ds-logo />
               </nuxt-link>
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '20%', sm: '20%', md: '20%', lg: '0%' }"
+              :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
               class="mobile-hamburger-menu"
             >
-              <ds-button icon="bars" @click="toggleMobileMenuView" right />
+              <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '85%', sm: '85%', md: '50%', lg: '50%' }"
+              :width="{ base: '45%', sm: '45%', md: '45%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-shrink: 0; flex-grow: 1;"
             >
               <div id="nav-search-box" v-if="isLoggedIn">
                 <search-input
@@ -34,8 +34,8 @@
             </ds-flex-item>
             <ds-flex-item
               v-if="isLoggedIn"
-              :width="{ base: '15%', sm: '15%', md: '10%', lg: '10%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto;"
             >
               <client-only>
                 <filter-posts
@@ -46,10 +46,8 @@
                 />
               </client-only>
             </ds-flex-item>
-            <ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" />
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
-              style="background-color:white"
+              style="background-color: white; flex-basis: auto;"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <div
@@ -58,6 +56,7 @@
                   'desktop-view': !toggleMobileMenu,
                   'hide-mobile-menu': !toggleMobileMenu,
                 }"
+                style="flex-basis: auto;"
               >
                 <client-only>
                   <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
@@ -186,17 +185,21 @@ export default {
 }
 .main-navigation-right {
   display: flex;
-  flex: 1;
+  justify-content: flex-end;
 }
 .main-navigation-right .desktop-view {
   float: right;
 }
-@media only screen and (min-width: 960px) {
+.ds-flex-item.mobile-hamburger-menu {
+  margin-left: auto;
+  text-align: right;
+}
+@media only screen and (min-width: 730px) {
   .mobile-hamburger-menu {
     display: none;
   }
 }
-@media only screen and (max-width: 960px) {
+@media only screen and (max-width: 730px) {
   #nav-search-box,
   .main-navigation-right {
     margin: 10px 0px;