Move masthead to shared components

components/nav_bar/MainAppBar.vue

-<template>
-  <div class="nav-bar">
-    <v-container class="nav-bar-items-container d-flex flex-column justify-end">
-      <div class="logo-and-search">
-        <v-row>
-          <v-col lg="4">
-            <Logo />
-          </v-col>
-          <v-spacer> </v-spacer>
-          <v-col lg="6" align-self="end">
-            <SearchBar />
-          </v-col>
-        </v-row>
-      </div>
-      <div>
-        <v-tabs background-color="secondary">
-          <v-tab> Link 1 </v-tab>
-          <v-tab> Link 2 </v-tab>
-          <v-tab> Link 3 </v-tab>
-        </v-tabs>
-      </div>
-    </v-container>
-  </div>
-</template>
-
-<script>
-import SearchBar from '~/components/nav_bar/SearchBar.vue'
-import Logo from '~/components/Logo.vue'
-export default {
-  components: {
-    Logo,
-    SearchBar,
-  },
-}
-</script>
-
-<style lang="scss">
-.nav-bar {
-  height: 224px;
-  background-color: $eubopen-secondary-color;
-  .logo-and-search {
-    margin-bottom: 20px;
-  }
-  .nav-bar-items-container {
-    height: 100%;
-    padding-bottom: 0;
-  }
-}
-</style>

components/nav_bar/SearchBar.vue

-<template>
-  <div class="d-flex flex-column align-end">
-    <div class="d-flex">
-      <v-text-field label="Search Term" solo single-line></v-text-field>
-      <v-btn color="primary"> <v-icon>mdi-magnify</v-icon> Search </v-btn>
-    </div>
-    <div>
-      <b>Examples:</b>
-      <a>Example1</a>, <a>Example2</a>, <a>Example3</a>,
-      <a>Example4</a>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style></style>

layouts/default.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import MainAppBar from '~/components/nav_bar/MainAppBar.vue'
+import MainAppBar from '~/web-components-submodule/components/common/Masthead/MainAppBar.vue'
 import Footer from '~/components/footer/Footer.vue'
 import Notifications from '~/web-components-submodule/components/common/Notifications.vue'