main menu changed to flex menu and responsively adapted, search edited

webapp/layouts/default.vue

@@ -2,87 +2,97 @@
   <div class="layout-default">
     <div class="main-navigation">
       <ds-container class="main-navigation-container">
-        <div class="main-navigation-left">
+        <div>
-          <a v-router-link style="display: inline-flex" href="/">
+          <ds-flex>
-            <ds-logo />
+            <ds-flex-item :width="{ base: '50px', md: '150px' }">
-          </a>
+              <a v-router-link style="display: inline-flex" href="/">
-        </div>
+                <ds-logo />
-        <div class="main-navigation-center hc-navbar-search">
+              </a>
-          <search-input
+            </ds-flex-item>
-            id="nav-search"
+            <ds-flex-item>
-            :delay="300"
+              <div id="nav-search-box" v-on:click="unfolded" v-click-outside="foldedup">
-            :pending="quickSearchPending"
+                <search-input
-            :results="quickSearchResults"
+                  id="nav-search"
-            @clear="quickSearchClear"
+                  :delay="300"
-            @search="value => quickSearch({ value })"
+                  :pending="quickSearchPending"
-            @select="goToPost"
+                  :results="quickSearchResults"
-          />
+                  @clear="quickSearchClear"
-        </div>
+                  @search="value => quickSearch({ value })"
-        <div class="main-navigation-right">
+                  @select="goToPost"
-          <no-ssr>
+                />
-            <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
+              </div>
-          </no-ssr>
+            </ds-flex-item>
-          <template v-if="isLoggedIn">
+            <ds-flex-item width="200px">
-            <no-ssr>
+              <div class="main-navigation-right" style="float:right">
-              <notification-menu />
+                <no-ssr>
-            </no-ssr>
+                  <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
-            <no-ssr>
+                </no-ssr>
-              <dropdown class="avatar-menu">
+                <template v-if="isLoggedIn">
-                <template slot="default" slot-scope="{ toggleMenu }">
+                  <no-ssr>
-                  <a
+                    <notification-menu />
-                    class="avatar-menu-trigger"
+                  </no-ssr>
-                    :href="
+                  <no-ssr>
-                      $router.resolve({
+                    <dropdown class="avatar-menu">
-                        name: 'profile-id-slug',
+                      <template slot="default" slot-scope="{ toggleMenu }">
-                        params: { id: user.id, slug: user.slug },
+                        <a
-                      }).href
+                          class="avatar-menu-trigger"
-                    "
+                          :href="
-                    @click.prevent="toggleMenu"
+                            $router.resolve({
-                  >
+                              name: 'profile-id-slug',
-                    <hc-avatar :user="user" />
+                              params: { id: user.id, slug: user.slug },
-                    <ds-icon size="xx-small" name="angle-down" />
+                            }).href
-                  </a>
+                          "
+                          @click.prevent="toggleMenu"
+                        >
+                          <hc-avatar :user="user" />
+                          <ds-icon size="xx-small" name="angle-down" />
+                        </a>
+                      </template>
+                      <template slot="popover" slot-scope="{ closeMenu }">
+                        <div class="avatar-menu-popover">
+                          {{ $t('login.hello') }}
+                          <b>{{ userName }}</b>
+                          <template v-if="user.role !== 'user'">
+                            <ds-text color="softer" size="small" style="margin-bottom: 0">
+                              {{ user.role | camelCase }}
+                            </ds-text>
+                          </template>
+                          <hr />
+                          <ds-menu :routes="routes" :matcher="matcher">
+                            <ds-menu-item
+                              slot="menuitem"
+                              slot-scope="item"
+                              :route="item.route"
+                              :parents="item.parents"
+                              @click.native="closeMenu(false)"
+                            >
+                              <ds-icon :name="item.route.icon" />
+                              {{ item.route.name }}
+                            </ds-menu-item>
+                          </ds-menu>
+                          <hr />
+                          <nuxt-link class="logout-link" :to="{ name: 'logout' }">
+                            <ds-icon name="sign-out" />
+                            {{ $t('login.logout') }}
+                          </nuxt-link>
+                        </div>
+                      </template>
+                    </dropdown>
+                  </no-ssr>
                 </template>
