Add project switcher to mapex website

src/mappings_explorer/templates/_navigation.html.j2

@@ -57,6 +57,9 @@
       </li>
     </ul>
   </nav>
+  <div class="project-switcher">
+    {% include "_project_switcher.html.j2"%}
+  </div>
 </div>
 <script>
   function navSearchWebsite(url) {

src/mappings_explorer/templates/_project_switcher.html.j2

@@ -0,0 +1,36 @@
+<div id="switcher-component">
+  <Switcher :url_prefix="'{{url_prefix}}'"></Switcher>
+</div>
+
+<script>
+  const Switcher = {
+    template: `
+    <div>
+        <RelatedProjectSwitcherVue currentProjectId="mappings_explorer" theme="dark"/>
+    </div>
+  `,
+    components: {
+      RelatedProjectSwitcherVue: () => import (`../static/vendor/project-switcher/project-switcher.js`)
+    },
+    delimiters: ["[[", "]]"],
+    data() {
+      return {
+        projectList: {},
+        fullProjectList: {},
+        notificationList: {},
+        searchModel: "",
+      };
+    },
+    props: {
+      url_prefix: String,
+    },
+  };
+  Vue.createApp({
+    components: {
+      Switcher
+    }
+  }).mount("#switcher-component");
+</script>
+<script>
+
+</script>

src/mappings_explorer/templates/base.html.j2

@@ -30,6 +30,11 @@
     <!-- Vue -->
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 
+    <!-- Import project switcher component -->
+    <link href="{{url_prefix}}static/vendor/project-switcher/project-switcher.js" rel="stylesheet">
+    <link href="{{url_prefix}}static/vendor/project-switcher/project-switcher.umd.cjs" rel="stylesheet">
+    <link href="{{url_prefix}}static/vendor/project-switcher/style.css" rel="stylesheet">
+
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-7E2GTHR4GB"></script>
     <script>