EUbOPEN: change layout to comply to IMI communication guidelines

components/Masthead/EubOPENSearchBar.vue

+<template>
+  <div class="d-flex align-center search-bar-container white">
+    <SearchAutocomplete />
+  </div>
+</template>
+
+<script>
+import SearchAutocomplete from '~/web-components-submodule/components/common/Masthead/Autocomplete/SearchAutocomplete.vue'
+
+export default {
+  components: {
+    SearchAutocomplete,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.search-bar-container {
+  width: 100%;
+  .input-container {
+    padding: 0 0 0 5px;
+    width: 100%;
+    .search-input {
+      margin-top: 0;
+    }
+  }
+}
+</style>

components/Masthead/LinksMenu.vue

+<template>
+  <div class="d-flex justify-space-between links-menu">
+    <v-btn color="primary" depressed tile nuxt to="/">
+      <v-icon>mdi-home</v-icon>
+    </v-btn>
+
+    <v-menu offset-y rounded="0">
+      <template #activator="{ on, attrs }">
+        <v-btn v-bind="attrs" color="primary" depressed tile v-on="on">
+          About <v-icon>mdi-menu-down</v-icon>
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item nuxt to="/acknowledgement">
+          <v-list-item-content>
+            <v-list-item-title>Acknowledgement</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item nuxt to="/disclaimer">
+          <v-list-item-content>
+            <v-list-item-title>Disclaimer</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item nuxt to="/accessibility">
+          <v-list-item-content>
+            <v-list-item-title>Accessibility</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item nuxt to="/privacy_notice">
+          <v-list-item-content>
+            <v-list-item-title>Privacy Notice</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.links-menu {
+  width: 100%;
+}
+</style>

components/Masthead/LinksMenuMobile.vue

+<template>
+  <v-menu offset-y rounded="0">
+    <template #activator="{ on, attrs }">
+      <v-btn color="white" depressed tile icon v-bind="attrs" v-on="on">
+        <v-icon>mdi-menu</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item nuxt to="/">
+        <v-list-item-icon>
+          <v-icon color="primary">mdi-home</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>Home</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-subheader>About</v-subheader>
+      <v-list-item nuxt to="/acknowledgement">
+        <v-list-item-content>
+          <v-list-item-title>Acknowledgement</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item nuxt to="/disclaimer">
+        <v-list-item-content>
+          <v-list-item-title>Disclaimer</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item nuxt to="/accessibility">
+        <v-list-item-content>
+          <v-list-item-title>Accessibility</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item nuxt to="/privacy_notice">
+        <v-list-item-content>
+          <v-list-item-title>Privacy Notice</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

pages/accessibility.vue

+<template>
+  <v-card tile flat>
+    <v-card-title> Accessibility </v-card-title>
+    <v-divider />
+    <v-card-text> </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

pages/privacy_notice.vue

+<template>
+  <v-card tile flat>
+    <v-card-title> Privacy Notice </v-card-title>
+    <v-divider />
+    <v-card-text class="yellow lighten-4">
+      <p class="text-justify">
+        Click <a href="/DraftPrivacyNotice.pdf">here</a> to download the DRAFT
+        of the privacy notice. Ths draft is generated by the EBI Data Protection
+        Engine (DPE). Once we agree on a final version, this page will be
+        generated with the data generated by the DPE.
+      </p>
+      <p class="text-justify">
+        The PDF file was generated by printing the current record in the DPE.
+      </p>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>