always display query into url

marigold-ui · May 10, 2024 · c72bf27 · c72bf27
1 parent 9101b03
commit c72bf27
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/docs/app/_components/NavLink.tsx b/docs/app/_components/NavLink.tsx
@@ -4,6 +4,8 @@ import Link, { LinkProps } from 'next/link';
 
 import { type VariantProps, cn, cva } from '@marigold/system';
 
+import { useThemeSwitch } from '@/ui/ThemeSwitch';
+
 const styles = cva([], {
   variants: {
     variant: {
@@ -54,13 +56,18 @@ export const NavLink = ({
   current,
   className,
   children,
+  href,
   ...props
-}: NavLinkProps) => (
-  <Link
-    {...props}
-    className={cn(styles({ variant, current, className }))}
-    aria-current={current ? 'page' : undefined}
-  >
-    {children}
-  </Link>
-);
+}: NavLinkProps) => {
+  const { current: currentTheme } = useThemeSwitch();
+  return (
+    <Link
+      {...props}
+      className={cn(styles({ variant, current, className }))}
+      aria-current={current ? 'page' : undefined}
+      href={`${href}${currentTheme ? `?theme=${currentTheme}` : ''}`}
+    >
+      {children}
+    </Link>
+  );
+};
diff --git a/docs/ui/ThemeSwitch.tsx b/docs/ui/ThemeSwitch.tsx
@@ -65,7 +65,6 @@ export const MarigoldThemeSwitch = ({
       const searchParams = new URLSearchParams(currentUrl.search);
 
       searchParams.set('theme', theme);
-
       const newUrl = `${currentUrl.pathname}?${searchParams.toString()}${currentUrl.hash}`;
 
       router.replace(newUrl, {
@@ -77,17 +76,16 @@ export const MarigoldThemeSwitch = ({
 
   useEffect(() => {
     if (isInitialMount.current) {
-      // Skip the effect on initial mount
       isInitialMount.current = false;
       if (themeQueryParam) {
         updateTheme(themeQueryParam);
       } else if (localTheme) {
         updateTheme(localTheme);
+      } else {
+        updateTheme(initial);
       }
-
-      return;
     }
-  }, [localTheme, themeQueryParam, updateTheme]);
+  }, [localTheme, themeQueryParam, updateTheme, initial]);
 
   return (
     <Context.Provider value={{ current: theme, themes, updateTheme }}>