Updated the sidebar navigation

hlxsites · Nov 30, 2023 · 70614af · 70614af
1 parent 078a123
commit 70614af
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 25 deletions.
diff --git a/blocks/sidebar-navigation/sidebar-navigation.js b/blocks/sidebar-navigation/sidebar-navigation.js
@@ -1,2 +1,2 @@
-export default async function decorate(block) {
-}
+export default function decorate() {
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -88,19 +88,21 @@ async function decorateCategory(main) {
 }
 
 function findParentListItem(content, url) {
-  const divContainer = content.querySelector('div');
-  const anchorTags = divContainer.querySelectorAll('a');
-  for (let anchor of anchorTags) {
-      if (anchor.getAttribute('href') === url) {
-        anchor.parentElement.classList.add('active');
-          const parentListItem = anchor.closest('ul');
-          return parentListItem;
-      }
+  const matchingChild = Array.from(content.children).find((child) => !!child.querySelector(`a[href="${url}"]`));
+  if (matchingChild) {
+    const element = matchingChild.querySelector(`a[href="${url}"]`);
+    const elementParent = element.closest('li');
+    if (elementParent) {
+      elementParent.classList.add('active');
+      Array.from(elementParent.parentNode.children).forEach((sibling) => {
+        sibling.style.display = 'block';
+      });
+    }
+    return matchingChild.querySelector('ul') || null;
   }
   return null;
 }
 
-
 async function getSubNavigation(pathname) {
   const navMeta = getMetadata('nav');
   const navPath = navMeta ? new URL(navMeta).pathname : '/nav';
@@ -109,23 +111,20 @@ async function getSubNavigation(pathname) {
   if (resp.ok) {
     const html = await resp.text();
     const headerElement = document.createElement('div');
-    headerElement.innerHTML = html
-    const parentListItem = findParentListItem(headerElement, pathname);
+    headerElement.innerHTML = html;
+    const lastUlElement = headerElement.querySelector('div > div > ul:last-child');
+    const parentListItem = findParentListItem(lastUlElement, pathname);
     return parentListItem;
   }
   return '';
 }
 
 async function decorateNavigation(main) {
-  console.log(getMetadata('navigation'));
-  if(getMetadata('navigation')) {
+  if (getMetadata('navigation')) {
     const sidebarElement = main.querySelector('#sidebar');
-    console.log(sidebarElement);
-    console.log(window.location.href);
     const navigation = await getSubNavigation(window.location.pathname);
     const block = await buildBlock('sidebar-navigation', navigation);
     sidebarElement.prepend(block);
-    console.log(sidebarElement);
     if (document.body.classList.contains('full-width')) {
       document.body.classList.remove('full-width');
     }

diff --git a/styles/Typo.css b/styles/Typo.css
@@ -1744,6 +1744,18 @@ form.hs-form .hs-input[type="checkbox"] {
     display: block;
 }
 
+.sidebar-navigation ul {
+    font-weight: 700;
+}
+
+.sidebar-navigation ul ul {
+    font-weight: 400;
+}
+
+.sidebar-navigation ul ul li {
+    display: none;
+}
+
 .sidebar-navigation ul li::before {
     content: ''!important;
 }
@@ -1758,3 +1770,7 @@ form.hs-form .hs-input[type="checkbox"] {
     font-size: 16px!important;
     color: #0d233e!important;
 }
+
+.sidebar-navigation a:hover {
+    text-decoration: underline!important;
+}
diff --git a/styles/template.css b/styles/template.css
@@ -514,7 +514,7 @@ body.full-width #sidebar {
     width: 26%;
 }
 
-#sidebar > div {
+#sidebar > div:first-child {
     margin-top: 0;
 }
 
@@ -589,7 +589,6 @@ body.sidebar-50 #sidebar {
     color: #0d233e;
     display: block;
     font-size: 1em;
-    font-weight: 700;
     line-height: 1.2;
     padding: 0 10px;
     text-decoration: none
@@ -599,12 +598,13 @@ body.sidebar-50 #sidebar {
     text-decoration: underline
 }
 
-#sidebar ul ul {
-    display: none
+#sidebar li.active-branch>ul {
+    display: block;
 }
 
-#sidebar li.active-branch>ul {
-    display: block
+#sidebar .active-branch a {
+    display: block;
+    font-weight: 400;
 }
 
 #sidebar ul ul li {

diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js
@@ -361,6 +361,15 @@ export default async function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
+  const observer = new MutationObserver(() => {
+    setSidebarMaxHeight();
+  });
+  observer.observe(sidebar, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    characterData: true,
+  });
   setSidebarMaxHeight();
   setSidebarHeight();
 }
diff --git a/templates/Default/Default.js b/templates/Default/Default.js
@@ -67,6 +67,15 @@ export default function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
-  setTimeout(() => { setSidebarMaxHeight(); }, 1000);
+  const observer = new MutationObserver(() => {
+    setSidebarMaxHeight();
+  });
+  observer.observe(sidebar, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    characterData: true,
+  });
+  setSidebarMaxHeight();
   setSidebarHeight();
 }
diff --git a/templates/News/News.js b/templates/News/News.js
@@ -358,6 +358,15 @@ export default async function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
+  const observer = new MutationObserver(() => {
+    setSidebarMaxHeight();
+  });
+  observer.observe(sidebar, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    characterData: true,
+  });
   setSidebarMaxHeight();
   setSidebarHeight();
 }