From 078a123da418480896a008e2be9146247651b17e Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Wed, 29 Nov 2023 12:52:05 +0530 Subject: [PATCH 1/2] Updated the navigation feature in sidebar based on the metedata configuration --- .../sidebar-navigation/sidebar-navigation.css | 24 ++++++++++ .../sidebar-navigation/sidebar-navigation.js | 2 + scripts/scripts.js | 46 +++++++++++++++++++ styles/Typo.css | 26 +++++++++++ styles/template.css | 16 +++---- 5 files changed, 106 insertions(+), 8 deletions(-) create mode 100644 blocks/sidebar-navigation/sidebar-navigation.css create mode 100644 blocks/sidebar-navigation/sidebar-navigation.js diff --git a/blocks/sidebar-navigation/sidebar-navigation.css b/blocks/sidebar-navigation/sidebar-navigation.css new file mode 100644 index 00000000..5aa97f11 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/blocks/sidebar-navigation/sidebar-navigation.js b/blocks/sidebar-navigation/sidebar-navigation.js new file mode 100644 index 00000000..5dcb6ec0 --- /dev/null +++ b/blocks/sidebar-navigation/sidebar-navigation.js @@ -0,0 +1,2 @@ +export default async function decorate(block) { +} \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index b7cfd509..9516a45b 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -87,6 +87,51 @@ 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; + } + } + 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 parentListItem = findParentListItem(headerElement, pathname); + return parentListItem; + } + return ''; +} + +async function decorateNavigation(main) { + console.log(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'); + } + } +} + /** * Builds embed block for inline links to known social platforms. * @param {Element} main The container element @@ -145,6 +190,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); } diff --git a/styles/Typo.css b/styles/Typo.css index b7c1f1c5..98b63ada 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -1732,3 +1732,29 @@ 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 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; +} diff --git a/styles/template.css b/styles/template.css index 2c60de7d..e4844fbd 100644 --- a/styles/template.css +++ b/styles/template.css @@ -573,19 +573,19 @@ 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; @@ -599,15 +599,15 @@ body.sidebar-50 #sidebar { text-decoration: underline } -#sidebar .hs-menu-wrapper ul ul { +#sidebar ul ul { display: none } -#sidebar .hs-menu-wrapper li.active-branch>ul { +#sidebar li.active-branch>ul { display: block } -#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 } From 70614af677c2147522aad2e60b0f8c83b6191569 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 30 Nov 2023 10:12:58 +0530 Subject: [PATCH 2/2] Updated the sidebar navigation --- .../sidebar-navigation/sidebar-navigation.js | 4 +-- scripts/scripts.js | 31 +++++++++---------- styles/Typo.css | 16 ++++++++++ styles/template.css | 12 +++---- templates/Blog/Blog.js | 9 ++++++ templates/Default/Default.js | 11 ++++++- templates/News/News.js | 9 ++++++ 7 files changed, 67 insertions(+), 25 deletions(-) diff --git a/blocks/sidebar-navigation/sidebar-navigation.js b/blocks/sidebar-navigation/sidebar-navigation.js index 5dcb6ec0..2a0fb622 100644 --- a/blocks/sidebar-navigation/sidebar-navigation.js +++ b/blocks/sidebar-navigation/sidebar-navigation.js @@ -1,2 +1,2 @@ -export default async function decorate(block) { -} \ No newline at end of file +export default function decorate() { +} diff --git a/scripts/scripts.js b/scripts/scripts.js index 9516a45b..efac4cab 100644 --- 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 index 98b63ada..bb49dcad 100644 --- 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 index e4844fbd..0e54f581 100644 --- 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 index 7edf4eab..1af2f192 100644 --- 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 index b03be77d..7b2c34ae 100644 --- 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 index 0485a1c3..e8e64c9c 100644 --- 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(); }