Skeleton: Add main page skeleton (navbar)
This commit is contained in:
165
src/routes/+layout.svelte
Normal file
165
src/routes/+layout.svelte
Normal file
@ -0,0 +1,165 @@
|
||||
<script lang="ts">
|
||||
import "../app.css";
|
||||
import type { Snippet } from "svelte";
|
||||
import type { LayoutData } from "./$types";
|
||||
import { FileInput, Password, Username } from "$lib/components";
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
|
||||
let { data, children }: { data: LayoutData; children: Snippet } = $props();
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<!-- TODO: Make this stick to the topsomehow. -->
|
||||
<!-- Fixed breaks the flexbox and sticky doesn't work. -->
|
||||
<div class="navbar h-16 bg-primary shadow">
|
||||
<div class="navbar-start">
|
||||
<!-- Side menu be visible on low width devices -->
|
||||
<div class="dropdown">
|
||||
<!-- Side menu open/close icon -->
|
||||
<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>
|
||||
|
||||
<!-- Side menu navigation items -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<li><a href="/racepicks">Race Picks</a></li>
|
||||
<li><a href="/seasonpicks">Season Picks</a></li>
|
||||
<li><a href="/leaderboard">Leaderboard</a></li>
|
||||
<li><a href="/statistics">Statistics</a></li>
|
||||
<li><a href="/rules">Rules</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Site logo -->
|
||||
<a href="/" class="btn btn-ghost text-xl">Formula 11</a>
|
||||
</div>
|
||||
|
||||
<!-- Centered navigation -->
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li>
|
||||
<a class="btn btn-ghost btn-sm" href="/racepicks">Race Picks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-ghost btn-sm" href="/seasonpicks">Season Picks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-ghost btn-sm" href="/leaderboard">Leaderboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-ghost btn-sm" href="/statistics">Statistics</a>
|
||||
</li>
|
||||
<li><a class="btn btn-ghost btn-sm" href="/rules">Rules</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<!-- Admin button -->
|
||||
<div class="dropdown dropdown-end mr-2">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost">Admin</div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<li><a href="/admin/users">Users</a></li>
|
||||
<li><a href="/admin/seasondata/teams">Season Data</a></li>
|
||||
<li><a href="/admin/userdata">User Data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Login/profile stuff -->
|
||||
{#if !data.user}
|
||||
<!-- No user is logged in -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost m-1">Login</div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<h1 class="text-lg">Enter Username and Password</h1>
|
||||
<form method="POST">
|
||||
<Username id="signin_username" name="username" />
|
||||
<Password id="signin_password" name="password" />
|
||||
<div class="card-actions mt-2 justify-end">
|
||||
<button formaction="/user?/create" class="btn btn-accent"
|
||||
>Register</button
|
||||
>
|
||||
<button formaction="/user?/login" class="btn btn-accent"
|
||||
>Login</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- The user is logged in -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="avatar ml-2 mr-2">
|
||||
<div class="mask mask-squircle w-10">
|
||||
<img
|
||||
id="user_avatar_preview"
|
||||
src={data.user.avatar_url}
|
||||
alt="User avatar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<h1 class="text-lg">Edit Profile</h1>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" name="id" value={data.user.id} />
|
||||
<Username
|
||||
id="update_username"
|
||||
name="username"
|
||||
value={data.user.username}
|
||||
/>
|
||||
<FileInput
|
||||
id="update_avatar"
|
||||
name="avatar"
|
||||
label="Upload Avatar"
|
||||
onchange={get_image_preview_event_handler(
|
||||
"user_avatar_preview",
|
||||
)}
|
||||
/>
|
||||
<div class="card-actions mt-2 justify-end">
|
||||
<button formaction="/user?/update" class="btn btn-secondary"
|
||||
>Save Changes</button
|
||||
>
|
||||
<button formaction="/user?/logout" class="btn btn-primary"
|
||||
>Logout</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Each child's contents will be inserted here -->
|
||||
<div class="p-2">
|
||||
{@render children()}
|
||||
</div>
|
||||
Reference in New Issue
Block a user