From 5b0360b517a92b9eb79222fffdae0e07b5e4607f Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 25 Jan 2024 11:02:14 -0600
Subject: [PATCH] Website: Update website navigation labels (#16337)

Changes:
- Added an "Articles" label to the community dropdown in the website's
navigation menu (Mobile and desktop)
- Updated the `z-index` value of the mobile navigation menu to prevent
the website's footer fro being visible when the menu is open on small
pages.
---
 website/assets/styles/bootstrap-overrides.less |  2 +-
 website/assets/styles/layout.less              |  2 +-
 website/views/layouts/layout-sandbox.ejs       | 12 +++++++-----
 website/views/layouts/layout.ejs               | 12 +++++++-----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less
index 7cfced7878..c950c0c8e1 100644
--- a/website/assets/styles/bootstrap-overrides.less
+++ b/website/assets/styles/bootstrap-overrides.less
@@ -251,7 +251,7 @@ a.text-danger:hover, a.text-danger:focus {
   .collapse.show {
     opacity: 1;
     pointer-events: auto;
-    z-index: 3;
+    z-index: 300;
     overflow-y: auto;
   }
   .collapse {
diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index ed5d60a1e8..701460d906 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -325,7 +325,7 @@ html, body {
     padding-top: 40px;
     max-width: 1248px;
     position: relative;
-    z-index: 9999;
+    z-index: 198;
   }
   [purpose='footer-nav'] {
     display: flex;
diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs
index 3070902481..2c9ec12442 100644
--- a/website/views/layouts/layout-sandbox.ejs
+++ b/website/views/layouts/layout-sandbox.ejs
@@ -183,11 +183,12 @@
                 <a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">Community</a>
                 <div class="d-block">
                   <div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
-                    <a href="/announcements">Announcements</a>
-                    <a href="/securing">Security</a>
-                    <a href="/engineering">Engineering</a>
-                    <a href="/podcasts">Podcasts</a>
-                    <a href="/reports/state-of-device-management">Reports</a>
+                    <span>ARTICLES</span>
+                    <a class="pl-3" href="/announcements">Announcements</a>
+                    <a class="pl-3" href="/securing">Security</a>
+                    <a class="pl-3" href="/engineering">Engineering</a>
+                    <a class="pl-3" href="/podcasts">Podcasts</a>
+                    <a class="pl-3" href="/reports/state-of-device-management">Reports</a>
                     <span>CONTRIBUTE</span>
                     <a class="pl-3" href="/slack" target="_blank">Join the conversation</a>
                     <a class="pl-3" href="/contribute">Contribute to Fleet</a>
@@ -233,6 +234,7 @@
               <div purpose="dropdown-button" class="btn-group">
                 <a purpose="header-nav-btn" button-text="Community" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" data-toggle="dropdown">Community</a>
                 <div purpose="header-dropdown" class="dropdown-menu">
+                  <span class="muted dropdown-header">ARTICLES</span>
                   <a class="dropdown-item mb-1" href="/announcements">Announcements</a>
                   <a class="dropdown-item mb-1" href="/securing">Security</a>
                   <a class="dropdown-item mb-1" href="/engineering">Engineering</a>
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 3e81398003..cbfa221f33 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -184,11 +184,12 @@
                 <a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">Community</a>
                 <div class="d-block">
                   <div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
-                    <a href="/announcements">Announcements</a>
-                    <a href="/securing">Security</a>
-                    <a href="/engineering">Engineering</a>
-                    <a href="/podcasts">Podcasts</a>
-                    <a href="/reports/state-of-device-management">Reports</a>
+                    <span>ARTICLES</span>
+                    <a class="pl-3" href="/announcements">Announcements</a>
+                    <a class="pl-3" href="/securing">Security</a>
+                    <a class="pl-3" href="/engineering">Engineering</a>
+                    <a class="pl-3" href="/podcasts">Podcasts</a>
+                    <a class="pl-3" href="/reports/state-of-device-management">Reports</a>
                     <span>CONTRIBUTE</span>
                     <a class="pl-3" href="/slack" target="_blank">Join the conversation</a>
                     <a class="pl-3" href="/contribute">Contribute to Fleet</a>
@@ -234,6 +235,7 @@
               <div purpose="dropdown-button" class="btn-group">
                 <a purpose="header-nav-btn" button-text="Community" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" data-toggle="dropdown">Community</a>
                 <div purpose="header-dropdown" class="dropdown-menu">
+                  <span class="muted dropdown-header">ARTICLES</span>
                   <a class="dropdown-item mb-1" href="/announcements">Announcements</a>
                   <a class="dropdown-item mb-1" href="/securing">Security</a>
                   <a class="dropdown-item mb-1" href="/engineering">Engineering</a>