Merge pull request #566 from leulad/nav-resources-drop-row

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

Author: Vivek Vishal

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,7 @@
     }
   }
 }
+
 .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 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/academy-icon.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/video-play.svg"
+                                alt="Meshery Logo"
+                              />
+                            </div>
+                            <span>Videos</span>
+                          </a>
+                        </div>
                       </li>
                     </div>
                     <div class="d-flex ms-auto">
@@ -196,6 +232,7 @@
 
 
   setupDropdown("productsDropdown");
+  setupDropdown("resourcesDropdown");
     // console.log(window.location.pathname == "/cloud/");
     // check if the current page ic cloud
     let cur;