feat: update docs landing page (#76)

* feat: removed "Explore all products" and added new link dropdown instead

* fix bug with closing dropdown

* updated nginx description in dropdown

* added new description for nginx.org

Author: lamATnginx

assets/css/f5-hugo.css

@@ -1606,4 +1606,43 @@ li.nav-item a.nav-link {
 .f5-logo-footer {
    height: 32px;
    width: 32px;
+}
+
+.link-chevron-icon {
+  transition: transform 0.15s ease-in-out; 
+}
+
+.rotate-chevron {
+  transform: rotate(180deg);
+}
+
+.dropdown-content {
+  position: absolute;
+  background-color: white;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  right: 0; 
+  display: none;
+  width: 400px;
+  max-width: 80vw;
+  margin-right: 8px;
+}
+
+.dropdown-content ul {
+  padding: 20px 10px;
+  list-style: none;
+}
+
+@media (max-width: 767px) {
+  .dropdown-content {
+    right: auto; 
+    left: 50%; 
+    transform: translateX(-50%);
+    margin-right: 0px;
+  }
+}
+
+.remove-bottom-radius {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }

assets/js/product-dropdown.js

@@ -0,0 +1,27 @@
+$(document).ready(function () {
+    const dropdownContent = document.getElementById("dropdown-content");
+    const navbarButton = document.getElementById("navbar-sites-button");
+    const chevronIcon = document.getElementById("navbar-sites-button-icon");
+
+    $("#navbar-sites-button").on("click", () => {
+        chevronIcon.classList.toggle('rotate-chevron');
+
+        if (dropdownContent.style.display === "block") {
+            dropdownContent.style.display = "none";
+            navbarButton.classList.remove("remove-bottom-radius");
+        } else {
+            dropdownContent.style.display = "block";
+            navbarButton.classList.add("remove-bottom-radius");
+        }
+    });
+
+    window.onclick = function(event) {
+        if (!event.target.matches('#navbar-sites-button') && !event.target.matches('#navbar-sites-button-icon')) {
+            if(dropdownContent.style.display !== "none" && dropdownContent.style.display !== ""){
+                chevronIcon.classList.toggle('rotate-chevron');
+            }
+            dropdownContent.style.display = "none"
+            navbarButton.classList.remove("remove-bottom-radius");
+        }
+    }
+})

layouts/partials/header.html

@@ -25,10 +25,28 @@
       </ul>
     </div>
     {{ end }}
-
+    
+    {{ $f5Sites := slice 
+      (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
+      (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")
+      (dict "title" "NGINX" "url" "https://nginx.org/" "description" "Learn more about NGINX Open Source and read the community blog")
+    }}
     <ul class="navbar navbar-nav">
         <li class="nav-item-explore active">
-          <button class="button navbar-button"><a href="https://www.f5.com/products" alt="Explore all products on f5.com" target="_blank">Explore All Products</a></button>
+          <button id="navbar-sites-button" class="button navbar-button" style="display: flex; gap: 8px; align-items: center;">
+              F5 Sites
+              <i id="navbar-sites-button-icon" class="link-chevron-icon fa-solid fa-chevron-down"></i>
+          </button>
+          <div class="dropdown-content" id="dropdown-content">
+            <ul>
+              {{ range $f5Sites }}
+                <li>
+                  <a href="{{ .url }}">{{ .title }}</a>
+                  <p>{{ .description }}</p>
+                </li>
+              {{ end }}
+            </ul>
+          </div>
         </li>
     </ul>
   </div>

layouts/partials/scripts.html

@@ -59,4 +59,8 @@
 <!-- Inline theme switcher -->
 {{ $jsThemeSwitcher := resources.Get "js/theme-switcher.js" | minify | fingerprint "sha512" }}
 <script src="{{ $jsThemeSwitcher.RelPermalink }}" type="text/javascript"
-  integrity="{{ $jsThemeSwitcher.Data.Integrity }}"></script>
+  integrity="{{ $jsThemeSwitcher.Data.Integrity }}"></script>
+  
+<!-- Load Product Dropdown javascript -->
+{{ $jsProductDropdown := resources.Get "js/product-dropdown.js" | minify | fingerprint "sha512" }}
+<script src="{{ $jsProductDropdown.RelPermalink }}" type="text/javascript" integrity="{{ $jsProductDropdown.Data.Integrity }}"></script>