From 94d80a2322ed938cd1dc385f21ed5ea9c45e717f Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Mon, 11 Oct 2021 16:02:58 +0100
Subject: [PATCH] Start to implement new masthead

---
 components/Masthead/EubopenAppBar.vue     | 23 +++++++++
 components/Masthead/MatheadLogos.vue      | 58 +++++++++++++++++++++++
 components/Masthead/Toolbar.vue           | 19 ++++++++
 components/mainPage/sponsors/Sponsors.vue |  7 ++-
 layouts/default.vue                       |  8 ++--
 5 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 components/Masthead/EubopenAppBar.vue
 create mode 100644 components/Masthead/MatheadLogos.vue
 create mode 100644 components/Masthead/Toolbar.vue

diff --git a/components/Masthead/EubopenAppBar.vue b/components/Masthead/EubopenAppBar.vue
new file mode 100644
index 0000000..77f591f
--- /dev/null
+++ b/components/Masthead/EubopenAppBar.vue
@@ -0,0 +1,23 @@
+<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>
diff --git a/components/Masthead/MatheadLogos.vue b/components/Masthead/MatheadLogos.vue
new file mode 100644
index 0000000..3fce046
--- /dev/null
+++ b/components/Masthead/MatheadLogos.vue
@@ -0,0 +1,58 @@
+<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>
diff --git a/components/Masthead/Toolbar.vue b/components/Masthead/Toolbar.vue
new file mode 100644
index 0000000..b905f96
--- /dev/null
+++ b/components/Masthead/Toolbar.vue
@@ -0,0 +1,19 @@
+<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>
diff --git a/components/mainPage/sponsors/Sponsors.vue b/components/mainPage/sponsors/Sponsors.vue
index 9c20eb9..2ac0584 100644
--- a/components/mainPage/sponsors/Sponsors.vue
+++ b/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">
diff --git a/layouts/default.vue b/layouts/default.vue
index 4033d78..5a44240 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,11 +1,11 @@
 <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,
-- 
GitLab