Related project switcher

src/mappings_explorer/templates/_navigation.html.j2

@@ -6,9 +6,14 @@
 <a href="{{url_prefix}}" class="logo d-flex align-items-center">
   <img src="{{url_prefix}}static/img/mappings_explorer_header_logo_h60.png" alt="Mappings Explorer" />
 </a>
-
-  <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
-  <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
+  <div class="mobile-nav-div" style="margin-left: auto;">
+    <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
+    <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
+    {#<div class="project-switcher">
+      <img src="{{url_prefix}}static/img/project-logos/related.svg" style="height: 40px; margin:auto;" alt="" />
+    </div>#}
+  </div>
+  <div style="display: flex">
   <nav id="navbar" class="navbar">
     <ul>
       <li class="dropdown"><a href="{{url_prefix}}about/"><span>ABOUT</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
@@ -55,8 +60,17 @@
           </span>
         </div>
       </li>
+      {# <li style="padding-left: 10px;" class="project-switcher-lg">
+        <div class="project-switcher">
+          <img src="{{url_prefix}}static/img/project-logos/related.svg" style="height: 40px; margin:auto;" alt="" />
+        </div>
+      </li> #}
     </ul>
   </nav>
+  <div class="project-switcher">
+    <img src="{{url_prefix}}static/img/project-logos/related.svg" style="height: 40px; margin:auto;" alt="" />
+  </div>
+  </div>
 </div>
 <script>
   function navSearchWebsite(url) {

src/mappings_explorer/templates/_related_switcher_content.html.j2

@@ -0,0 +1,133 @@
+<div id="switcher-component">
+  <Switcher :url_prefix="'{{url_prefix}}'"></Switcher>
+</div>
+
+<script>
+  const Switcher = {
+    template: `
+    <link href="{{url_prefix}}static/project-switcher.css" rel="stylesheet"></link>
+    <div class="project-switcher-expanded d-none">
+      <div class="heading-div">
+        <a href="https://mitre-engenuity.org/cybersecurity/center-for-threat-informed-defense/" target="_blank">
+          <img src="{{url_prefix}}static/img/project-logos/ctid-purple.png" />
+        </a>
+        <h1>CTID PROJECTS</h1>
+      </div>
+        <input
+          type="search"
+          id="ctid-search-input"
+          class="ctid-search-input form-control rounded"
+          placeholder="Search"
+          aria-label="Search"
+          v-model="searchModel"
+        />
+    <div class="project-content">
+      <div class="notification-section">
+        <a v-for="notification in notificationList" :href="notification.url" target="_blank" class="notification">
+          <img src="{{url_prefix}}static/img/project-logos/bell.svg" />
+          <h3 :href="notification.url" target="_blank">[[notification.text]]</h3>
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="24" viewBox="0 0 30 24" class="fade-up-left">
+            <g id="arrow_forward" transform="translate(6)">
+              <path id="Path_814" data-name="Path 814" d="M0,0H24V24H0Z" fill="none"/>
+              <path id="Path_815" data-name="Path 815" d="M12,4,10.59,5.41,16.17,11H-6v2H16.17l-5.58,5.59L12,20l8-8Z"/>
+            </g>
+          </svg>
+        </a>
+      </div>
+      <template v-if="currentProjectObj.featured_list">
+        <div class="featured projects">
+            <h2>Most Relevant</h2>
+              <div class="project-grid">
+                <template v-for="project in projectList" :key="project">
+                  <a v-if="currentProjectObj.featured_list.find(id => id === project.id)"
+                  class="project-container" :href="project.url" target="_blank">
+                    <img :src="url_prefix + 'static/img/project-logos/' + project.imgsrc" alt="" />
+                    <h3>[[project.label]]</h3>
+                  </a>
+                </template>
+            </div>
+        </div>
+      </template>
+
+      <div class="all projects">
+          <h2>All Projects</h2>
+          <div class="project-grid">
+            <template v-for="project in projectList" :key="project">
+              <a v-if="!currentProjectObj.featured_list.find(id => id === project.id) && project.id !== currentProjectId"
+               class="project-container" :href="project.url" target="_blank">
+                <img :src="url_prefix + 'static/img/project-logos/' + project.imgsrc" alt="" />
+                <h3>[[project.label]]</h3>
+              </a>
+            </template>
+          </div>
+          <p class="error-text" v-if="projectList.length<1">No projects found for "[[searchModel]]"</p>
+      </div>
+    </div>
+</div>
+  `,
+    delimiters: ["[[", "]]"],
+    data() {
+      return {
+        currentProjectId: "mappings_explorer",
+        currentProjectObj:{},
+        projectList: {},
+        fullProjectList: {},
+        notificationList: {},
+        searchModel: "",
+      };
+    },
+    props: {
+      url_prefix: String,
+    },
+    computed: {
+    },
+    methods: {
+      getProjectList() {
+        project_file = `${this.url_prefix}static/related_projects_src.json`;
+        fetch(project_file)
+          .then((response) => response.json())
+          .then((json) => {
+            this.projectList = json.projects;
+            this.fullProjectList = json.projects;
+            this.notificationList = json.notifications;
+            this.currentProjectObj = this.fullProjectList.find(p => p.id === this.currentProjectId)
+          });
+      }
+    },
+    watch: {
+      searchModel: function (val) {
+        const filtered = this.fullProjectList.filter(project => project.label.toLowerCase().includes(this.searchModel.toLowerCase()) )
+        this.projectList = filtered
+      }
+    },
+     mounted() {
+      this.getProjectList();
+    },
+  };
+
+  Vue.createApp({
+    components: {
+      Switcher
+    }
+  }).mount("#switcher-component");
+
+</script>
+<script>
+  window.addEventListener('click', ({target}) => {
+      if (target.closest('.project-switcher-expanded')) {
+          // keep modal open
+      } else if (target.closest('.project-switcher')) {
+          document.querySelectorAll('.project-switcher-expanded').forEach(el => {
+              el.classList.toggle('d-none')
+          })
+      }
+      else {
+          document.querySelectorAll('.project-switcher-expanded').forEach(el => {
+              el.classList.add('d-none')
+          })
+      }
+  });
+</script>
+
+
+

src/mappings_explorer/templates/base.html.j2

@@ -44,6 +44,7 @@
     <header class="header d-flex align-items-center fixed-top">
         {% include "_navigation.html.j2"%}
     </header>
+    {% include "_related_switcher_content.html.j2" %}
     {% block content %}
     <h1>Welcome to Mappings Explorer</h1>
     {% endblock content %}

src/mappings_explorer/templates/static/main.css

@@ -474,11 +474,14 @@ div.banner {
 }
 
 @media (min-width: 1280px) {
-
   .mobile-nav-show,
-  .mobile-nav-hide {
+  .mobile-nav-hide,
+  .mobile-nav-div {
     display: none;
   }
+  .project-switcher-lg {
+    display: inline;
+  }
 }
 
 /*--------------------------------------------------------------
@@ -585,6 +588,18 @@ div.banner {
     background: #212c5e81;
     z-index: 9996 !important;
   }
+  .mobile-nav-div {
+    margin-top: auto;
+    margin-bottom: auto;
+    display: flex;
+  }
+  .mobile-nav-div i {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  .project-switcher-lg {
+    display: none;
+  }
 }
 
 /*--------------------------------------------------------------

src/mappings_explorer/templates/static/project-switcher.css

@@ -0,0 +1,146 @@
+
+  .project-switcher {
+    cursor: pointer;
+  }
+  .project-switcher-expanded {
+    position: fixed;
+    top: 60px;
+    right: 12px;
+    background-color: white;
+    z-index: 100;
+    padding: 40px 20px;
+    width: 400px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+  @media (min-width: 1280px) {
+    .project-switcher-expanded {
+
+        right: calc((100vw - 1140px)/2);
+    }
+  }
+  @media (min-width: 1400px) {
+    .project-switcher-expanded {
+
+        right: calc((100vw - 1320px)/2);
+    }
+  }
+  .project-switcher-expanded .project-content {
+    margin-top: 8px;
+    height: 472px;
+    overflow-y: scroll;
+  }
+  .project-switcher-expanded .project-content::-webkit-scrollbar {
+    background-color: #EFF1F4;
+    width: 7px;
+  }
+  .project-switcher-expanded .project-content::-webkit-scrollbar-thumb {
+    background-color: #ADAEB1;
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+  }
+  .project-switcher-expanded .heading-div {
+    display: flex;
+    gap: 10px;
+    padding-bottom: 8px;
+    margin-top: 10px;
+  }
+  .project-switcher-expanded .heading-div img {
+   height: 20px;
+   margin: auto 0px;
+  }
+  .project-switcher-expanded h1 {
+    font-size: 24px;
+    font-weight: bold;
+    margin: auto 0px;
+  }
+  .project-switcher-expanded h2 {
+    font-size: 18px;
+    font-weight: bold;
+    text-transform: uppercase;
+    padding-top: 10px;
+    margin-bottom: 0px;
+  }
+  .project-switcher-expanded .project-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 0px;
+    margin: 15px 0px;
+    margin-top: 5px;
+  }
+  .project-switcher-expanded .project-container {
+    text-align: center;
+    padding:  10px 8px;
+    border: none;
+    background-color: inherit;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .project-switcher-expanded .project-container:hover {
+    background-color: #EFF1F4;
+    border-radius: 5px;
+    transition: 0.5s;
+  }
+
+  .project-switcher-expanded .project-container img {
+    text-align: center !important;
+    max-height: 30px;
+  }
+  .project-switcher-expanded .project-container h3 {
+    font-size: 14px;
+    text-align: center;
+    margin-top: 8px;
+    margin-bottom: 0px;
+    color: #0B2338;
+  }
+
+  .project-switcher-expanded .notification img {
+    height: 14px;
+    margin: auto 0px;
+  }
+  .project-switcher-expanded .notification h3 {
+    margin-bottom: 0;
+    margin: auto 0;
+    font-size: 14px;
+    color: #0B2338 !important;
+  }
+
+  .project-switcher-expanded .notification {
+    display: flex;
+    background-color: #C2EAF6;
+    border-radius: 100px;
+    padding: 6px 16px;
+    margin: 3px 0px;
+    gap: 8px;
+    width: max-content;
+    transition: .5s;
+  }
+  .project-switcher-expanded .notification svg {
+    visibility: hidden;
+    opacity: 0;
+    height: 14px;
+    display: inline;
+    margin: auto 0px;
+    margin-left: -10px;
+    width: 0px;
+    transition: .5s;
+  }
+  .project-switcher-expanded .notification:hover {
+    background-color: #62BEE2;
+  }
+  .project-switcher-expanded .notification:hover svg {
+    display: inline;
+    visibility: visible;
+    opacity: 1;
+    margin-left: 10px;
+    width: auto;
+  }
+  .project-switcher-expanded .error-text {
+    font-style: italic;
+    text-align: center;
+  }
+
+  .project-switcher-expanded input {
+    color: #0B2338;
+    border: #0B2338 solid 1px;
+  }