From abf7de6bcaa8df3051f2cbc9a7c37bf76af8951a Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 22 Aug 2025 13:30:26 +0100
Subject: [PATCH 1/6] Experimenting with sidebar search

---
 src/components/overrides/Sidebar.astro | 226 +++++++++++++++++++++++++
 1 file changed, 226 insertions(+)

diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 90d43917fe0ac67..98be87eab8af18d 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -16,9 +16,235 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 	</span>
 </a>
 
+<!-- Search Input -->
+<div class="sidebar-search-container">
+	<input
+		type="text"
+		id="sidebar-search"
+		placeholder="Search documentation..."
+		class="sidebar-search-input"
+	/>
+</div>
+
 <Default><slot /></Default>
 
+<script>
+	/**
+	 * Debounce delay for search input (milliseconds)
+	 */
+	const SEARCH_DEBOUNCE_DELAY = 150;
+
+	/**
+	 * CSS selectors for sidebar elements
+	 */
+	const SELECTORS = {
+		searchInput: '#sidebar-search',
+		sidebarContent: '.sidebar-content',
+		listItems: 'li',
+		detailsGroups: 'details',
+		links: 'a',
+		summaries: 'summary'
+	} as const;
+
+	/**
+	 * Initialize sidebar search functionality
+	 */
+	function initSidebarSearch(): void {
+		const searchInput = document.getElementById('sidebar-search') as HTMLInputElement;
+		if (!searchInput) {
+			console.warn('Sidebar search input not found');
+			return;
+		}
+
+		let debounceTimer: number;
+
+		// Handle search input with debouncing
+		searchInput.addEventListener('input', (event) => {
+			clearTimeout(debounceTimer);
+			debounceTimer = window.setTimeout(() => {
+				const target = event.target as HTMLInputElement;
+				const searchQuery = target.value.toLowerCase().trim();
+				filterSidebarItems(searchQuery);
+			}, SEARCH_DEBOUNCE_DELAY);
+		});
+
+		// Handle escape key to clear search
+		searchInput.addEventListener('keydown', (event) => {
+			if (event.key === 'Escape') {
+				searchInput.value = '';
+				filterSidebarItems('');
+			}
+		});
+	}
+
+	/**
+	 * Check if an element's text content matches the search query
+	 */
+	function elementMatchesQuery(element: Element | null, query: string): boolean {
+		if (!element || !element.textContent) return false;
+		return element.textContent.toLowerCase().includes(query);
+	}
+
+	/**
+	 * Show or hide a sidebar item
+	 */
+	function toggleItemVisibility(item: HTMLElement, isVisible: boolean): void {
+		item.style.display = isVisible ? '' : 'none';
+	}
+
+	/**
+	 * Mark parent groups as visible and expand them
+	 */
+	function expandParentGroups(item: Element, visibleGroups: Set<Element>): void {
+		let currentParent = item.parentElement;
+
+		while (currentParent) {
+			if (currentParent.tagName === 'DETAILS') {
+				visibleGroups.add(currentParent);
+				(currentParent as HTMLDetailsElement).open = true;
+			}
+			currentParent = currentParent.parentElement;
+		}
+	}
+
+	/**
+	 * Reset all sidebar items to visible state
+	 */
+	function showAllSidebarItems(sidebarContent: Element): void {
+		const allItems = sidebarContent.querySelectorAll(SELECTORS.listItems);
+		const allGroups = sidebarContent.querySelectorAll(SELECTORS.detailsGroups);
+
+		allItems.forEach(item => toggleItemVisibility(item as HTMLElement, true));
+		allGroups.forEach(group => toggleItemVisibility(group as HTMLElement, true));
+	}
+
+	/**
+	 * Check if a sidebar item matches the search query
+	 */
+	function itemMatchesSearch(item: Element, query: string): boolean {
+		// Check direct link text (individual pages/chapters)
+		const directLink = item.querySelector(SELECTORS.links);
+		if (elementMatchesQuery(directLink, query)) {
+			return true;
+		}
+
+		// Check group/folder names
+		const summary = item.querySelector(SELECTORS.summaries);
+		if (elementMatchesQuery(summary, query)) {
+			return true;
+		}
+
+		// Check nested links for comprehensive matching
+		const nestedLinks = item.querySelectorAll(SELECTORS.links);
+		for (const nestedLink of nestedLinks) {
+			if (elementMatchesQuery(nestedLink, query)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Filter sidebar items based on search query
+	 */
+	function filterSidebarItems(query: string): void {
+		const sidebarContent = document.querySelector(SELECTORS.sidebarContent);
+		if (!sidebarContent) {
+			console.warn('Sidebar content not found');
+			return;
+		}
+
+		// If no query, show all items
+		if (!query) {
+			showAllSidebarItems(sidebarContent);
+			return;
+		}
+
+		const allItems = sidebarContent.querySelectorAll(SELECTORS.listItems);
+		const allGroups = sidebarContent.querySelectorAll(SELECTORS.detailsGroups);
+		const visibleGroups = new Set<Element>();
+		const matchingFolders = new Set<Element>();
+
+		// First pass: identify folders that match the query
+		allGroups.forEach(group => {
+			const summary = group.querySelector(SELECTORS.summaries);
+			if (elementMatchesQuery(summary, query)) {
+				matchingFolders.add(group);
+				visibleGroups.add(group);
+				(group as HTMLDetailsElement).open = true;
+			}
+		});
+
+		// Process each sidebar item
+		allItems.forEach(item => {
+			let shouldShowItem = false;
+
+			// Check if this item is inside a matching folder
+			let parentGroup = item.closest(SELECTORS.detailsGroups);
+			if (parentGroup && matchingFolders.has(parentGroup)) {
+				shouldShowItem = true;
+			} else {
+				// Otherwise, check if the individual item matches
+				shouldShowItem = itemMatchesSearch(item, query);
+			}
+
+			toggleItemVisibility(item as HTMLElement, shouldShowItem);
+
+			if (shouldShowItem) {
+				expandParentGroups(item, visibleGroups);
+			}
+		});
+
+		// Hide empty groups that don't contain visible items
+		allGroups.forEach(group => {
+			if (!visibleGroups.has(group)) {
+				const visibleChildren = group.querySelectorAll('li:not([style*="display: none"])');
+				const hasVisibleChildren = visibleChildren.length > 0;
+				toggleItemVisibility(group as HTMLElement, hasVisibleChildren);
+			} else {
+				toggleItemVisibility(group as HTMLElement, true);
+			}
+		});
+	}
+
+	// Initialize search functionality when DOM is ready
+	document.addEventListener('DOMContentLoaded', initSidebarSearch);
+
+	// Re-initialize on Astro page navigation for SPA-like behavior
+	document.addEventListener('astro:page-load', initSidebarSearch);
+</script>
+
 <style is:global>
+	/* Search Input Styling */
+	.sidebar-search-container {
+		position: relative;
+		margin: 1rem 0;
+		padding: 0 var(--sl-sidebar-item-padding-inline);
+	}
+
+	.sidebar-search-input {
+		width: 100%;
+		padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+		border: 1px solid var(--sl-color-hairline-light);
+		border-radius: 0.375rem;
+		background: var(--sl-color-bg-sidebar);
+		color: var(--sl-color-text);
+		font-size: 0.875rem;
+		transition: border-color 0.2s ease, box-shadow 0.2s ease;
+	}
+
+	.sidebar-search-input:focus {
+		outline: none;
+		border-color: var(--sl-color-accent);
+		box-shadow: 0 0 0 2px #F6821F;
+	}
+
+	.sidebar-search-input::placeholder {
+		color: var(--sl-color-gray-3);
+	}
+
+
 	:root {
 		.sidebar-content {
 			--sl-color-hairline-light: #cacaca !important;

From 183bf6aba6c43796f4c44897925bb35fb43ed7fa Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 22 Aug 2025 13:54:40 +0100
Subject: [PATCH 2/6] Update

---
 src/components/overrides/Sidebar.astro | 36 +++-----------------------
 1 file changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 98be87eab8af18d..b91d13315ab99b4 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -17,15 +17,15 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 </a>
 
 <!-- Search Input -->
-<div class="sidebar-search-container">
+<div class="relative my-4">
 	<input
 		type="text"
 		id="sidebar-search"
 		placeholder="Search documentation..."
-		class="sidebar-search-input"
+		class="w-full py-2 px-2 text-sm border rounded-md transition-all duration-300 ease-in-out hover:shadow-md focus:outline-none focus:border-[#F6821F] focus:ring-2 focus:ring-[#F6821F] focus:shadow-lg"
+		style="border-color: var(--sl-color-hairline-light); background: var(--sl-color-bg-sidebar); color: var(--sl-color-text);"
 	/>
 </div>
-
 <Default><slot /></Default>
 
 <script>
@@ -181,7 +181,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 			let shouldShowItem = false;
 
 			// Check if this item is inside a matching folder
-			let parentGroup = item.closest(SELECTORS.detailsGroups);
+			const parentGroup = item.closest(SELECTORS.detailsGroups);
 			if (parentGroup && matchingFolders.has(parentGroup)) {
 				shouldShowItem = true;
 			} else {
@@ -216,34 +216,6 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 </script>
 
 <style is:global>
-	/* Search Input Styling */
-	.sidebar-search-container {
-		position: relative;
-		margin: 1rem 0;
-		padding: 0 var(--sl-sidebar-item-padding-inline);
-	}
-
-	.sidebar-search-input {
-		width: 100%;
-		padding: 0.5rem 0.75rem 0.5rem 0.5rem;
-		border: 1px solid var(--sl-color-hairline-light);
-		border-radius: 0.375rem;
-		background: var(--sl-color-bg-sidebar);
-		color: var(--sl-color-text);
-		font-size: 0.875rem;
-		transition: border-color 0.2s ease, box-shadow 0.2s ease;
-	}
-
-	.sidebar-search-input:focus {
-		outline: none;
-		border-color: var(--sl-color-accent);
-		box-shadow: 0 0 0 2px #F6821F;
-	}
-
-	.sidebar-search-input::placeholder {
-		color: var(--sl-color-gray-3);
-	}
-
 
 	:root {
 		.sidebar-content {

From 2780318eda6e9699716a41934ea5a83b839310cc Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 22 Aug 2025 14:10:41 +0100
Subject: [PATCH 3/6] Removing bells and whistles

---
 src/components/overrides/Sidebar.astro | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index b91d13315ab99b4..855c6036e9cf58a 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -22,7 +22,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		type="text"
 		id="sidebar-search"
 		placeholder="Search documentation..."
-		class="w-full py-2 px-2 text-sm border rounded-md transition-all duration-300 ease-in-out hover:shadow-md focus:outline-none focus:border-[#F6821F] focus:ring-2 focus:ring-[#F6821F] focus:shadow-lg"
+		class="w-full py-2 px-2 text-sm border rounded-md transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 sidebar-search-input"
 		style="border-color: var(--sl-color-hairline-light); background: var(--sl-color-bg-sidebar); color: var(--sl-color-text);"
 	/>
 </div>
@@ -46,6 +46,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		summaries: 'summary'
 	} as const;
 
+
 	/**
 	 * Initialize sidebar search functionality
 	 */
@@ -77,6 +78,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		});
 	}
 
+
 	/**
 	 * Check if an element's text content matches the search query
 	 */
@@ -216,6 +218,10 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 </script>
 
 <style is:global>
+	.sidebar-search-input:focus {
+		border-color: var(--sl-color-accent) !important;
+		--tw-ring-color: var(--sl-color-accent);
+	}
 
 	:root {
 		.sidebar-content {

From 4493aabd90df4025bc71799f49c251df3d38e6a1 Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 22 Aug 2025 15:59:36 +0100
Subject: [PATCH 4/6] Improving search result

---
 src/components/overrides/Sidebar.astro | 50 ++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 855c6036e9cf58a..2d8b3e97f8133e4 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -147,6 +147,25 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		return false;
 	}
 
+	/**
+	 * Show all contents within a matching folder (including nested folders)
+	 */
+	function showAllContentsInFolder(folder: Element, visibleGroups: Set<Element>): void {
+		// Show all list items within this folder
+		const allItemsInFolder = folder.querySelectorAll(SELECTORS.listItems);
+		allItemsInFolder.forEach(item => {
+			toggleItemVisibility(item as HTMLElement, true);
+		});
+
+		// Show and expand all nested folders within this folder
+		const nestedGroups = folder.querySelectorAll(SELECTORS.detailsGroups);
+		nestedGroups.forEach(nestedGroup => {
+			visibleGroups.add(nestedGroup);
+			toggleItemVisibility(nestedGroup as HTMLElement, true);
+			(nestedGroup as HTMLDetailsElement).open = true;
+		});
+	}
+
 	/**
 	 * Filter sidebar items based on search query
 	 */
@@ -167,6 +186,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		const allGroups = sidebarContent.querySelectorAll(SELECTORS.detailsGroups);
 		const visibleGroups = new Set<Element>();
 		const matchingFolders = new Set<Element>();
+		const itemsInMatchingFolders = new Set<Element>();
 
 		// First pass: identify folders that match the query
 		allGroups.forEach(group => {
@@ -175,6 +195,12 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 				matchingFolders.add(group);
 				visibleGroups.add(group);
 				(group as HTMLDetailsElement).open = true;
+				// Show all contents within this matching folder
+				showAllContentsInFolder(group, visibleGroups);
+				
+				// Track all items within this matching folder
+				const itemsInFolder = group.querySelectorAll(SELECTORS.listItems);
+				itemsInFolder.forEach(item => itemsInMatchingFolders.add(item));
 			}
 		});
 
@@ -183,8 +209,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 			let shouldShowItem = false;
 
 			// Check if this item is inside a matching folder
-			const parentGroup = item.closest(SELECTORS.detailsGroups);
-			if (parentGroup && matchingFolders.has(parentGroup)) {
+			if (itemsInMatchingFolders.has(item)) {
 				shouldShowItem = true;
 			} else {
 				// Otherwise, check if the individual item matches
@@ -198,12 +223,25 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 			}
 		});
 
-		// Hide empty groups that don't contain visible items
+		// Handle nested groups visibility
 		allGroups.forEach(group => {
 			if (!visibleGroups.has(group)) {
-				const visibleChildren = group.querySelectorAll('li:not([style*="display: none"])');
-				const hasVisibleChildren = visibleChildren.length > 0;
-				toggleItemVisibility(group as HTMLElement, hasVisibleChildren);
+				// Check if this group is inside a matching folder
+				const parentMatchingFolder = Array.from(matchingFolders).find(folder => 
+					folder.contains(group)
+				);
+				
+				if (parentMatchingFolder) {
+					// This group is inside a matching folder, so it should be visible
+					visibleGroups.add(group);
+					toggleItemVisibility(group as HTMLElement, true);
+					(group as HTMLDetailsElement).open = true;
+				} else {
+					// Check if it has visible children
+					const visibleChildren = group.querySelectorAll('li:not([style*="display: none"])');
+					const hasVisibleChildren = visibleChildren.length > 0;
+					toggleItemVisibility(group as HTMLElement, hasVisibleChildren);
+				}
 			} else {
 				toggleItemVisibility(group as HTMLElement, true);
 			}

From 789ebeab6f61b151d32da5a3ae4a2e6624dc76ba Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 22 Aug 2025 16:40:10 +0100
Subject: [PATCH 5/6] Enhancing code logic

---
 src/components/overrides/Sidebar.astro | 70 ++++++--------------------
 1 file changed, 15 insertions(+), 55 deletions(-)

diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 2d8b3e97f8133e4..186d32fb7306fe3 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -38,7 +38,6 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 	 * CSS selectors for sidebar elements
 	 */
 	const SELECTORS = {
-		searchInput: '#sidebar-search',
 		sidebarContent: '.sidebar-content',
 		listItems: 'li',
 		detailsGroups: 'details',
@@ -124,27 +123,17 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 	 * Check if a sidebar item matches the search query
 	 */
 	function itemMatchesSearch(item: Element, query: string): boolean {
-		// Check direct link text (individual pages/chapters)
-		const directLink = item.querySelector(SELECTORS.links);
-		if (elementMatchesQuery(directLink, query)) {
-			return true;
-		}
-
-		// Check group/folder names
-		const summary = item.querySelector(SELECTORS.summaries);
-		if (elementMatchesQuery(summary, query)) {
-			return true;
-		}
-
-		// Check nested links for comprehensive matching
-		const nestedLinks = item.querySelectorAll(SELECTORS.links);
-		for (const nestedLink of nestedLinks) {
-			if (elementMatchesQuery(nestedLink, query)) {
+		// Check direct link text and nested links
+		const allLinks = item.querySelectorAll(SELECTORS.links);
+		for (const link of allLinks) {
+			if (elementMatchesQuery(link, query)) {
 				return true;
 			}
 		}
 
-		return false;
+		// Check group/folder names
+		const summary = item.querySelector(SELECTORS.summaries);
+		return elementMatchesQuery(summary, query);
 	}
 
 	/**
@@ -185,37 +174,22 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		const allItems = sidebarContent.querySelectorAll(SELECTORS.listItems);
 		const allGroups = sidebarContent.querySelectorAll(SELECTORS.detailsGroups);
 		const visibleGroups = new Set<Element>();
-		const matchingFolders = new Set<Element>();
 		const itemsInMatchingFolders = new Set<Element>();
 
-		// First pass: identify folders that match the query
+		// First pass: identify matching folders and their contents
 		allGroups.forEach(group => {
 			const summary = group.querySelector(SELECTORS.summaries);
 			if (elementMatchesQuery(summary, query)) {
-				matchingFolders.add(group);
 				visibleGroups.add(group);
 				(group as HTMLDetailsElement).open = true;
-				// Show all contents within this matching folder
 				showAllContentsInFolder(group, visibleGroups);
-				
-				// Track all items within this matching folder
-				const itemsInFolder = group.querySelectorAll(SELECTORS.listItems);
-				itemsInFolder.forEach(item => itemsInMatchingFolders.add(item));
+				group.querySelectorAll(SELECTORS.listItems).forEach(item => itemsInMatchingFolders.add(item));
 			}
 		});
 
 		// Process each sidebar item
 		allItems.forEach(item => {
-			let shouldShowItem = false;
-
-			// Check if this item is inside a matching folder
-			if (itemsInMatchingFolders.has(item)) {
-				shouldShowItem = true;
-			} else {
-				// Otherwise, check if the individual item matches
-				shouldShowItem = itemMatchesSearch(item, query);
-			}
-
+			const shouldShowItem = itemsInMatchingFolders.has(item) || itemMatchesSearch(item, query);
 			toggleItemVisibility(item as HTMLElement, shouldShowItem);
 
 			if (shouldShowItem) {
@@ -223,27 +197,13 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 			}
 		});
 
-		// Handle nested groups visibility
+		// Handle groups visibility
 		allGroups.forEach(group => {
-			if (!visibleGroups.has(group)) {
-				// Check if this group is inside a matching folder
-				const parentMatchingFolder = Array.from(matchingFolders).find(folder => 
-					folder.contains(group)
-				);
-				
-				if (parentMatchingFolder) {
-					// This group is inside a matching folder, so it should be visible
-					visibleGroups.add(group);
-					toggleItemVisibility(group as HTMLElement, true);
-					(group as HTMLDetailsElement).open = true;
-				} else {
-					// Check if it has visible children
-					const visibleChildren = group.querySelectorAll('li:not([style*="display: none"])');
-					const hasVisibleChildren = visibleChildren.length > 0;
-					toggleItemVisibility(group as HTMLElement, hasVisibleChildren);
-				}
-			} else {
+			if (visibleGroups.has(group)) {
 				toggleItemVisibility(group as HTMLElement, true);
+			} else {
+				const hasVisibleChildren = group.querySelectorAll('li:not([style*="display: none"])').length > 0;
+				toggleItemVisibility(group as HTMLElement, hasVisibleChildren);
 			}
 		});
 	}

From 00ae49bee069035cfae4585ea1c084ff19f78c6f Mon Sep 17 00:00:00 2001
From: Jun Lee <junlee@cloudflare.com>
Date: Fri, 22 Aug 2025 17:22:38 +0100
Subject: [PATCH 6/6] Adding no result returned message

---
 src/components/overrides/Sidebar.astro | 49 +++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 186d32fb7306fe3..11285f9151599d4 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -26,6 +26,16 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		style="border-color: var(--sl-color-hairline-light); background: var(--sl-color-bg-sidebar); color: var(--sl-color-text);"
 	/>
 </div>
+
+<!-- No Results Message -->
+<div id="no-results-message" class="p-4 text-center rounded-md my-2 border" style="display: none; background-color: var(--sl-color-bg-sidebar); border-color: var(--sl-color-hairline-light);">
+	<p class="mb-1 font-semibold text-sm" style="color: var(--sl-color-text);">No results found</p>
+	<p class="m-0 text-xs" style="color: var(--sl-color-text-accent);">
+		Try a different search term, or
+		<button id="global-search-link" class="underline cursor-pointer" style="color: var(--sl-color-accent); background: none; border: none; padding: 0; font: inherit;">use our global search</button>.
+	</p>
+</div>
+
 <Default><slot /></Default>
 
 <script>
@@ -42,7 +52,8 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		listItems: 'li',
 		detailsGroups: 'details',
 		links: 'a',
-		summaries: 'summary'
+		summaries: 'summary',
+		noResultsMessage: '#no-results-message'
 	} as const;
 
 
@@ -117,6 +128,12 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 
 		allItems.forEach(item => toggleItemVisibility(item as HTMLElement, true));
 		allGroups.forEach(group => toggleItemVisibility(group as HTMLElement, true));
+
+		// Hide no results message
+		const noResultsMessage = document.querySelector(SELECTORS.noResultsMessage) as HTMLElement;
+		if (noResultsMessage) {
+			noResultsMessage.style.display = 'none';
+		}
 	}
 
 	/**
@@ -206,6 +223,35 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 				toggleItemVisibility(group as HTMLElement, hasVisibleChildren);
 			}
 		});
+
+		// Check if any items are visible and show/hide no results message
+		const visibleItems = sidebarContent.querySelectorAll('li:not([style*="display: none"])');
+		const noResultsMessage = document.querySelector(SELECTORS.noResultsMessage) as HTMLElement;
+		if (noResultsMessage) {
+			noResultsMessage.style.display = visibleItems.length === 0 ? 'block' : 'none';
+
+			// Set up global search link click handler
+			if (visibleItems.length === 0) {
+				const globalSearchLink = noResultsMessage.querySelector('#global-search-link') as HTMLButtonElement;
+				if (globalSearchLink) {
+					globalSearchLink.onclick = () => {
+						// Trigger DocSearch modal and pass the current query
+						const docSearchButton = document.querySelector('#docsearch button') as HTMLButtonElement;
+						if (docSearchButton) {
+							docSearchButton.click();
+							// Wait for modal to open and set the search query
+							setTimeout(() => {
+								const docSearchInput = document.querySelector('#docsearch-input') as HTMLInputElement;
+								if (docSearchInput) {
+									docSearchInput.value = query;
+									docSearchInput.dispatchEvent(new Event('input', { bubbles: true }));
+								}
+							}, 100);
+						}
+					};
+				}
+			}
+		}
 	}
 
 	// Initialize search functionality when DOM is ready
@@ -221,6 +267,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		--tw-ring-color: var(--sl-color-accent);
 	}
 
+
 	:root {
 		.sidebar-content {
 			--sl-color-hairline-light: #cacaca !important;