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

66 lines
1.8 KiB
Svelte
Raw Normal View History

2024-11-25 17:35:24 +01:00
<script lang="ts">
import type { Snippet } from "svelte";
import { page } from "$app/stores";
import { t } from "$lib/i18n";
type Props = { children: Snippet };
let { 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="/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>