Jonas_Jones/wiki.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/wiki.jonasjones.dev.git synced 2025-10-22 22:09:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

add: collapsible list elements

Browse source
This commit is contained in:
J-onasJones 2023-09-18 20:17:02 +02:00
parent 315d13cde8
commit c3a2d44c66
1 changed files with 41 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/lib/components/Navbar.svelte
View file

@ -3,6 +3,7 @@
let data = import.meta.glob("/src/routes/**/+page.md"); let data = import.meta.glob("/src/routes/**/+page.md");
let paths = data; let paths = data;
export let items;
/** /**
* @param {Record<string, () => Promise<unknown>>} paths * @param {Record<string, () => Promise<unknown>>} paths
@ -37,24 +38,52 @@
} }
const nestedFolders = buildHierarchy(paths); const nestedFolders = buildHierarchy(paths);
console.log(nestedFolders)
// Helper function to recursively render the nested list // Helper function to recursively render the nested list
/** /**
* @param {{ [x: string]: any; }} node * @param {{ [x: string]: any; }} node
*/ */
function renderNestedList(node, prefix = "") { // function renderNestedList(node, prefix = "") {
return Object.keys(node) // return Object.keys(node)
.map((key) => { // .map((key) => {
const fullPath = `${prefix}/${key}`; // const fullPath = `${prefix}/${key}`;
return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList( // return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList(
node[key], // node[key],
fullPath // fullPath
)}</ul></li>`; // )}</ul></li>`;
}) // })
.join(""); // .join("");
} // }
function createHtmlList(obj, parentPath = '') {
let html = '';
for (const key in obj) {
const currentPath = parentPath ? `${parentPath}/${key}` : key;
if (typeof obj[key] === 'object' && Object.keys(obj[key]).length > 0) {
// If the value is an object and not empty, create a nested div
html += `
<details>
<summary><a href="/${currentPath}">${key}</a></summary>
<ul>
${createHtmlList(obj[key], currentPath)}
</ul>
</details>
`;
} else {
// If the value is not an object or empty, create a clickable list item
html += `<li><a href="/${currentPath}">${key}</a></li>`;
}
}
return html;
}
//const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
const renderedList = createHtmlList(nestedFolders);
const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
</script> </script>
<div class="container navbar"> <div class="container navbar">