add component and link references for related project switcher

center-for-threat-informed-defense · Oct 1, 2024 · b318682 · b318682
1 parent a285733
commit b318682
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/mappings_explorer/templates/_navigation.html.j2 b/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) {

diff --git a/...emplates/static/_project_switcher.html.j2 → ...lorer/templates/_project_switcher.html.j2 b/...emplates/static/_project_switcher.html.j2 → ...lorer/templates/_project_switcher.html.j2
@@ -5,11 +5,13 @@
 <script>
   const Switcher = {
     template: `
-    <link href="{{url_prefix}}static/project-switcher.css" rel="stylesheet"></link>
     <div>
-    <p>project switcher</p>
+        <RelatedProjectSwitcherVue currentProjectId="mappings_explorer" theme="dark"/>
     </div>
   `,
+    components: {
+      RelatedProjectSwitcherVue: () => import (`../static/vendor/project-switcher/project-switcher.js`)
+    },
     delimiters: ["[[", "]]"],
     data() {
       return {
@@ -19,6 +21,9 @@
         searchModel: "",
       };
     },
+    props: {
+      url_prefix: String,
+    },
   };
   Vue.createApp({
     components: {

diff --git a/src/mappings_explorer/templates/base.html.j2 b/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>