integrate UserControls into main navbar

This commit is contained in:
Ilion Beyst 2022-11-04 07:17:59 +01:00
parent 698ae8d15e
commit d3845eb85f
3 changed files with 90 additions and 126 deletions

View file

@ -1,88 +0,0 @@
<script lang="ts">
import { get_session_token, clear_session_token } from "$lib/auth";
import { currentUser } from "$lib/stores/current_user";
import { onMount } from "svelte";
onMount(async () => {
// TODO: currentUser won't be set if the navbar component is not created.
const session_token = get_session_token();
if (!session_token) {
return;
}
let response = await fetch("/api/users/me", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session_token}`,
},
});
if (!response.ok) {
throw response.statusText;
}
const user = await response.json();
currentUser.set(user);
});
function signOut() {
// TODO: destroy session on server
currentUser.set(null);
clear_session_token();
}
</script>
<div class="user-controls">
{#if $currentUser}
<a class="current-user-name" href="/users/{$currentUser['username']}">
{$currentUser["username"]}
</a>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="sign-out" on:click={signOut}>Sign out</div>
{:else}
<a class="account-href" href="/login">Sign in</a>
<a class="account-href" href="/register">Sign up</a>
{/if}
</div>
<style lang="scss">
@mixin navbar-item {
font-size: 18px;
font-family: Helvetica, sans-serif;
padding: 4px 8px;
font-weight: 400;
}
.account-href {
@include navbar-item;
color: #eee;
text-decoration: none;
}
.current-user-name {
@include navbar-item;
text-decoration: none;
color: #fff;
}
.sign-out {
@include navbar-item;
color: #ccc;
cursor: pointer;
}
.user-controls {
display: flex;
align-items: center;
}
// TODO: pretty hacky
@media screen and (max-width: 600px) {
.user-controls {
flex-direction: column;
align-items: flex-start;
}
}
</style>

View file

@ -1,17 +1,52 @@
<script lang="ts"> <script lang="ts">
import { afterNavigate, beforeNavigate } from "$app/navigation"; import { afterNavigate } from "$app/navigation";
import UserControls from "$lib/components/navbar/UserControls.svelte";
import "./style.css"; import "./style.css";
let isExpanded = false; import { get_session_token, clear_session_token } from "$lib/auth";
import { currentUser } from "$lib/stores/current_user";
import { onMount } from "svelte";
// TODO: ideally we'd not store this in the user session,
// and we'd be able to handle this in the load() function
onMount(async () => {
// TODO: currentUser won't be set if the navbar component is not created.
const session_token = get_session_token();
if (!session_token) {
return;
}
let response = await fetch("/api/users/me", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session_token}`,
},
});
if (!response.ok) {
throw response.statusText;
}
const user = await response.json();
currentUser.set(user);
});
function signOut() {
// TODO: destroy session on server
currentUser.set(null);
clear_session_token();
}
let navbarExpanded = false;
function toggleExpanded() { function toggleExpanded() {
isExpanded = !isExpanded; navbarExpanded = !navbarExpanded;
} }
afterNavigate(() => { afterNavigate(() => {
isExpanded = false; navbarExpanded = false;
}); });
</script> </script>
@ -20,12 +55,13 @@
</svelte:head> </svelte:head>
<div class="outer-container"> <div class="outer-container">
<div class="navbar" class:expanded={isExpanded}> <div class="navbar" class:expanded={navbarExpanded}>
<div class="navbar-left">
<a href="/" class="navbar-header"> <a href="/" class="navbar-header">
<img alt="logo" src="/ship.svg" height="32px'" /> <img alt="logo" src="/ship.svg" height="32px'" />
PlanetWars PlanetWars
</a> </a>
<div class="navbar-expand" on:click={toggleExpanded}>expand</div>
<div class="navbar-items">
<div class="navbar-item"> <div class="navbar-item">
<a href="/editor">Editor</a> <a href="/editor">Editor</a>
</div> </div>
@ -36,13 +72,25 @@
<a href="/docs/rules">How to play</a> <a href="/docs/rules">How to play</a>
</div> </div>
<div class="navbar-divider" /> <div class="navbar-divider" />
{#if $currentUser}
<div class="navbar-item"> <div class="navbar-item">
<UserControls /> <a class="current-user-name" href="/users/{$currentUser['username']}">
{$currentUser["username"]}
</a>
</div> </div>
<div class="navbar-item">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="sign-out" on:click={signOut}>Sign out</div>
</div>
{:else}
<div class="navbar-item">
<a class="account-href" href="/login">Sign in</a>
</div>
<div class="navbar-item">
<a class="account-href" href="/register">Sign up</a>
</div>
{/if}
</div> </div>
<!-- <div class="navbar-right">
</div> -->
<div class="navbar-expand" on:click={toggleExpanded}>expand</div>
</div> </div>
<slot /> <slot />
</div> </div>
@ -70,7 +118,7 @@
padding: 0 15px; padding: 0 15px;
} }
.navbar-left { .navbar-items {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
@ -104,7 +152,7 @@
} }
.navbar-item { .navbar-item {
margin: auto 0; margin: auto 0;
padding: 0 8px; padding: 8px;
} }
.navbar-item a { .navbar-item a {
font-size: 14px; font-size: 14px;
@ -113,6 +161,24 @@
font-weight: 600; font-weight: 600;
} }
.navbar-item a:hover {
color: #ccc;
}
.current-user-name {
text-decoration: none;
color: #fff;
}
.sign-out {
color: #ccc;
cursor: pointer;
}
.sign-out:hover {
color: #fff;
}
.navbar-expand { .navbar-expand {
color: white; color: white;
display: none; display: none;
@ -120,7 +186,7 @@
height: $navbarHeight; height: $navbarHeight;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.navbar-item { .navbar-items {
display: none; display: none;
} }
@ -130,24 +196,14 @@
.navbar.expanded { .navbar.expanded {
height: auto; height: auto;
flex-wrap: wrap;
} }
.navbar.expanded .navbar-left { .navbar.expanded .navbar-items {
display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} width: 100%;
.navbar.expanded .navbar-item {
display: block;
padding: 8px;
}
.navbar-right {
display: none;
}
.navbar.expanded .navbar-right {
display: flex;
} }
.navbar-expand { .navbar-expand {

View file

@ -23,10 +23,6 @@
export let owner; export let owner;
</script> </script>
<svelte:head>
<title>{bot["name"]}</title>
</svelte:head>
<div class="header"> <div class="header">
<div class="header-title-line"> <div class="header-title-line">
<h1 class="bot-name">{bot["name"]}</h1> <h1 class="bot-name">{bot["name"]}</h1>