-                <template slot="popover" slot-scope="{ closeMenu }">
+              </div>
-                  <div class="avatar-menu-popover">
+            </ds-flex-item>
-                    {{ $t('login.hello') }}
+          </ds-flex>
-                    <b>{{ userName }}</b>
-                    <template v-if="user.role !== 'user'">
-                      <ds-text color="softer" size="small" style="margin-bottom: 0">
-                        {{ user.role | camelCase }}
-                      </ds-text>
-                    </template>
-                    <hr />
-                    <ds-menu :routes="routes" :matcher="matcher">
-                      <ds-menu-item
-                        slot="menuitem"
-                        slot-scope="item"
-                        :route="item.route"
-                        :parents="item.parents"
-                        @click.native="closeMenu(false)"
-                      >
-                        <ds-icon :name="item.route.icon" />
-                        {{ item.route.name }}
-                      </ds-menu-item>
-                    </ds-menu>
-                    <hr />
-                    <nuxt-link class="logout-link" :to="{ name: 'logout' }">
-                      <ds-icon name="sign-out" />
-                      {{ $t('login.logout') }}
-                    </nuxt-link>
-                  </div>
-                </template>
-              </dropdown>
-            </no-ssr>
-          </template>
         </div>
       </ds-container>
     </div>
+
     <ds-container>
       <div style="padding: 6rem 2rem 5rem;">
         <nuxt />
       </div>
     </ds-container>
+
     <div id="overlay" />
     <no-ssr>
       <modal />
@@ -181,9 +191,62 @@ export default {
       }
       return this.$route.path.indexOf(url) === 0
     },
+    unfolded: function() {
+      document.getElementById('nav-search-box').classList.add('unfolded')
+    },
+    foldedup: function() {
+      document.getElementById('nav-search-box').classList.remove('unfolded')
+    },
+  },
+  directives: {
+    'click-outside': {
+      bind: function(el, binding, vNode) {
+        // Provided expression must evaluate to a function.
+        if (typeof binding.value !== 'function') {
+          const compName = vNode.context.name
+          let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
+          if (compName) {
+            warn += `Found in component '${compName}'`
+          }
+
+          console.warn(warn)
+        }
+        // Define Handler and cache it on the element
+        const bubble = binding.modifiers.bubble
+        const handler = e => {
+          if (bubble || (!el.contains(e.target) && el !== e.target)) {
+            binding.value(e)
+          }
+        }
+        el.__vueClickOutside__ = handler
+
+        // add Event Listeners
+        document.addEventListener('click', handler)
+      },
+
+      unbind: function(el, binding) {
+        // Remove Event Listeners
+        document.removeEventListener('click', el.__vueClickOutside__)
+        el.__vueClickOutside__ = null
+      },
+    },
   },
 }
 </script>
+<style>
+.foldedup {
+  position: '';
+  right: ;
+  left: ;
+  z-index: 1;
+}
+.unfolded {
+  position: absolute;
+  right: 0px;
+  left: 0px;
+  z-index: 1;
+}
+</style>
 
 <style lang="scss">
 .topbar-locale-switch {
@@ -199,28 +262,6 @@ export default {
   }
 }
 
-.main-navigation-container {
-  padding: $space-x-small $space-large !important;
-  width: 100%;
-  align-items: center;
-  display: flex;
-}
-
-.main-navigation-left {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  align-items: center;
-}
-
-.main-navigation-center {
-  display: flex;
-  flex: auto;
-  width: 100%;
-  padding-right: $space-large;
-  padding-left: $space-large;
-}
-
 .main-navigation-right {
   display: flex;
   flex: 1;