Auto-expand sidebar category and add sitemap categories

hdyc-svelte/src/lib/components/Sidebar.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
+  import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { categories, getCalculatorsByCategory, type CalculatorDef } from '$lib/data/calculators';
 
   let expandedCategory = '';
   let expandedUnits: Record<string, string> = {};
+  let isDesktop = false;
+  let navBreakpoint: MediaQueryList | null = null;
+  let lastPath = '';
+  let lastDesktop = isDesktop;
+  let autoExpandedCategory = '';
+
+  const categoryPathRegex = /^\/category\/([^/]+)(?:\/|$)/;
+
+  function getCategorySlugFromPath(path: string) {
+    const match = path.match(categoryPathRegex);
+    return match?.[1] ?? '';
+  }
 
   $: currentPath = $page.url.pathname;
 
@@ -61,6 +75,49 @@
     };
   }
 
+  onMount(() => {
+    if (!browser) return;
+
+    navBreakpoint = window.matchMedia('(max-width: 1024px)');
+    const updateDesktop = (event?: MediaQueryListEvent) => {
+      const matches = event?.matches ?? navBreakpoint!.matches;
+      isDesktop = !matches;
+    };
+
+    updateDesktop();
+
+    const handleNavChange = (event: MediaQueryListEvent) => updateDesktop(event);
+    if ('addEventListener' in navBreakpoint) {
+      navBreakpoint.addEventListener('change', handleNavChange);
+    } else {
+      navBreakpoint.addListener(handleNavChange);
+    }
+
+    return () => {
+      if (!navBreakpoint) return;
+      if ('removeEventListener' in navBreakpoint) {
+        navBreakpoint.removeEventListener('change', handleNavChange);
+      } else {
+        navBreakpoint.removeListener(handleNavChange);
+      }
+    };
+  });
+
+  $: if (browser && (currentPath !== lastPath || isDesktop !== lastDesktop)) {
+    const slug = getCategorySlugFromPath(currentPath);
+    if (isDesktop && slug) {
+      expandedCategory = slug;
+      autoExpandedCategory = slug;
+    } else if (autoExpandedCategory && (!isDesktop || !slug)) {
+      if (expandedCategory === autoExpandedCategory) {
+        expandedCategory = '';
+      }
+      autoExpandedCategory = '';
+    }
+    lastPath = currentPath;
+    lastDesktop = isDesktop;
+  }
+
   export let open = false;
 </script>
 

hdyc-svelte/src/routes/sitemap.xml/+server.ts

@@ -1,8 +1,8 @@
 import type { RequestHandler } from './$types';
-import { calculators } from '$lib/data/calculators';
+import { calculators, categories } from '$lib/data/calculators';
 
 export const GET: RequestHandler = async () => {
-	const urls = calculators.map(
+	const calculatorUrls = calculators.map(
 		(calc) => `
   <url>
     <loc>https://howdoyouconvert.com/${calc.slug}</loc>
@@ -11,6 +11,15 @@ export const GET: RequestHandler = async () => {
   </url>`
 	);
 
+	const categoryUrls = Object.keys(categories).map(
+		(category) => `
+  <url>
+    <loc>https://howdoyouconvert.com/category/${category}</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>`
+	);
+
 	const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
@@ -18,7 +27,8 @@ export const GET: RequestHandler = async () => {
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
-  ${urls.join('')}
+  ${categoryUrls.join('')}
+  ${calculatorUrls.join('')}
 </urlset>`;
 
 	return new Response(sitemap, {