Added basic login.

components/header/header.vue

@@ -53,36 +53,85 @@
 			</ul>
 		</nav>
 
-		<form
-			class="search"
-			@submit.prevent="search"
-		>
-			<input
-				v-model="query"
-				type="search"
-				placeholder="Search"
-				class="input"
+		<div class="header-section">
+			<form
+				class="search"
+				@submit.prevent="search"
 			>
+				<input
+					v-model="query"
+					type="search"
+					placeholder="Search"
+					class="input"
+				>
 
-			<Icon icon="search" />
-		</form>
+				<Icon icon="search" />
+			</form>
+
+			<VDropdown
+				v-if="user"
+				:triggers="['click']"
+			>
+				<div class="userpanel">
+					<img
+						:src="user.avatar"
+						class="avatar"
+					>
+				</div>
+
+				<template #popper>
+					<div class="menu">
+						<a
+							:href="`/user/${user.username}`"
+							class="menu-header"
+						>{{ user.username }}</a>
+
+						<ul class="menu-list nolist">
+							<li
+								class="menu-item logout"
+								@click="logout"
+							><Icon icon="exit2" />Log out</li>
+						</ul>
+					</div>
+				</template>
+			</VDropdown>
+
+			<div
+				v-else
+				class="userpanel"
+			>
+				<a
+					:href="`/login?r=${encodeURIComponent(currentPath)}`"
+					class="login button button-submit"
+				>Log in</a>
+			</div>
+		</div>
 	</header>
 </template>
 
 <script setup>
 import { ref, computed, inject } from 'vue';
 import navigate from '#/src/navigate.js';
+import { del } from '#/src/api.js';
 
 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
 
 const pageContext = inject('pageContext');
+
+const user = pageContext.user;
 const query = ref(pageContext.urlParsed.search.q || '');
 
 const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
+const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;
 
 function search() {
 	navigate('/search', { q: query.value }, { redirect: true });
 }
+
+async function logout() {
+	del('/session');
+	window.location.reload();
+}
 </script>
 
 <style scoped>
@@ -134,18 +183,22 @@ function search() {
 	}
 }
 
-.search {
+.header-section {
 	height: 100%;
+	display: flex;
+	align-items: stretch;
+}
+
+.search {
 	display: flex;
 	align-items: center;
-	flex-direction: row-reverse;
+	flex-direction: row-reverse; /* allow icon to be selected */
 
 	.input {
-		height: 100%;
-		border: none;
-		border-radius: 0;
-		border-left: solid 1px var(--shadow-weak-30);
+		padding: .5rem 1rem;
+		border-radius: 1rem;
 		background: var(--background);
+		margin: 0;
 	}
 
 	.icon {
@@ -157,4 +210,63 @@ function search() {
 		fill: var(--primary);
 	}
 }
+
+.userpanel {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding: 0 1rem;
+	font-size: 0;
+	cursor: pointer;
+
+	&:hover .avatar {
+		box-shadow: 0 0 3px var(--shadow-weak-10);
+	}
+}
+
+.avatar {
+	width: 2rem;
+	height: 2rem;
+	border-radius: .25rem;
+	object-fit: cover;
+}
+
+.login {
+	text-decoration: none;
+}
+
+.menu-header {
+	display: flex;
+	justify-content: center;
+	padding: .75rem 1rem;
+	border-bottom: solid 1px var(--shadow-weak-30);
+	color: var(--shadow-strong-30);
+	text-decoration: none;
+	text-align: center;
+	font-weight: bold;
+}
+
+.menu-item {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	.icon {
+		fill: var(--shadow);
+		margin-right: .5rem;
+	}
+
+	&:hover {
+		background: var(--shadow-weak-30);
+		cursor: pointer;
+	}
+}
+
+.logout {
+	color: var(--error);
+
+	.icon {
+		fill: var(--error);
+	}
+}
 </style>