adding top and middle nav (#41)

* adding top and middle nav * review changes
hlxsites · Sep 21, 2023 · d59435a · d59435a
1 parent 0549256
commit d59435a
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 34 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -474,10 +474,10 @@ header form.search button.search-icon {
   right: 16px;
 }
 
-/* Lang picker Styles */
+/* picker Styles */
 
 /* stylelint-disable-next-line no-descending-specificity */
-header .lang-picker > a::after {
+header .picker > a::after {
   content: "";
   height: 1rem;
   width: 0.75rem;
@@ -492,7 +492,7 @@ header .lang-picker > a::after {
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-header .lang-picker > ul {
+header .picker > ul {
   display: none;
   color: var(--link-color);
   position: absolute;
@@ -514,12 +514,19 @@ header .lang-picker > ul {
   min-width: 10rem;
 }
 
-header .lang-picker:hover > ul {
+header .picker {
+  position: relative;
+  padding: 1rem 0;
+}
+
+header .picker:hover > ul {
   display: block;
 }
 
+/* PickerItem styles */
+
 /* stylelint-disable-next-line no-descending-specificity */
-header .lang-picker-item > a {
+header .picker-item > a {
   font-size: var(--body-font-size-s);
   font-weight: var(--font-weight-medium);
   color: var(--white);
@@ -528,10 +535,44 @@ header .lang-picker-item > a {
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-header .lang-picker-item > a:hover {
+header .picker-item > a:hover {
   background: var(--primary);
 }
 
+/* WebsitePicker Styles */
+
+/* stylelint-disable-next-line no-descending-specificity */
+header .website-picker > ul {
+  min-width: 12.5rem;
+}
+
+header .website-picker {
+  padding-left: 0.2rem;
+}
+
+/* WesbitePickerItem Styles */
+
+/* stylelint-disable-next-line no-descending-specificity */
+header .website-picker-item > a::after {
+    content: "";
+    display: inline-block;
+    height: 18px;
+    width: 18px;
+    margin-left: 2px;
+    margin-top: 0;
+    position: relative;
+    top: 4px;
+    background-image: url("../../icons/link-white.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain
+}
+
+/* LangPicker Styles */
+header .lang-picker {
+  padding-left: 2.1rem;
+}
+
 header .nav-bottom .other-items .mobile-lang-picker {
   padding: 0;
 }
@@ -553,11 +594,6 @@ header .nav-bottom .other-items .mobile-lang-picker .mobile-lang-picker-item a {
   letter-spacing: -0.4px;
 }
 
-header .lang-picker {
-  position: relative;
-  padding: 1rem 0;
-}
-
 @media (min-width: 77rem) {
   header {
     border-bottom: 1px solid var(--transparent-grey-light-color);

diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -9,27 +9,29 @@ import
   decorateAnchors,
 } from '../../scripts/scripts.js';
 
-function decorateSocial(social) {
-  social.classList.add('social');
-  social.innerHTML = social.innerHTML.replace(/\[social\]/, '');
-  social.querySelectorAll(':scope>ul>li').forEach((li) => {
-    const a = li.querySelector('a');
-    a.setAttribute('target', '_blank');
-    if (a.innerHTML.includes('linkedin')) {
-      a.setAttribute('aria-label', 'LinkedIn');
-    } else if (a.innerHTML.includes('twitter')) {
-      a.setAttribute('aria-label', 'Twitter');
-    } else if (a.innerHTML.includes('facebook')) {
-      a.setAttribute('aria-label', 'Facebook');
-    } else if (a.innerHTML.includes('youtube')) {
-      a.setAttribute('aria-label', 'YouTube');
-    }
+async function decorateWebsitePicker(websitePicker) {
+  websitePicker.classList.add('picker');
+  websitePicker.classList.add('website-picker');
+  websitePicker.innerHTML = websitePicker.innerHTML.replace(/\[websites\]/, '');
+  const title = 'Sunstar Websites';
+  websitePicker.querySelectorAll(':scope>ul>li').forEach((li) => {
+    li.classList.add('picker-item');
+    li.classList.add('website-picker-item');
   });
+
+  const a = document.createElement('a');
+  a.textContent = title;
+  websitePicker.prepend(a);
+
+  if (websitePicker.querySelectorAll(':scope>ul>li').length === 0 && websitePicker.querySelector('ul')) {
+    websitePicker.querySelector('ul').remove();
+  }
 }
 
 async function decorateLangPicker(langPicker) {
   const lang = getLanguage() || '';
   let langName = 'English'; // default to English
+  langPicker.classList.add('picker');
   langPicker.classList.add('lang-picker');
   langPicker.innerHTML = langPicker.innerHTML.replace(/\[languages\]/, '');
 
@@ -39,6 +41,7 @@ async function decorateLangPicker(langPicker) {
   const json = await fetchIndex('query-index');
 
   langPicker.querySelectorAll(':scope>ul>li').forEach((li) => {
+    li.classList.add('picker-item');
     li.classList.add('lang-picker-item');
     // Update the language links to point to the current path
     let langRoot = li.querySelector('a').getAttribute('href');
@@ -66,7 +69,6 @@ async function decorateLangPicker(langPicker) {
   });
 
   const a = document.createElement('a');
-  a.setAttribute('href', '#');
   a.textContent = langName;
   langPicker.prepend(a);
 
@@ -177,10 +179,10 @@ function buildDropDownMenu(l1menuItem, placeholders) {
 
 function decorateTopNav(nav) {
   nav.querySelectorAll(':scope>ul>li').forEach((li) => {
-    if (li.textContent.trim() === '[social]') {
-      decorateSocial(li);
-    } else if (li.textContent.includes('[languages]')) {
+    if (li.textContent.includes('[languages]')) {
       decorateLangPicker(li);
+    } else if (li.textContent.includes('[websites]')) {
+      decorateWebsitePicker(li);
     }
   });
 }
@@ -212,9 +214,6 @@ function decorateOtherItems(otherItemsEl) {
   });
 
   otherItemsEl.querySelector('.lang-picker').replaceWith(langPicker);
-
-  /* Move the social icons to the bottom */
-  otherItemsEl.appendChild(otherItemsEl.querySelector('.social'));
 }
 
 function decorateBottomNav(nav, placeholders) {
@@ -280,7 +279,7 @@ const navDecorators = { 'nav-top': decorateTopNav, 'nav-middle': decorateMiddleN
 export default async function decorate(block) {
   // fetch nav content
   const navMeta = getMetadata('nav');
-  const navPath = navMeta || (getLanguage() === 'en' ? '/nav' : `/${getLanguage()}/nav`);
+  const navPath = navMeta || (getLanguage() === 'en' ? '/_drafts/himanshu/nav' : `/${getLanguage()}/nav`);
   const resp = await fetch(`${navPath}.plain.html`);
 
   if (resp.ok) {