Code Refactor and Style adjustments

- Refactored Code
- Adjusted hierarchy bullet point text sizes

src/lib/components/Navbar.svelte

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