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

67 lines
1.9 KiB
Svelte

<script lang="ts">
import type { Snippet } from "svelte";
import { t } from "$lib/i18n";
import type { LayoutData } from "./$types";
import { isActive } from "$lib/pageUtils.svelte";
type Props = { data: LayoutData; children: Snippet };
let { data, children }: Props = $props();
</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>