LukaDeka/HexName-Frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init commit

Browse source
This commit is contained in:
Luka Dekanozishvili 2026-01-18 14:55:11 +01:00
parent dfe324cf8f
commit 7e37f1bbe0
31 changed files with 2103 additions and 718 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/lib/MainNavbar.svelte
View file

@ -26,26 +26,25 @@
auth.isMfaEnabled = !auth.isMfaEnabled;
}
}
let { sideMenuOpen = $bindable(), isMobile } = $props()
</script>
<div class="navbar bg-base-100 shadow-sm top-0 z-10 py-0">
<div class="backdrop-blur bg-white/6 fixed navbar shadow-sm top-0 z-40 py-0" id="main-navbar">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/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>
<ul
tabindex="-1"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
<li><a href="/">Home</a></li>
<li><a href="/about">About us</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl" href="/">HexName</a>
{#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><a href="/" class="text-xl font-semibold">HexName</a></li></ul>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<div class="navbar m-0 w-100">
<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>
@ -53,35 +52,39 @@
</div>
<div class="navbar-end">
{#if auth.isAuthenticated}
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<svg class="size-9" xmlns="http://www.w3.org/2000/svg" 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 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>
<ul
tabindex="-1"
class="menu menu-sm dropdown-content bg-base-200 rounded-box z-10 mt-3 w-52 p-2 shadow">
<li><text class="font-bold">{auth.userEmail}</text></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}
on:change={toggleMfa}
/>
<svg class="outline-transparent" aria-label="disabled" xmlns="http://www.w3.org/2000/svg" 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" xmlns="http://www.w3.org/2000/svg" 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}
<a href="/register"><button class="btn btn-sm btn-primary rounded-lg mr-2">Create an account</button></a>
<a href="/login"><button class="btn btn-sm btn-secondary rounded-lg mr-2">Log in</button></a>
<div class="gap-4 flex">
<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>
<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">Log in</button></a>
</div>
{/if}
</div>
</div>
<div class="divider bg-primary-content/20 fixed mt-[63px] z-41 h-0.25 w-screen"></div>