Add map button to header menu

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -20,7 +20,7 @@
             <logo logoType="header" />
           </nuxt-link>
         </ds-flex-item>
-        <!-- dynamic-brand-menu -->
+        <!-- dynamic brand menus -->
         <ds-flex-item
           v-for="item in menu"
           :key="item.name"
@@ -39,8 +39,7 @@
             </ds-text>
           </nuxt-link>
         </ds-flex-item>
-
+        <!-- search field -->
-        <!-- search-field -->
         <ds-flex-item
           v-if="isLoggedIn"
           id="nav-search-box"
@@ -55,26 +54,26 @@
         >
           <search-field />
         </ds-flex-item>
-        <!-- filter-menu 
+        <!-- filter menu -->
-                TODO: Filter is only visible on index    
+        <!-- TODO: Filter is only visible on index -->
-            -->
         <ds-flex-item v-if="isLoggedIn" style="flex-grow: 0; flex-basis: auto">
           <client-only>
             <filter-menu v-show="showFilterMenuDropdown" />
           </client-only>
         </ds-flex-item>
-        <!-- locale-switch -->
+        <!-- right symbols -->
         <ds-flex-item style="flex-basis: auto">
           <div class="main-navigation-right" style="flex-basis: auto">
+            <!-- locale switch -->
             <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
             <template v-if="isLoggedIn">
+              <!-- notification menu -->
               <client-only>
-                <!-- notification-menu -->
                 <notification-menu placement="top" />
               </client-only>
+              <!-- invite button -->
               <div v-if="inviteRegistration">
                 <client-only>
-                  <!-- invite-button -->
                   <invite-button placement="top" />
                 </client-only>
               </div>
@@ -82,7 +81,11 @@
               <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
                 <group-button />
               </client-only>
-              <!-- avatar-menu -->
+              <!-- map button -->
+              <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
+                <map-button />
+              </client-only>
+              <!-- avatar menu -->
               <client-only>
                 <avatar-menu placement="top" />
               </client-only>
@@ -122,9 +125,9 @@
             <base-button icon="bars" @click="toggleMobileMenuView" circle />
           </ds-flex-item>
         </ds-flex>
-        <!-- search, filter-->
+        <!-- search, filter -->
         <ds-flex class="mobile-menu">
-          <!-- search-field mobile-->
+          <!-- search field mobile -->
           <ds-flex-item
             v-if="isLoggedIn"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -132,7 +135,7 @@
           >
             <search-field />
           </ds-flex-item>
-          <!-- filter menu mobile-->
+          <!-- filter menu mobile -->
           <ds-flex-item
             v-if="isLoggedIn"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -143,13 +146,17 @@
             </client-only>
           </ds-flex-item>
         </ds-flex>
-        <!-- switch language, notification, invite, profil -->
+        <!-- right symbols -->
         <ds-flex style="margin: 0 20px">
-          <!-- locale-switch mobile-->
+          <!-- locale switch mobile -->
           <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
-            <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+            <locale-switch
+              class="topbar-locale-switch topbar-locale-switch-mobile"
+              placement="top"
+              offset="8"
+            />
           </ds-flex-item>
-          <!-- invite-button mobile-->
+          <!-- invite button mobile -->
           <ds-flex-item
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="text-align: center"
@@ -160,14 +167,25 @@
           </ds-flex-item>
           <!-- group button -->
           <ds-flex-item
+            v-if="SHOW_GROUP_BUTTON_IN_HEADER"
             :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             style="text-align: center"
           >
-            <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
+            <client-only>
               <group-button />
             </client-only>
           </ds-flex-item>
-          <!-- avatar-menu mobile-->
+          <!-- map button -->
+          <ds-flex-item
+            v-if="!isEmpty(this.$env.MAPBOX_TOKEN)"
+            :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+            style="text-align: center"
+          >
+            <client-only>
+              <map-button />
+            </client-only>
+          </ds-flex-item>
+          <!-- avatar menu mobile -->
           <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }" style="text-align: end">
             <client-only>
               <avatar-menu placement="top" />
@@ -175,7 +193,7 @@
           </ds-flex-item>
         </ds-flex>
         <div :class="{ 'hide-mobile-menu': !toggleMobileMenu }" class="mobile-menu footer-mobile">
-          <!-- dynamic branding menu  -->
+          <!-- dynamic branding menus -->
           <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
             <li v-for="item in menu" :key="item.name">
               <a v-if="item.url" :href="item.url" :target="item.target">
