refactor(frontend): deduplicate isActive function
This commit is contained in:
parent
5077bd6a0b
commit
49e9eabea0
4 changed files with 13 additions and 16 deletions
10
Foxnouns.Frontend/src/lib/pageUtils.svelte.ts
Normal file
10
Foxnouns.Frontend/src/lib/pageUtils.svelte.ts
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
import { page } from "$app/state";
|
||||||
|
|
||||||
|
export const isActive = (path: string | string[], prefix: boolean = false) =>
|
||||||
|
typeof path === "string"
|
||||||
|
? prefix
|
||||||
|
? page.url.pathname.startsWith(path)
|
||||||
|
: page.url.pathname === path
|
||||||
|
: prefix
|
||||||
|
? path.some((p) => page.url.pathname.startsWith(p))
|
||||||
|
: path.some((p) => page.url.pathname === p);
|
|
@ -1,20 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Snippet } from "svelte";
|
import type { Snippet } from "svelte";
|
||||||
import { page } from "$app/state";
|
|
||||||
import { t } from "$lib/i18n";
|
import { t } from "$lib/i18n";
|
||||||
import { Nav, NavLink } from "@sveltestrap/sveltestrap";
|
import { Nav, NavLink } from "@sveltestrap/sveltestrap";
|
||||||
|
import { isActive } from "$lib/pageUtils.svelte";
|
||||||
|
|
||||||
type Props = { children: Snippet };
|
type Props = { children: Snippet };
|
||||||
let { children }: Props = $props();
|
let { children }: Props = $props();
|
||||||
|
|
||||||
const isActive = (path: string | string[], prefix: boolean = false) =>
|
|
||||||
typeof path === "string"
|
|
||||||
? prefix
|
|
||||||
? page.url.pathname.startsWith(path)
|
|
||||||
: page.url.pathname === path
|
|
||||||
: prefix
|
|
||||||
? path.some((p) => page.url.pathname.startsWith(p))
|
|
||||||
: path.some((p) => page.url.pathname === p);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Snippet } from "svelte";
|
import type { Snippet } from "svelte";
|
||||||
import { page } from "$app/state";
|
|
||||||
import { t } from "$lib/i18n";
|
import { t } from "$lib/i18n";
|
||||||
import type { LayoutData } from "./$types";
|
import type { LayoutData } from "./$types";
|
||||||
|
import { isActive } from "$lib/pageUtils.svelte";
|
||||||
|
|
||||||
type Props = { data: LayoutData; children: Snippet };
|
type Props = { data: LayoutData; children: Snippet };
|
||||||
let { data, children }: Props = $props();
|
let { data, children }: Props = $props();
|
||||||
|
|
||||||
const isActive = (path: string) => page.url.pathname === path;
|
|
||||||
|
|
||||||
let name = $derived(
|
let name = $derived(
|
||||||
data.member.display_name === data.member.name
|
data.member.display_name === data.member.name
|
||||||
? data.member.name
|
? data.member.name
|
||||||
|
|
|
@ -1,13 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Snippet } from "svelte";
|
import type { Snippet } from "svelte";
|
||||||
import { page } from "$app/state";
|
|
||||||
import { t } from "$lib/i18n";
|
import { t } from "$lib/i18n";
|
||||||
import type { LayoutData } from "./$types";
|
import type { LayoutData } from "./$types";
|
||||||
|
import { isActive } from "$lib/pageUtils.svelte";
|
||||||
|
|
||||||
type Props = { data: LayoutData; children: Snippet };
|
type Props = { data: LayoutData; children: Snippet };
|
||||||
let { data, children }: Props = $props();
|
let { data, children }: Props = $props();
|
||||||
|
|
||||||
const isActive = (path: string) => page.url.pathname === path;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
Loading…
Reference in a new issue