Added Search bar

src/lib/components/Navbar.svelte

@@ -1,13 +1,17 @@
 <script>
 	import NavbarList from "./NavbarList.svelte";
+
+	let searchterm = "";
+
 </script>
 
 <div class="container navbar">
 	<div class="row">
+		<input type="text" bind:value={searchterm} placeholder="Search Pages (Alpha)..." />
 		<div class="col-md-12">
 			<h2>Pages</h2>
 			<div class="navbar-links">
-				<NavbarList />
+				<NavbarList {searchterm} />
 			</div>
 		</div>
 	</div>

src/lib/components/NavbarList.svelte

@@ -1,6 +1,5 @@
 <script>
     // @ts-nocheck
-
     let data = import.meta.glob("/src/routes/**/+page.md");
     let paths = data;
 
@@ -36,7 +35,8 @@
         return nestedList;
     }
 
-    const nestedFolders = buildHierarchy(paths);
+    let nestedFolders = buildHierarchy(paths);
+    console.log(nestedFolders);
 
     function createHtmlList(obj, parentPath = "", depth = 0) {
         let html = "";
@@ -68,6 +68,31 @@
 
     //const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
     let renderedList = createHtmlList(nestedFolders);
+
+    function filterObject(obj, filterString) {
+        if (filterString === '') {
+            return obj; // If filterString is empty, return the original object
+        }
+
+        for (const key in obj) {
+            if (typeof obj[key] === 'object' && Object.keys(obj[key]).length > 0) {
+                obj[key] = filterObject(obj[key], filterString);
+                if (Object.keys(obj[key]).length === 0) {
+                    delete obj[key]; // Remove the branch if it becomes empty after filtering
+                }
+            } else if (!key.includes(filterString)) {
+                delete obj[key];
+            }
+        }
+        return obj;
+    }
+
+    export let searchterm;
+    $: {
+        nestedFolders = buildHierarchy(paths);
+        nestedFolders = filterObject(nestedFolders, searchterm);
+        renderedList = createHtmlList(nestedFolders);
+    }
 </script>
 
 {@html renderedList}

src/lib/styles/style.css

@@ -132,6 +132,15 @@ details a {
 	white-space: initial;
 }
 
+input {
+	background-color: var(--container-background-color);
+	border: 1px solid var(--container-background-color);
+	border-radius: 0.5rem;
+	padding: 0.5rem;
+	color: var(--text-color);
+	border: 3px solid var(--background-color);
+}
+
 @media screen and (max-width: 900px) {
 	.container {
 		flex-direction: column;