Foxnouns.NET/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte

<script lang="ts">
	import type { Snippet } from "svelte";
	import { page } from "$app/state";
	import { t } from "$lib/i18n";
	import type { LayoutData } from "./$types";

	type Props = { data: LayoutData; children: Snippet };
	let { data, children }: Props = $props();

	const isActive = (path: string) => page.url.pathname === path;
</script>

<svelte:head>
	<title>{$t("edit-profile.user-header")} • pronouns.cc</title>
</svelte:head>

<div class="container">
	<h3>{$t("edit-profile.user-header")}</h3>
	<div class="row">
		<div class="col-md-3 mt-1 mb-3">
			<div class="list-group">
				<a
					href="/settings/profile"
					class="list-group-item list-group-item-action"
					class:active={isActive("/settings/profile")}
				>
					{$t("edit-profile.general-tab")}
				</a>
				<a
					href="/settings/profile/names-pronouns"
					class="list-group-item list-group-item-action"
					class:active={isActive("/settings/profile/names-pronouns")}
				>
					{$t("edit-profile.names-pronouns-tab")}
				</a>
				<a
					href="/settings/profile/bio"
					class="list-group-item list-group-item-action"
					class:active={isActive("/settings/profile/bio")}
				>
					{$t("edit-profile.bio-tab")}
				</a>
				<a
					href="/settings/profile/fields"
					class="list-group-item list-group-item-action"
					class:active={isActive("/settings/profile/fields")}
				>
					{$t("edit-profile.fields-tab")}
				</a>
				<a
					href="/settings/profile/flags-links"
					class="list-group-item list-group-item-action"
					class:active={isActive("/settings/profile/flags-links")}
				>
					{$t("edit-profile.flags-links-tab")}
				</a>
				<a href="/@{data.user.username}" class="list-group-item list-group-item-action text-danger">
					{$t("edit-profile.back-to-profile-tab")}
				</a>
				<a href="/settings" class="list-group-item list-group-item-action text-danger">
					{$t("edit-profile.back-to-settings-tab")}
				</a>
			</div>
		</div>
		<div class="col-md-9">
			{@render children?.()}
		</div>
	</div>
</div>