Feature/sidebar navigation

blocks/sidebar-navigation/sidebar-navigation.css

@@ -0,0 +1,24 @@
+.sidebar-navigation {
+    padding: 7%;
+    margin-top: 25px;
+    background-color: transparent;
+    border: none;
+    box-shadow: 0 2px 15px rgba(0 0 0 / 10%);
+    border-radius: 4px;
+    display: block;
+}
+
+.sidebar-navigation ul li::before {
+    content: ''!important;
+}
+
+.sidebar-navigation ul li {
+    padding-left: 0.5em 0 0.5em 0!important;
+    font-size: 16px!important;
+    color: #0d233e!important;
+}
+
+.sidebar-navigation ul li a {
+    font-size: 16px!important;
+    color: #0d233e!important;
+}

blocks/sidebar-navigation/sidebar-navigation.js

@@ -0,0 +1,2 @@
+export default function decorate() {
+}

scripts/scripts.js

@@ -87,6 +87,50 @@ async function decorateCategory(main) {
   }
 }
 
+function findParentListItem(content, url) {
+  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';
+  const resp = await fetch(`${navPath}.plain.html`);
+
+  if (resp.ok) {
+    const html = await resp.text();
+    const headerElement = document.createElement('div');
+    headerElement.innerHTML = html;
+    const lastUlElement = headerElement.querySelector('div > div > ul:last-child');
+    const parentListItem = findParentListItem(lastUlElement, pathname);
+    return parentListItem;
+  }
+  return '';
+}
+
+async function decorateNavigation(main) {
+  if (getMetadata('navigation')) {
+    const sidebarElement = main.querySelector('#sidebar');
+    const navigation = await getSubNavigation(window.location.pathname);
+    const block = await buildBlock('sidebar-navigation', navigation);
+    sidebarElement.prepend(block);
+    if (document.body.classList.contains('full-width')) {
+      document.body.classList.remove('full-width');
+    }
+  }
+}
+
 /**
  * Builds embed block for inline links to known social platforms.
  * @param {Element} main The container element
@@ -145,6 +189,7 @@ async function loadEager(doc) {
     decorateMain(main);
     await decorateTemplates(main);
     await decorateCategory(main);
+    await decorateNavigation(main);
     document.body.classList.add('appear');
     await waitForLCP(LCP_BLOCKS);
   }

styles/Typo.css

@@ -1732,3 +1732,45 @@ form.hs-form .hs-input[type="checkbox"] {
         width: auto;
     }
 }
+
+/* sidebar-navigation css */
+.sidebar-navigation {
+    padding: 7%;
+    margin-top: 25px;
+    background-color: transparent;
+    border: none;
+    box-shadow: 0 2px 15px rgba(0 0 0 / 10%);
+    border-radius: 4px;
+    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;
+}
+
+.sidebar-navigation ul li {
+    padding-left: 0.5em 0 0.5em 0!important;
+    font-size: 16px!important;
+    color: #0d233e!important;
+}
+
+.sidebar-navigation ul li a {
+    font-size: 16px!important;
+    color: #0d233e!important;
+}
+
+.sidebar-navigation a:hover {
+    text-decoration: underline!important;
+}

styles/template.css

@@ -514,7 +514,7 @@ body.full-width #sidebar {
     width: 26%;
 }
 
-#sidebar > div {
+#sidebar > div:first-child {
     margin-top: 0;
 }
 
@@ -573,23 +573,22 @@ body.sidebar-50 #sidebar {
     margin-top: 0
 }
 
-#sidebar .hs-menu-wrapper ul {
+#sidebar ul {
     padding: 0
 }
 
-#sidebar .hs-menu-wrapper li {
+#sidebar li {
     padding: 8px 0
 }
 
-#sidebar .hs-menu-wrapper li::before {
+#sidebar li::before {
     content: none
 }
 
-#sidebar .hs-menu-wrapper a {
+#sidebar a {
     color: #0d233e;
     display: block;
     font-size: 1em;
-    font-weight: 700;
     line-height: 1.2;
     padding: 0 10px;
     text-decoration: none
@@ -599,15 +598,16 @@ body.sidebar-50 #sidebar {
     text-decoration: underline
 }
 
-#sidebar .hs-menu-wrapper ul ul {
-    display: none
+#sidebar li.active-branch>ul {
+    display: block;
 }
 
-#sidebar .hs-menu-wrapper li.active-branch>ul {
-    display: block
+#sidebar .active-branch a {
+    display: block;
+    font-weight: 400;
 }
 
-#sidebar .hs-menu-wrapper ul ul li {
+#sidebar ul ul li {
     padding: 16px 0 0
 }
 
@@ -616,7 +616,7 @@ body.sidebar-50 #sidebar {
     font-weight: 400
 }
 
-#sidebar .hs-menu-wrapper .active>a {
+#sidebar .active>a {
     border-left: 3px solid #fac922;
     padding-left: 7px
 }

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();
 }

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();
 }

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();
 }