Start to implement new masthead

components/Masthead/EubopenAppBar.vue

+<template>
+  <v-row dense>
+    <v-col cols="12">
+      <MatheadLogos />
+    </v-col>
+    <v-col cols="12">
+      <Toolbar />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import MatheadLogos from '~/components/Masthead/MatheadLogos.vue'
+import Toolbar from '~/components/Masthead/Toolbar.vue'
+export default {
+  components: {
+    MatheadLogos,
+    Toolbar,
+  },
+}
+</script>
+
+<style></style>

components/Masthead/MatheadLogos.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="6" sm="3" xl="2" class="d-flex justify-center align-center">
+        <Logo />
+      </v-col>
+      <v-spacer />
+      <v-col
+        v-for="partner in partners"
+        :key="partner.id"
+        cols="2"
+        sm="1"
+        class="d-flex justify-center align-center"
+      >
+        <a :href="partner.linkTo" class="logo-link">
+          <v-img
+            :src="require(`@/static/img/partnerLogos/${partner.logoFilename}`)"
+            :alt="partner.alt"
+          />
+        </a>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import Logo from '~/components/Logo.vue'
+export default {
+  components: { Logo },
+  data() {
+    return {
+      partners: [
+        {
+          logoFilename: 'efpia.png',
+          linkTo: 'https://www.efpia.eu',
+          alt:
+            'European Federation of Pharmaceutical Industries and Associations (EFPIA)',
+          id: 'EFPIA',
+        },
+        {
+          logoFilename: 'Innovative_Medicines_Initiative.png',
+          linkTo: 'https://www.imi.europa.eu',
+          alt: 'Innovative Medicines Initiative (IMI)',
+          id: 'IMI',
+        },
+        {
+          logoFilename: 'eu.jpeg',
+          linkTo: 'https://ec.europa.eu/research/health/index_en.html',
+          alt: 'European Comission - Research and Innovation',
+          id: 'EC',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style></style>

components/Masthead/Toolbar.vue

+<template>
+  <div class="eubopen-bar">
+    <v-container>
+      <v-row>
+        <v-col cols="12"> Tools </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.eubopen-bar {
+  background-color: $eubopen-primary-color;
+}
+</style>

components/mainPage/sponsors/Sponsors.vue

@@ -7,10 +7,9 @@
         <v-col
           v-for="partner in partners"
           :key="partner.id"
-          cols="4"
-          sm="3"
-          md="2"
-          lg="1"
+          cols="3"
+          sm="2"
+          md="1"
           class="d-flex justify-center align-center"
         >
           <a :href="partner.linkTo" class="logo-link">

layouts/default.vue

 <template>
   <v-app>
     <Notifications />
-    <MainAppBar :permanently-pinned="false">
+    <EubopenAppBar>
       <template #logo>
         <Logo />
       </template>
-    </MainAppBar>
+    </EubopenAppBar>
     <v-main>
       <v-container>
         <nuxt />
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import MainAppBar from '~/web-components-submodule/components/common/Masthead/MainAppBar.vue'
+import EubopenAppBar from '~/components/Masthead/EubopenAppBar.vue'
 import Footer from '~/components/footer/Footer.vue'
 import Notifications from '~/web-components-submodule/components/common/Notifications.vue'
 import Logo from '~/components/Logo.vue'
 
 export default {
   components: {
-    MainAppBar,
+    EubopenAppBar,
     Footer,
     Notifications,
     Logo,