Merge pull request #3500 from ArmDeveloperEcosystem/header-footer-nav-update

Header footer nav update

Author: pareenaverma

assets/css/cross-page.css

@@ -175,12 +175,7 @@ table tbody td {
 /* CLS fix: reserve space for nav before hydration */
 arm-top-navigation:not(:defined) {
     display: block;
-    min-height: 80px;
-}
-@media (max-width: 1024px) {
-    arm-top-navigation:not(:defined) {
-        min-height: 60px;
-    }
+    min-height: 60px;
 }
 
 /* Fix global nav height */
@@ -189,23 +184,15 @@ arm-top-navigation:not(:defined) {
 /*************************************/
 #global-nav-height-fixer {
     max-width: 100vw;
-    height: 80px;
+    height: 60px;
     overflow: hidden;
     position: relative;
     top: 0;
 }
-@media (max-width: 1024px) { /* smaller screens than LG */
-        #global-nav-height-fixer {
-            height: 60px;
-        }
-}
-.nav-transparent {
-    background: transparent;
-    background-color: transparent;
-}
+.nav-transparent,
 .nav-black {
-    background: #010101;
-    background-color: #010101;  
+    background: var(--ads-ui-ink-100);
+    background-color: var(--ads-ui-ink-100);
 }
 
 /* Fix Masthead Height */

config.toml

@@ -73,6 +73,9 @@ github_project_repo = "https://github.com/ArmDeveloperEcosystem/arm-learning-pat
 # location of assets
 assetsDir = "assets"
 
+# Optionally override the global web components bundle for a specific deployment.
+# global_web_components_url = "https://www.arm.com/arm-global-web-components/devhub/app.js"
+
 # Specify a value here if your content directory is not in your repo's root directory
 # github_subdir = ""
 

themes/arm-design-system-hugo-theme/layouts/partials/footer/footer.html

@@ -9,5 +9,5 @@
 */}}
 
 <div id="arm-footer">
-  <arm-footer-navigation></arm-footer-navigation>
+  <arm-footer-navigation lang="en" theme="dark"></arm-footer-navigation>
 </div>

themes/arm-design-system-hugo-theme/layouts/partials/head/head.html

@@ -55,8 +55,17 @@
   integrity="sha384-caAG7P/HrHxcdQa2gTEfvZYGPLQk7yRwVdvtRn6sa3TRKzcAyY1LMvObXKGhwFNb"
   crossorigin="anonymous">
 </script>
-    <!-- Arm Header & Footer loading -->
-<script  type="text/javascript"  src="https://www.arm.com/arm-global-web-components/devhub/app.js" ></script>
+    <!-- Arm Header & Footer loading. Local development uses the test bundle;
+         production defaults to stable app.js unless a deployment explicitly overrides it. -->
+{{ $globalWebComponentsURL := .Site.Params.global_web_components_url | default "https://www.arm.com/arm-global-web-components/devhub/app.js" }}
+{{ if and hugo.IsServer (not .Site.Params.global_web_components_url) }}
+  {{ $globalWebComponentsURL = "https://www.arm.com/arm-global-web-components/devhub/test.js" }}
+{{ end }}
+<script
+  type="text/javascript"
+  src="{{ $globalWebComponentsURL }}"
+  defer>
+</script>
 
 
 

themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html

@@ -7,8 +7,16 @@
 
   <!-- No masthead on homepage, as that has a special gradient look/feel -->
   {{ if .IsHome }}
-     <div id="global-nav-height-fixer" class="nav-black">
-        <arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation> <!-- to set to all black all the time: observe="head" -->
+    <div id="global-nav-height-fixer" class="nav-black">
+        <arm-top-navigation
+          observe="#breadcrumb-element"
+          desktopbreakpoint="1200"
+          theme="dark"
+          hostname="learn.arm.com"
+          enable-ui-route="true"
+          lang="en"
+          disabled-subnav-animation>
+        </arm-top-navigation> <!-- to set to all black all the time: observe="head" -->
     </div>
     <div id="only-breadcrumb-masthead">
         <div class="is-responsive-width">
@@ -20,7 +28,15 @@
     <div id="nav-masthead-breadcrumbs">
         <!-- Global Nav -->
         <div id="global-nav-height-fixer" class="nav-transparent">
-            <arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation>
+            <arm-top-navigation
+              observe="#breadcrumb-element"
+              desktopbreakpoint="1200"
+              theme="dark"
+              hostname="learn.arm.com"
+              enable-ui-route="true"
+              lang="en"
+              disabled-subnav-animation>
+            </arm-top-navigation>
         </div>
         <!-- Masthead -->
         <div id="expanded-masthead" class="u-bg-color-ads-ui-violet-90">

themes/arm-design-system-hugo-theme/static/js/authentication.js

@@ -277,7 +277,7 @@ document.addEventListener('arm-account-signin', (event) => {
 
       const signInButton = shadowRoot.querySelector('.c-utility-navigation-login__sign-in-button');
     if (signInButton) {
-        signInButton.innerHTML = "Redirecting to login...";
+        signInButton.textContent = "Redirecting...";
     }
     else {
         console.log("Sign-in button not found in DOM.");