Header: Add f5 logo instead of sites button

nginx-jack · nginx-jack · commit a33f8ceb6da6 · 2025-07-01T11:01:40.000+01:00
diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
@@ -150,6 +150,7 @@ textarea:not([rows]) {
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
   --color-brand-100: 0.98 0.0107 158.85;
+  --color-f5-brand: 0.5839 0.2253 20.56;
   --color-background: 1 0 0;
   --color-foreground: 0 0 0;
   --color-shadow: 0.86 0 0;
@@ -497,13 +498,30 @@ ol li:last-child {
     margin: 0;
   }
 
-  .navbar-button {
-    padding: 0.5rem 0.5rem;
+  .header__f5sites__button {
     border: none;
-    border-radius: 0.25rem;
+    background-color: transparent;
+    border-radius: 0;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
+
+    .header__f5sites__logo {
+      pointer-events: none;
+      height: 2rem;
+
+      svg {
+        height: 2rem;
+        stroke: currentColor;
+        color: black;
+      }
+    }
+
+    &:hover {
+      .header__f5sites__logo svg {
+        color: oklch(var(--color-f5-brand));
+      }
+    }
   }
 
   ul {
diff --git a/assets/js/site-dropdown.js b/assets/js/site-dropdown.js
@@ -1,17 +1,12 @@
 document.addEventListener('DOMContentLoaded', () => {
   const dropdownContent = document.getElementById('dropdown-content');
   const navbarButton = document.getElementById('navbar-sites-button');
-  const chevronIcon = document.getElementById('navbar-sites-button-icon');
 
   navbarButton.addEventListener('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');
     }
   });
 
@@ -20,14 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
       !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');
     }
   });
 });
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -91,24 +91,40 @@
       (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 id="navbar-sites-button" class="button navbar-button">
-              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 }}" target="_blank" >{{ .title }}</a>
-                  <p>{{ .description }}</p>
-                </li>
-              {{ end }}
-            </ul>
-          </div>
+    <button id="navbar-sites-button" class="header__f5sites__button">
+        <div class="header__f5sites__logo">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+                <title>f5-logo-black</title>
+                <g id="Layer_2" data-name="Layer 2">
+                    <g id="Layer_1-2" data-name="Layer 1">
+                    <g id="f5-logo-rgb">
+                        <g id="Logo-black-and-white">
+                        <path
+                            fill="currentColor"
+                            d="M940.37,894.53a30.85,30.85,0,0,1,9.47,22.94,32.43,32.43,0,0,1-55.4,23.08A32,32,0,0,1,885,917.47a32.54,32.54,0,0,1,32.37-32.57A30.88,30.88,0,0,1,940.37,894.53Zm3.81-3.75a36.65,36.65,0,0,0-26.8-11,37.72,37.72,0,1,0,26.8,64.32,37.71,37.71,0,0,0,0-53.36ZM923,915.65a18.8,18.8,0,0,1-6.93.92h-6.54v-15h6.23c4,0,7,.57,8.77,1.58s2.76,3.07,2.76,6A6.38,6.38,0,0,1,923,915.65Zm-20.75,22.29h7.28V921.66h5.77c3.82,0,6.56.4,8.11,1.36,2.57,1.54,3.88,4.72,3.88,9.48v3.33l.14,1.25a2.91,2.91,0,0,1,.11.5c0,.2.06.27.19.36h6.76l-.24-.48a4.42,4.42,0,0,1-.35-2.11c-.09-1.14-.09-2.15-.09-3.07v-3.07a11.52,11.52,0,0,0-2.26-6.43c-1.54-2.21-3.95-3.51-7.19-4.08a17,17,0,0,0,6-2c2.77-1.75,4.06-4.56,4.06-8.2,0-5.18-2.06-8.73-6.4-10.49-2.39-1-6.14-1.49-11.3-1.49H902.25Z"
+                        />
+                        <path
+                            fill="currentColor"
+                            d="M912.66,217.69c-6.13,25.33-9.34,51.58-15.26,78.43-75-9.73-163.08-16.86-262-20.34-7.94,25.11-15.46,49.69-24.06,76.52,165.55,10.18,246,53.81,293.72,105.22,46.41,52,56.26,109.45,53.58,162.79C952.67,707,914.45,761.79,862,802.41c-53.08,40-117.29,59.84-168.65,64.16C617.56,872.24,516.22,854.2,494.66,841c-13-29.54-25.77-59.3-39.54-91.76-3.35-6.91-5.46-14,4-22.23,14.74-14.13,28.92-27.8,43.84-42.28,6.59-6.44,13.9-12.44,19.44-3.21,20.38,31.43,39.48,60.27,58.61,89,21.73,32.05,54.83,61.26,127.14,56.4,60.79-5.44,107-51.42,111.93-102,5.32-93.6-89.38-160-335.64-181.27C531.7,401,577.75,262.93,614.59,153.2c58.5,2.7,112.65,7.47,164.38,14.15,38.26,4.87,73.81,13.78,109.46,17.9C796.77,72.26,656.88,0,500,0,223.87,0,0,223.86,0,500A497.64,497.64,0,0,0,97.31,796.3c21.18.16,35.86-4.57,37.45-13.7,1.94-9.55.31-24.33-1.36-39.24-10-98.12-13.53-204.06-9.77-310.22-25.36,1.1-48.12,2.24-69.94,3.52.88-19.63,1.94-38.23,3.52-57.59,21.55-2.07,44.38-3.88,69.46-6,1.07-16.91,2.28-33.28,3.74-49.81C141.67,222,248.29,160.08,337.1,136.18c39.41-9.6,63.51-12.63,82.43-13.62,6.84-.22,14.21-.49,21.55-.49,18.41,0,37.09,1.72,48.92,9.76,19.16,14.36,38.09,28.65,58.22,44.54,2,2.72,4.2,7-.8,14.35-9.24,10.81-18.16,21.14-27.55,32.26-5.41,6.57-14.39,4.84-21.95,2.79-15.84-8.11-31.08-15.56-46.54-23.05-28-12.46-57-25.28-89.27-24-20.13,1.61-39.62,22.21-41.64,50.39-2.79,42.88-4.66,86.84-6.24,134.46C370.18,362,426,361,484.85,360.74c0,13.39-.09,25.67-.09,39.39-19.2,8.58-37.3,17.25-56.54,26-39.7.46-77.48.77-115.53,1.43-1.76,113.29-.09,226.16,5,330.51,1,15.75,1.76,31.7,6.29,42.38,5.43,13.44,36.66,23.8,104.6,27.63.27,11.83.6,23,1,34.46-110.63-3.22-216.86-13.81-302-29.13C219.07,935.63,352,1000,500,1000c276.15,0,500-223.87,500-500A497.6,497.6,0,0,0,912.66,217.69Z"
+                        />
+                        <path fill="currentColor" d="M127.51,833.43h0v0Z" />
+                        </g>
+                    </g>
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </button>
+    <div class="dropdown-content" id="dropdown-content">
+    <ul>
+        {{ range $f5Sites }}
+        <li>
+            <a href="{{ .url }}" target="_blank" >{{ .title }}</a>
+            <p>{{ .description }}</p>
         </li>
+        {{ end }}
     </ul>
+    </div>
 
     </div>
 </div>
