change color and scss in branding

webapp/assets/styles/imports/_branding.scss

@@ -4,11 +4,17 @@
 .main-navigation .ds-menu-item-link {
     color: #a6ff00;
 }
-
 .main-navigation .ds-menu-item-link:hover {
     color: #f2f2f1;
 }
 
+.main-navigation a {
+    color: #a6ff00;
+}
+.main-navigation a:hover {
+    color: #ffffff;
+}
+
 .main-navigation .locale-menu {
     color: #a6ff00;
 }
@@ -17,14 +23,11 @@
     color: #a6ff00;
 }
 
-.header-menu {
-    // background-color: #748885;
-}
 .ds-menu-item-link {
     color: antiquewhite;
 }
 .ds-menu-item-link.router-link-exact-active {
-    color: #a6ff00;
+    color: #6a8ee1;
     background-color: #faf9fa;
     border-left: 2px solid #a6ff00;
 }

webapp/components/FilterMenu/CategoriesMenu.vue

@@ -1,14 +1,15 @@
 <template>
   <dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
-    <base-button
+    <a
+      href="#"
       slot="default"
       :filled="filterActive"
       :ghost="!filterActive"
       slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
-      <ds-text uppercase>{{ $t('admin.categories.name') }}</ds-text>
+      <ds-text bold size="large">{{ $t('admin.categories.name') }}</ds-text>
-    </base-button>
+  </a>
     <template slot="popover">
       <div class="category-menu-options">
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>

webapp/components/HeaderMenu/HeaderMenu.vue

@@ -1,6 +1,21 @@
 <template>
-  <div class="header-menu">
+  <div class="display-flex">
-    <ds-menu v-if="show" :routes="menu" navbar style="margin-right: 20px"></ds-menu>
+    <!-- <ds-flex v-if="show"> -->
+
+    <ds-flex-item v-for="item in menu" :key="item.name">
+      <a v-if="item.url" :href="item.url" target="_blank" class="margin-x">
+        <ds-text size="large" bold>
+          {{ item.name }}
+        </ds-text>
+      </a>
+      <nuxt-link v-else :to="item.path" class="margin-x">
+        <ds-text size="large" bold>
+          {{ item.name }}
+        </ds-text>
+      </nuxt-link>
+    </ds-flex-item>
+
+    <!-- </ds-flex> -->
   </div>
 </template>
 <script>
@@ -16,3 +31,13 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.display-flex {
+  display: flex;
+}
+.margin-x {
+  margin-left: $space-small;
+  margin-right: $space-small;
+  white-space: nowrap;
+}
+</style>

webapp/components/_new/generic/BaseButton/BaseButton.vue

@@ -79,6 +79,7 @@ export default {
 <style lang="scss">
 @import '~/assets/_new/styles/mixins/buttonStates.scss';
 
+
 .base-button {
   @include buttonStates;
   display: inline-flex;
@@ -141,4 +142,5 @@ export default {
     color: $color-neutral-100;
   }
 }
+@import '~/assets/styles/imports/_branding.scss';
 </style>

webapp/constants/headerMenu.js

@@ -5,27 +5,32 @@ export default {
       name: 'Beiträge',
       path: '/#',
     },
-    {
+    // {
-      name: 'Themen',
+    // name: 'Themen',
-      path: '/#',
+    // path: '/#',
-    },
+    // },
-    {
+    // {
-      name: 'Gruppen',
+    //   name: 'Gruppen',
-      path: '/#',
+    //   path: '/#',
-    },
+    // },
     {
       name: 'Über Yunite',
       path: '/#',
-      children: [
+      url: 'https://yunite.org',
-        {
+      // children: [
-          name: 'Impressum',
+      // {
-          path: '/#',
+      // name: 'Impressum',
-        },
+      // path: '/#',
-        {
+      // },
-          name: 'Yunite Team',
+      // {
-          path: '/#',
+      // name: 'Yunite Team',
-        },
+      // path: '/#',
-      ],
+      // },
+      // ],
     },
+    // {
+    //   name: 'Topic',
+    //   path: '/#',
+    // },
   ],
 }

webapp/layouts/default.vue

@@ -4,12 +4,33 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px">
         <div>
           <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ base: '47px' }">
+            <ds-flex-item :width="{ base: '47px' }" style="margin-right:20px">
-              <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
+              <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'" >
-                <logo logoType="header" />
+                <logo logoType="header"/>
               </nuxt-link>
             </ds-flex-item>
-            <header-menu />
+
+            <ds-flex-item v-for="item in menu" :key="item.name" :class="{ 'hide-mobile-menu': !toggleMobileMenu }" :width="{ base: 'auto' }" style="margin-right:20px">
+              <a v-if="item.url" :href="item.url" target="_blank" >
+                <ds-text size="large" bold>
+                  {{ item.name }}
+                </ds-text>
+              </a>
+              <nuxt-link v-else :to="item.path" >
+                <ds-text size="large" bold>
+                  {{ item.name }}
+                </ds-text>
+              </nuxt-link>
+            </ds-flex-item>
+            <ds-flex-item
+              v-if="categoriesActive && isLoggedIn"
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              style="flex-grow: 0; flex-basis: auto; margin-right: 20px;"
+            >
+               <client-only>
+                <categories-menu></categories-menu>
+              </client-only>
+            </ds-flex-item>
             <ds-flex-item
               :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
               class="mobile-hamburger-menu"
@@ -17,16 +38,7 @@
               <base-button icon="bars" @click="toggleMobileMenuView" circle />
             </ds-flex-item>
             <ds-flex-item
-              v-if="categoriesActive && isLoggedIn"
+              :width="{
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              style="flex-grow: 0; flex-basis: auto"
-            >
-              <client-only>
-                <categories-menu></categories-menu>
-              </client-only>
-            </ds-flex-item>
-            <ds-flex-item
-            :width="{
                 base: '45%',
                 sm: '45%',
                 md: show ? 'auto' : '45%',
@@ -95,7 +107,6 @@
 
 <script>
 import Logo from '~/components/Logo/Logo'
-import HeaderMenu from '~/components/HeaderMenu/HeaderMenu.vue'
 import headerMenu from '../constants/headerMenu.js'
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
@@ -112,7 +123,6 @@ import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
 export default {
   components: {
     Logo,
-    HeaderMenu,
     LocaleSwitch,
     SearchField,
     Modal,
@@ -127,6 +137,7 @@ export default {
   data() {
     return {
       show: headerMenu.SHOW_HEADER_MENU,
+      menu: headerMenu.MENU,
       mobileSearchVisible: false,
       toggleMobileMenu: false,
       inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
@@ -151,6 +162,14 @@ export default {
 </script>
 
 <style lang="scss">
+.margin-right-20 {
+  margin-right: 20px;
+}
+.margin-x {
+  margin-left: 20px;
+  margin-right: 20px;
+  white-space: nowrap;
+}
 .topbar-locale-switch {
   display: flex;
   margin-right: $space-xx-small;
@@ -166,11 +185,6 @@ export default {
   align-items: center;
 }
 
-.main-navigation {
-  a {
-    color: $text-color-soft;
-  }
-}
 .main-navigation-right {
   display: flex;
   justify-content: flex-end;

webapp/pages/settings/index.vue

@@ -48,6 +48,7 @@ import { queryLocations } from '~/graphql/location'
 let timeout
 
 export default {
+  name: 'NewsFeed',
   data() {
     return {
       cities: [],