add resources nav-item to contain resources and videos as row

assets/scss/_navbar_project.scss

@@ -10,6 +10,10 @@
     color: $primary !important;
   }
 
+  .down-icon{
+    font-size: 0.75rem;
+  }
+
 //  @media (min-width: 768px) {
 //   &:hover {
 //       .dropdown-menu {
@@ -61,6 +65,64 @@
     }
   }
 }
+
+.nav-item-row{
+  margin-right: 0.75rem;
+
+  .current {
+    color: $primary !important;
+  }
+
+  .down-icon{
+    font-size: 0.75rem;
+  }
+
+  .dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 12rem;
+    justify-content: center;
+    padding: 0.1rem .2rem;
+    // padding: 0;
+    transform: translate(-15%, 2.5rem);
+    border-radius: 0.75rem;
+    &::after{
+      content: "";
+      width: 5rem;
+    }
+    .dropdown-item {
+      height: 3rem;
+      width: 11.5rem;
+      margin: 0.1rem 0rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border-radius: 0.75rem;
+      .logo-container {
+        height: 2rem;
+        width: 2rem;
+        margin: 0.5rem 0;
+        margin-right: 0.9rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 100%;
+        }
+      }
+      // span {
+      //   margin-left: 1rem;
+      // }
+      &:hover {
+        color: $black;
+        img {
+          filter: brightness(0) invert(1);
+        }
+      }
+    }
+  }
+}
 .dropdown{
   position: static;
 }

layouts/partials/navbar.html

@@ -27,8 +27,44 @@
                       <li class="nav-item">
                         <a id="kanvas" class="nav-link" href="/kanvas/"> Kanvas</a>
                       </li>
-                      <li class="nav-item">
-                        <a id="videos" class="nav-link" href="/videos"> Videos</a>
+                      <li class="nav-item-row dropdown" data-bs-theme="dark">
+                        <div
+                        class="nav-link"
+                        id="resourcesDropdown"
+                        role="button"
+                        data-toggle="dropdown"
+                        >
+                        Resources <span class="down-icon">&#9660;</span>
+                        </div>
+                        <div class="dropdown-menu" aria-labelledby="resourcesDropdown" style="visibility:hidden;">
+                          <a
+                          class="dropdown-item"
+                          href="https://cloud.layer5.io/academy/overview"
+                          target="_blank"
+                          >
+                            <div class="logo-container">
+                              <img
+                                src="/images/logos/learning-path.svg"
+                                alt="Meshery Logo"
+                              />
+                            </div>
+                            <span>Academy</span>
+                          </a>
+                          <div class="dropdown-divider"></div>
+                          <a
+                          class="dropdown-item"
+                          href="https://docs.layer5.io/videos"
+                          target="_blank"
+                          >
+                            <div class="logo-container">
+                              <img
+                                src="/images/logos/video-play.svg"
+                                alt="Meshery Logo"
+                              />
+                            </div>
+                            <span>Videos</span>
+                          </a>
+                        </div>
                       </li>
                     </div>
                     <div class="d-flex ms-auto">
@@ -186,6 +222,7 @@
 
 
   setupDropdown("productsDropdown");
+  setupDropdown("resourcesDropdown");
     // console.log(window.location.pathname == "/cloud/");
     // check if the current page ic cloud
     let cur;