fix: use isActiveFragment in inline-params example

roxiness · Aug 10, 2023 · 27016a3 · 27016a3
1 parent 33de9ba
commit 27016a3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/examples/starter-basic/src/routes/examples/[mode]/inline-params/[city]/_module.svelte b/examples/starter-basic/src/routes/examples/[mode]/inline-params/[city]/_module.svelte
@@ -1,29 +1,25 @@
 <script>
-    import { url, isActive } from '@roxi/routify'
-    export let context
-    export let weather
-    $: city = context.fragment.params.city
+    import { url, isActiveFragment } from '@roxi/routify'
+    export let context, city
 </script>
 
-<div class="entry card" class:active={$isActive('.', { city })}>
+<div class="entry card" class:active={$isActiveFragment('.', { city })}>
     <a class="city-name" href={$url('$leaf', { city })}>
         <h3>{city}</h3>
     </a>
 
     <div class="links">
-        <a href={$url('./index', { city })} class:active={$isActive('./index', { city })}
-            >Overview</a>
+        <a
+            href={$url('./index', { city })}
+            class:active={$isActiveFragment('./index', { city })}>Overview</a>
         <a
             href={$url('./forecast', { city })}
-            class:active={$isActive('./forecast', { city })}>Forecast</a>
-        <!-- <a
-            href={$url('./history', { city })}
-            class:active={$isActive('./history', { city })}>History</a> -->
+            class:active={$isActiveFragment('./forecast', { city })}>Forecast</a>
         <a
             href={$url('./alerts', { city })}
-            class:active={$isActive('./alerts', { city })}>Alerts</a>
+            class:active={$isActiveFragment('./alerts', { city })}>Alerts</a>
     </div>
-    <slot props={{ weather }} />
+    <slot />
 </div>
 
 <style>
@@ -61,9 +57,13 @@
         opacity: 0.5;
         text-decoration: none;
     }
+    .links a:hover {
+        opacity: 0.8;
+    }
     .links a.active {
         opacity: 1;
     }
+
     .card {
         background: var(--surface-2);
         box-shadow: var(--shadow-2);

diff --git a/...les/starter-basic/src/routes/examples/[mode]/inline-params/[city]/forecast/_module.svelte b/...les/starter-basic/src/routes/examples/[mode]/inline-params/[city]/forecast/_module.svelte
@@ -1,15 +1,16 @@
 <script>
-    import { url, isActive, params } from '@roxi/routify'
+    import { url, isActiveFragment, params } from '@roxi/routify'
+    /** @type {RenderContext}*/
     export let context
 </script>
 
 <div class="span">
     <a
         href={$url('./hourly', { city: $params.city })}
-        class:active={$isActive('./hourly', { city: $params.city })}>Hourly</a>
+        class:active={$isActiveFragment('./hourly', { city: $params.city })}>Hourly</a>
     <a
         href={$url('./daily', { city: $params.city })}
-        class:active={$isActive('./daily', { city: $params.city })}>Daily</a>
+        class:active={$isActiveFragment('./daily', { city: $params.city })}>Daily</a>
 </div>
 
 <slot />
@@ -30,6 +31,9 @@
         font-size: var(--font-size-4);
         opacity: 0.3;
     }
+    .span a:hover {
+        opacity: 0.8;
+    }
     .span a.active {
         opacity: 1;
     }