117 lines
5.5 KiB
Svelte
117 lines
5.5 KiB
Svelte
<script lang="ts">
|
|
// import { goto } from "$app/navigation";
|
|
// import { PUBLIC_BACKEND_API_HOST } from "$env/static/public";
|
|
// import { auth, setUserLoggedOut } from "./auth.svelte";
|
|
import { auth } from "./auth.svelte";
|
|
|
|
// async function toggleMfa() {
|
|
// try {
|
|
// const res = await fetch(`${PUBLIC_BACKEND_API_HOST}/api/v1/user/update-mfa`, {
|
|
// credentials: "include",
|
|
// method: "PATCH",
|
|
// headers: { "Content-Type": "application/json" },
|
|
// body: JSON.stringify({ enable_mfa: auth.isMfaEnabled }),
|
|
// });
|
|
|
|
// if (res.status === 401 || res.status === 500) {
|
|
// setUserLoggedOut();
|
|
// goto('/login');
|
|
// throw new Error('Unauthorized');
|
|
// } else if (res.status !== 204) {
|
|
// let msg = await res.text();
|
|
// throw new Error(`Failed updating MFA: ${msg}`);
|
|
// }
|
|
// } catch (err) {
|
|
// // TODO: show error to user
|
|
// console.error(err);
|
|
// auth.isMfaEnabled = !auth.isMfaEnabled;
|
|
// }
|
|
// }
|
|
|
|
let { sideMenuOpen = $bindable() } = $props()
|
|
|
|
let innerWidth: number | null | undefined = $state();
|
|
|
|
let isMobile: boolean = $derived.by(() =>{
|
|
if (!innerWidth) return false;
|
|
return innerWidth < 768;
|
|
});
|
|
|
|
let isXxs: boolean = $derived.by(() =>{
|
|
if (!innerWidth) return false;
|
|
return innerWidth < 360;
|
|
});
|
|
</script>
|
|
|
|
<svelte:window bind:innerWidth/>
|
|
|
|
<div class="backdrop-blur bg-white/6 fixed navbar shadow-sm top-0 z-40 py-0" id="main-navbar">
|
|
<div class="navbar-start md:min-w-60">
|
|
{#if auth.isAuthenticated || isMobile}
|
|
<button aria-label="toggle side menu" onclick={() => {sideMenuOpen = !sideMenuOpen}}>
|
|
<ul class="menu p-0"><li>
|
|
<div class="p-2.5">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/></svg>
|
|
</div>
|
|
</li></ul>
|
|
</button>
|
|
{/if}
|
|
<ul class="menu pl-0">
|
|
<li class="flex flex-row">
|
|
<a href="/" class="text-xl font-semibold pl-2 ml-1">
|
|
<svg class="size-6.5 translate-x-0.5 translate-y-0.25 stroke-primary-content" viewBox="-2 -2 139 157"><path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:11px" d="M130.887 54.969 67.444 78.214 4 54.969l13.51-35.9L67.444 4l49.934 15.069zm-5.273 39.517-58.17 22.969-58.17-22.969h-.01m111.93 33.229-53.75 21.68-53.75-21.68m-.001 0L4.004 54.967m126.88 0-9.689 72.748M67.444 78.214v71.182"/></svg>
|
|
HexName
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar m-0 md:min-w-50 p-0">
|
|
<ul class="menu menu-horizontal not-md:hidden m-auto justify-center items-center">
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/about">About us</a></li>
|
|
<li><a href="/faq">FAQ</a></li>
|
|
<li><a href="/blog">Blogs</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end">
|
|
{#if auth.isAuthenticated}
|
|
<div class="dropdown dropdown-end z-40">
|
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar" aria-label="profile icon">
|
|
<svg class="size-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dfe5ed"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
|
|
</div>
|
|
<ul
|
|
tabindex="-1"
|
|
class="menu menu-sm dropdown-content bg-base-200 rounded-box z-40 mt-3 w-52 p-2 shadow">
|
|
<li><text class="font-bold">{auth.userEmail}</text></li>
|
|
<!-- <li><input type="checkbox" value="light" class="toggle theme-controller"/></li> -->
|
|
<!-- <li>
|
|
<div class="justify-between">
|
|
2-factor via email
|
|
<label class="toggle text-base-content outline-transparent">
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={auth.isMfaEnabled}
|
|
onchange={toggleMfa}
|
|
/>
|
|
<svg class="outline-transparent" aria-label="disabled" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12"/></svg>
|
|
<svg class="outline-transparent" aria-label="enabled" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"></path></g></svg>
|
|
</label>
|
|
</div>
|
|
</li> -->
|
|
<li><a href="/delete-account">Delete account</a></li>
|
|
<li><a href="/logout">Log out</a></li>
|
|
</ul>
|
|
</div>
|
|
{:else}
|
|
<div class="xs:gap-4 flex">
|
|
{#if isXxs}
|
|
<a href="/register"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-primary break-keep whitespace-nowrap rounded-lg">Register</button></a>
|
|
{:else}
|
|
<a href="/register"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-primary break-keep whitespace-nowrap rounded-lg">Create an account</button></a>
|
|
{/if}
|
|
<a href="/login"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-outline btn-secondary whitespace-nowrap border-2 rounded-lg not-xs:hidden">Log in</button></a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="divider bg-primary-content/20 fixed mt-[63px] z-41 h-0.25 w-full"></div>
|