Merge pull request #30 from multi-coop/new-navbar

New navbar

components/navbar/NavbarItem.vue

@@ -0,0 +1,196 @@
+<template>
+
+  <div>
+
+    <div
+      v-if="!item.disabled"> 
+
+      <!-- ITEMS - INTERNAL LINK -->
+      <b-navbar-item 
+        v-if="item.component === 'simpleLink'"
+        :to="{ path: item.link }"
+        tag="router-link"
+        class="is-size-7-touch navbar-multi"
+        >
+        <b-tooltip
+          v-if="item.icon || item.image"
+          :label="$translate('label', item)"
+          position="is-left"
+          type="is-dark">
+          <b-icon
+            v-if="item.icon && !item.image"
+            :icon="item.icon"
+            class="mr-1"
+            size="is-small"
+            />
+          <img
+            v-if="item.image"
+            class="navbar-multi-img"
+            :src="item.image"
+            />
+        </b-tooltip>
+        <span
+          v-if="!item.image"
+          :class="isCurrentRoute(item) ? 'has-text-weight-bold' : ''">
+          {{ $translate('label', item) }}
+        </span>
+      </b-navbar-item>
+
+
+      <!-- ITEMS - EXTERNAL LINK -->
+      <b-navbar-item 
+        v-if="item.component === 'extLink'"
+        :href="item.link"
+        target="_blank"
+        tag="a"
+        class="is-size-7-touch navbar-multi"
+        >
+        <b-tooltip
+          v-if="item.icon || item.image"
+          :label="$translate('label', item)"
+          position="is-left"
+          type="is-dark">
+          <b-icon
+            v-if="item.icon && !item.image"
+            :icon="item.icon"
+            />
+          <img
+            v-if="item.image"
+            class="navbar-multi-img"
+            :src="item.image"
+            />
+        </b-tooltip>
+        <span v-else>
+          {{ $translate('label', item) }}
+        </span>
+      </b-navbar-item>
+
+      <!-- DROPDOWNS -->
+      <b-navbar-dropdown 
+        v-if="item.component === 'dropdownLink'"
+        :arrowless="item.options.includes('arrowless')"
+        :hoverable="item.options.includes('hoverable')"
+        :right="isRight"
+        class="is-size-7-touch navbar-multi"
+        >
+        <template #label>
+          <div>
+            <b-icon
+              v-if="item.icon && !item.image"
+              :icon="item.icon"
+              class="mr-1"
+              size="is-small"
+              />
+            <img
+              v-if="item.image"
+              class="navbar-multi-img"
+              :src="item.image"
+              />
+            <span
+              v-if="!item.image"
+              :class="isCurrentRoute(item) ? 'has-text-weight-bold' : ''">
+              {{ $translate('label', item) }}
+            </span>
+          </div>
+        </template>
+
+        <b-navbar-item
+          v-for="(subItem, idx) in item.submenu"
+          :key="`${idx}-${subItem.name}`"
+          :to="!subItem.separator && { path: subItem.link }"
+          :separator="subItem.separator"
+          :tag="subItem.separator ? 'hr' : 'router-link'"
+          :class="`${subItem.separator ? 'navbar-divider py-0' : 'is-size-7-touch'} ${isCurrentRoute(subItem) ? 'has-text-weight-bold' : ''}`"
+          :active="!subItem.separator && subItem.link === $route.path"
+          >
+          <span
+            v-if="!subItem.separator"
+            :class="`${ subItem.link === $route.path ? 'has-text-weight-bold' : '' }`">
+            {{ $translate('label', subItem) }}
+          </span>
+        </b-navbar-item>
+
+      </b-navbar-dropdown>
+
+
+      <!-- LOCALES -->
+      <b-navbar-dropdown 
+        v-if="item.component === 'switchLocaleDropdown'"
+        arrowless
+        hoverable
+        right
+        class="mr-4 is-size-7-touch"
+        >
+        <template #label>
+          <span class="is-uppercase">
+            {{ locale }}
+          </span>
+        </template>
+
+        <b-navbar-item 
+          v-for="loc in locales"
+          :key="loc"
+          :value="loc === locale"
+          aria-role="listitem"
+          :class="`is-size-7-touch ${loc === locale ? 'has-text-weight-bold' : ''}`"
+          @click="changeLocale(loc)"
+          >
+          {{ localesDict[loc] }}
+        </b-navbar-item>
+
+      </b-navbar-dropdown>
+
+    </div>
+
+  </div>
+
+</template>
+
+
+<script>
+import { mapState, mapActions } from 'vuex' 
+
+export default {
+  name: 'NavbarItem',
+  props: [
+    'item',
+    'isRight',
+    'isMobile'
+  ],
+  computed: {
+    ...mapState({
+      log: (state) => state.log,
+      locale: (state) => state.locale,
+      locales: (state) => state.locales,
+      localesDict: (state) => state.localesDict,
+      navbar: (state) =>  state.navbar,
+    }),
+  },
+  methods: {
+    ...mapActions({
+      updateLocale: 'updateLocale',
+    }),
+    changeLocale(loc) {
+      // console.log('\n-C- NavbarItem > changeLocale > loc :', loc)
+      // console.log('-C- NavbarItem > changeLocale > this.$route :', this.$route)
+      this.updateLocale(loc)
+    },
+    isCurrentRoute (item) {
+      const currentPath = this.$route.path
+      const isPathLink = currentPath === item.link
+      const subLinks = item.submenu && item.submenu.map(sl => sl.link)
+      const isPathSubLink = subLinks && subLinks.includes(currentPath)
+      return isPathLink || isPathSubLink
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.navbar-multi-img {
+  /* padding-top: .1em !important; */
+  max-height: 1.4em !important;
+}
+
+</style>

components/navbar/NavbarItemMobile.vue

@@ -0,0 +1,202 @@
+<template>
+
+  <b-menu-item
+    v-if="!item.disabled"
+    class="navbar-mobile-item"
+    :active="isExpanded"
+    :expanded="isExpanded"
+    :tag="itemTag"
+    :to="isSimpleLink && { path: item.link, query: { locale: locale } }"
+    :href="isExtLink && item.link"
+    :target="isExtLink && '_blank'"
+    @click.native="clickMenu(item)"
+    >
+
+    <template #label>
+      <!-- DEBUGGING -->
+      <!-- <div>
+        activeItem: <code>{{ activeItem }}</code>
+      </div> -->
+      <b-icon
+        v-if="item.icon && !item.image"
+        class="mr-2"
+        size="is-small"
+        :icon="item.icon"
+        />
+      <img
+        v-if="item.image"
+        class="navbar-multi-img mr-2"
+        :src="item.image"
+        />
+      <span
+        v-if="!isLocaleSwitch"
+        :class="isCurrentRoute(item) ? 'has-text-weight-bold' : ''">
+        {{ $translate('label', item) }}
+      </span>
+      <span v-else>
+        <b-icon
+          class="mr-2"
+          size="is-small"
+          icon="translate"
+          />
+        {{ localesDict[locale] }}
+      </span>
+    </template>
+
+    <!-- DROPDOWNS -->
+    <template
+      v-if="item.component === 'dropdownLink'">
+      <li
+        v-for="(sub, idx) in submenuItems"
+        :key="`sub-${idx}-${sub.name}`"
+        class="navbar-mobile-item"
+        >
+        <b-button
+          :class="`has-text-left my-0 py-0 px-1 submenu ${isCurrentRoute(sub) ? 'has-text-weight-bold' : ''}`"
+          type="is-text"
+          :tag="sub.component === 'simpleLink' ? 'router-link' : 'a'"
+          :to="sub.component === 'simpleLink' && { path: sub.link, query: { locale: locale } }"
+          :href="sub.component === 'extLink' && sub.link"
+          :target="sub.component === 'extLink' && '_blank'"
+          @click.native="clickMenu(sub)"
+          @mouseover="hover = `sub-${idx}-${sub.name}`"
+          @mouseleave="hover = undefined"
+          >
+          {{ $translate('label', sub) }}
+        </b-button>
+      </li>
+    </template>
+
+    <!-- LOCALES -->
+    <template
+      v-if="item.component === 'switchLocaleDropdown'">
+      <li
+        v-for="loc in locales"
+        :key="loc"
+        class="navbar-mobile-item">
+        <b-button
+          :class="`has-text-left my-0 py-0 px-1 submenu ${loc === locale ? 'has-text-weight-bold' : ''}`"
+          type="is-text"
+          tag="a"
+          @click="changeLocale(loc)"
+          @mouseover="hover = loc"
+          @mouseleave="hover = undefined"
+          >
+          <span class="is-uppercase">
+            {{ loc }}
+          </span>
+          -
+          {{ localesDict[loc] }}
+        </b-button>
+      </li>
+    </template>
+
+  </b-menu-item>
+
+</template>
+
+
+<script>
+import { mapState, mapActions } from 'vuex' 
+
+export default {
+  name: 'NavbarItemMobile',
+  props: [
+    'item',
+    'itemId',
+    'activeItem'
+  ],
+  data () {
+    return {
+      hover: undefined
+    }
+  },
+  computed: {
+    ...mapState({
+      log: (state) => state.log,
+      locale: (state) => state.locale,
+      locales: (state) => state.locales,
+      localesDict: (state) => state.localesDict,
+      navbar: (state) =>  state.navbar,
+    }),
+    isSimpleLink () {
+      return this.item.component === 'simpleLink'
+    },
+    isExtLink () {
+      return this.item.component === 'extLink'
+    },
+    isDropdown () {
+      return this.item.component === 'dropdownLink'
+    },
+    isLocaleSwitch () {
+      return this.item.component === 'switchLocaleDropdown'
+    },
+    itemTag () {
+      let tag
+      switch (this.item.component) {
+        case 'simpleLink':
+          tag = 'router-link'
+          break
+        case 'extLink':
+          tag = 'a'
+          break
+        default:
+          break
+      }
+      return tag
+    },
+    submenuItems () {
+      return this.item.submenu.filter(i => !i.separator)
+    },
+    isExpanded () {
+      return this.itemId === this.activeItem
+    }
+  },
+  methods: {
+    ...mapActions({
+      updateLocale: 'updateLocale',
+    }),
+    changeLocale(loc) {
+      // console.log('\n-C- NavbarItemMobile > changeLocale > loc :', loc)
+      // console.log('-C- NavbarItemMobile > changeLocale > this.$route :', this.$route)
+      this.updateLocale(loc)
+    },
+    clickMenu (item) {
+      // console.log('\n-C- NavbarItemMobile > clickMenu > item :', item)
+      // console.log('-C- NavbarItemMobile > clickMenu > this.isLocaleSwitch :', this.isLocaleSwitch)
+      this.$emit('updateMenu', this.itemId)
+      if (item.component !== 'dropdownLink' ) {
+        this.$emit('updateShowMenu', this.isLocaleSwitch || !!item.submenu)
+      }
+    },
+    isCurrentRoute (item) {
+      const currentPath = this.$route.path
+      const isPathLink = currentPath === item.link
+      const subLinks = item.submenu && item.submenu.map(sl => sl.link)
+      const isPathSubLink = subLinks && subLinks.includes(currentPath)
+      return isPathLink || isPathSubLink
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.navbar-multi-img {
+  max-height: 1em !important;
+}
+ul > li {
+  padding-bottom: 0;
+}
+.button.submenu {
+  height: 1.75em;
+}
+</style>
+
+<style>
+
+li.navbar-mobile-item > a {
+  text-decoration: none !important;
+} 
+
+</style>