@@ -204,8 +222,10 @@
     </div>
   </ds-container>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
+import isEmpty from 'lodash/isEmpty'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
 import LOGOS from '~/constants/logos.js'
 import headerMenu from '~/constants/headerMenu.js'
@@ -215,6 +235,7 @@ import GroupButton from '~/components/Group/GroupButton'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
+import MapButton from '~/components/Map/MapButton'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import links from '~/constants/links.js'
@@ -228,6 +249,7 @@ export default {
     InviteButton,
     LocaleSwitch,
     Logo,
+    MapButton,
     NotificationMenu,
     PageParamsLink,
     SearchField,
@@ -237,6 +259,7 @@ export default {
   },
   data() {
     return {
+      isEmpty,
       links,
       LOGOS,
       SHOW_GROUP_BUTTON_IN_HEADER,
@@ -277,9 +300,13 @@ export default {
 .topbar-locale-switch {
   display: flex;
   margin-right: $space-xx-small;
+  margin-top: -$space-xx-small;
   align-self: center;
   display: inline-flex;
 }
+.topbar-locale-switch-mobile {
+  margin-top: $space-xx-small;
+}
 .main-navigation-flex {
   align-items: center;
 }

webapp/components/Map/MapButton.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <nuxt-link to="/map">
+      <base-button class="map-button" circle ghost>
+        <base-icon name="globe-detailed" size="large" />
+      </base-button>
+      <!-- <img
+        class="map-icon"
+        src="/img/svg/map/map-globe.svg"
+        :style="'width: 34px;'"
+        v-tooltip="{
+          content: $t('map.button.tooltip'),
+          placement: 'bottom-start',
+        }"
+      /> -->
+      <!-- <mapGlobeSVG
+        class="map-icon"
+        aria-hidden="true"
+        focusable="false"
+        v-tooltip="{
+          content: $t('map.button.tooltip'),
+          placement: 'bottom-start',
+        }"
+      /> -->
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+// import mapGlobeSVG from '/img/svg/map/map-globe.svg'
+
+export default {
+  // components: {
+  //   mapGlobeSVG,
+  // },
+  // data() {
+  //   return {
+  //     globe,
+  //   }
+  // },
+}
+</script>
+
+<style lang="scss">
+// Wolle: .map-button {
+//   // position: relative;
+//   // height: $size-avatar-large;
+//   // width: $size-avatar-large;
+//   // overflow: hidden;
+//   display: inline-flex;
+//   justify-content: center;
+//   align-items: center;
+
+//   // &.--small {
+//   //   width: $size-avatar-small;
+//   //   height: $size-avatar-small;
+//   // }
+
+//   // &.--large {
+//   //   width: $size-avatar-large;
+//   //   height: $size-avatar-large;
+//   // }
+
+//   >.base-icon {
+//     // position: absolute;
+//     // top: 50%;
+//     // left: 50%;
+//     // top: 150%;
+//     // left: 150%;
+//     // width: 90px;
+//     // height: 90px;
+//     // transform: translate(-50%, -50%);
+//     height: auto;
+//   }
+// }
+// .base-icon {
+//   // display: inline-flex;
+//   // vertical-align: bottom;
+
+//   > .svg {
+//     height: 2.2em;
+//     // fill: currentColor;
+//   }
+// }
+// .map-icon {
+//   margin-left: 4px;
+//   margin-right: 4px;
+//   margin-top: 2px;
+//   color: red !important;
+//   // color: $color-locale-menu;
+//   // fill: $color-locale-menu;
+//   // fill: currentColor !important;
+//   // stroke: currentColor !important;
+//   // fill: currentColor;
+//   // stroke: currentColor;
+//   fill: red !important;
+//   stroke: red !important;
+// }
+// svg path {
+//   fill: red !important;
+//   stroke: red !important;
+// }
+
+.map-button {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+</style>

webapp/locales/de.json

@@ -526,6 +526,9 @@
     "title": "{APPLICATION_NAME} befindet sich in der Wartung"
   },
   "map": {
+    "button": {
+      "tooltip": "Landkarte anzeigen"
+    },
     "markerTypes": {
       "group": "Gruppe",
       "theUser": "deine Position",

webapp/locales/en.json

@@ -526,6 +526,9 @@
     "title": "{APPLICATION_NAME} is under maintenance"
   },
   "map": {
+    "button": {
+      "tooltip": "Show map"
+    },
     "markerTypes": {
       "group": "group",
       "theUser": "your position",