user displayed in navbar with option to logout

src/hooks.server.ts

@@ -4,8 +4,8 @@ import { redirect } from "@sveltejs/kit"
 import { error } from "@sveltejs/kit"
 
 export const handle : Handle = async({event, resolve}) => {
-	event.locals.user = await authenticateUser(event.cookies)
 	if(event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')){
+		event.locals.user = await authenticateUser(event.cookies)
 		if(!event.locals.user){
 				throw redirect(303, "/login")
 		}
@@ -14,7 +14,7 @@ export const handle : Handle = async({event, resolve}) => {
 		}
 	}
 	else if(event.url.pathname.startsWith('/abrechnung')){
-		console.log(event.locals.user)
+		event.locals.user = await authenticateUser(event.cookies)
 		if(!event.locals.user){
 				throw redirect(303, "/login")
 		}

src/lib/components/Header.svelte

@@ -45,7 +45,7 @@ nav[hidden]{
 }
 
 :global(.site_header li),
-a.entry
+:global(a.entry)
 {
 	list-style-type:none;
 	transition: 100ms;
@@ -53,7 +53,7 @@ a.entry
 	user-select: none;
 }
 :global(.site_header li>a),
-.entry
+:global(.entry)
 {
 	text-decoration: none;
 	font-family: sans-serif;
@@ -65,8 +65,8 @@ a.entry
 
 :global(.site_header li:hover),
 :global(.site_header li:focus-within),
-.entry:hover,
-.entry:focus-visible
+:global(.entry:hover),
+:global(.entry:focus-visible)
 {
 	cursor: pointer;
 	color: var(--red);
@@ -153,7 +153,7 @@ a.entry
 	nav[hidden]{
 		transform: translateX(100%);
 	}
-	nav a:last-child{
+	:global(nav a:last-child){
 		margin-bottom: 2rem;
 	}
 
@@ -192,7 +192,7 @@ margin-top: auto;
 <nav hidden>
 	<a class=entry href="/"><Symbol></Symbol></a>
 	<slot name=links></slot>
-	<a class=entry href="/login">Log In</a>
+	<slot name=right_side></slot>
 </nav>
 
 <slot></slot>

src/lib/components/UserHeader.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	export let username;
+	console.log("username UESRHEADER", username)
+	function show_options(){
+		const el = document.querySelector("#options")
+		el.hidden = !el.hidden
+	}
+</script>
+<style>
+	/* (A) SPEECH BOX */
+.speech {
+  /* (A1) FONT */
+   font-size: 1.1em;
+
+  /* (A2) COLORS */
+  color: #fff;
+  background: var(--bg_color);
+
+  /* (A3) DIMENSIONS + POSITION */
+  position: relative;
+  border-radius: 10px;
+}
+
+/* (B) ADD SPEECH "CALLOUT TAIL" */
+/* (B1) USE ::AFTER TO CREATE THE "TAIL" */
+.speech::after {
+  /* (B1-1) ATTACH TRANSPARENT BORDERS */
+  content: "";
+  border: 20px solid transparent;
+
+  /* (B1-2) NECESSARY TO POSITION THE "TAIL" */
+  position: absolute;
+}
+
+/* (B2) BOTTOM "CALLOUT TAIL" */
+.bottom.speech::after {
+  /* (B2-1) DOWN TRIANGLE */
+  border-top-color: #a53d38;
+  border-bottom: 0;
+
+  /* (B2-2) POSITION AT BOTTOM */
+  bottom: -20px; left: 50%;
+  margin-left: -20px;
+}
+
+/* (C) DIFFERENT TAIL POSITIONS */
+/* (C1) TOP */
+.top.speech::after {
+  /* (C1-1) UP TRIANGLE */
+  border-bottom-color: var(--bg_color);
+  border-top: 0;
+
+  /* (C1-2) POSITION AT TOP */
+  top: -20px; left:87%;
+  margin-left: -20px;
+}
+
+/* (C2) LEFT */
+.left.speech::after {
+  /* (C2-1) LEFT TRIANGLE */
+  border-right-color: black;
+  border-left: 0;
+
+  /* (C2-2) POSITION AT LEFT */
+  left: -20px; top: 50%;
+  margin-top: -20px;
+}
+
+/* (C3) RIGHT */
+.right.speech::after {
+  /* (C3-1) RIGHT TRIANGLE */
+  border-left-color: black;
+  border-right: 0;
+
+  /* (C3-2) POSITION AT RIGHT */
+  right: -20px; top: 50%;
+  margin-top: -20px;
+}
+
+	button{
+		--margin-right: 1rem;
+		position: relative;
+		background-color: transparent;
+		border: none;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 50%;
+		margin-right: var(--margin-right);
+	}
+	img{
+		height: 2.5rem;
+		border-radius: 50%;
+		object-fit: cover;
+		object-position: center;
+	}
+	#options{
+		--bg_color: var(--nord3);
+		box-sizing: border-box;
+		border-radius: 5px;
+		position: absolute;
+		right: calc( -1*var(--margin-right) + 0.25rem);
+		top: calc(100% + 20px);
+		background-color: var(--bg_color);
+		width: 30ch;
+		padding: 1rem;
+	}
+	#options ul{
+		color: white;
+		font-size: 1.2rem;
+		width: 100%;
+		list-style-type: none;
+		padding: 0;
+	}
+	#options li{
+		margin-block: 0.5rem;
+		text-align: left;
+	}
+	#options li a{
+		text-decoration: none;
+		color: white;
+		text-align: left;
+		transition: 100ms;
+	}
+	#options li:hover a{
+		color: var(--red);
+	}
+</style>
+
+{#if username}
+	<button on:click={show_options}><img src="https://new.bocken.org/static/user/thumb/{username}.webp">
+		<div id=options class="speech top" hidden>
+			<ul>
+				<li><a href="/logout">Log Out</a></li>
+			</ul>
+		</div>
+	</button>
+{:else}
+	<a class=entry href=/login>Log In</a>
+{/if}

src/routes/(main)/+layout.server.ts

@@ -0,0 +1,9 @@
+import type {LayoutServerLoad} from './$types';
+import { authenticateUser } from '$lib/js/authenticate';;
+
+export const load = (async ({cookies}) => {
+	const user =  await authenticateUser(cookies)
+	return {
+		user
+	}
+}) satisfies LayoutServerLoad;

src/routes/(main)/+layout.svelte

@@ -1,6 +1,11 @@
 <script>
 import Header from '$lib/components/Header.svelte'
-
+import UserHeader from '$lib/components/UserHeader.svelte';
+export let data
+let username = ""
+if(data.user){
+	username = data.user.username
+}
 </script>
 
 <Header>
@@ -10,5 +15,6 @@ import Header from '$lib/components/Header.svelte'
 	<li><a href="/git">Git</a></li>
 	<li><a href="/transmission">Transmission</a></li>
 	</ul>
+	<UserHeader {username} slot=right_side></UserHeader>
 	<slot></slot>
 </Header>

src/routes/(rezepte)/rezepte/+layout.server.ts

@@ -0,0 +1,11 @@
+import type {LayoutServerLoad} from './$types';
+import { authenticateUser } from '$lib/js/authenticate';;
+
+export const load = (async ({cookies}) => {
+	const user =  await authenticateUser(cookies)
+	console.log("LOAD LAYOUT")
+	console.log(user)
+	return {
+		user
+	}
+}) satisfies LayoutServerLoad;

src/routes/(rezepte)/rezepte/+layout.svelte

@@ -1,6 +1,9 @@
 <script>
 import Header from '$lib/components/Header.svelte'
-
+import UserHeader from '$lib/components/UserHeader.svelte';
+export let data
+let username = ""
+if(data.user) username = data.user.username
 </script>
 
 <Header>
@@ -11,5 +14,6 @@ import Header from '$lib/components/Header.svelte'
 	<li><a href="/rezepte/icon">Icon</a></li>
 	<li><a href="/rezepte/tag">Stichwörter</a></li>
 	</ul>
+	<UserHeader {username} slot=right_side></UserHeader>
 	<slot></slot>
 </Header>

src/routes/(rezepte)/rezepte/+page.svelte

@@ -34,7 +34,6 @@ h1{
 	{/each}
 	</MediaScroller>
 {/each}
-<p>{data.all_brief.length}</p>
 {#if data.user && data.user.access.includes("rezepte")}
 	<AddButton></AddButton>
 {/if}

src/routes/(rezepte)/rezepte/[name]/+page.server.ts

@@ -1,15 +0,0 @@
-// import { error } from '@sveltejs/kit';
-import type { PageLoad } from "./$types";
-//import { Recipe } from '../../../models/Recipe';
-//import { dbConnect, dbDisconnect } from '../../../utils/db';
-import { error } from "@sveltejs/kit";
-
-export async function load({ fetch, params, locals }) {
-    const res = await fetch(`/api/items/${params.name}`);
-    let item = await res.json();
-    item.user = locals.user
-    if(res.status != 200){
-	    throw error(res.status, item.message)
-    }
-    return item;
-};

src/routes/(rezepte)/rezepte/[name]/+page.svelte

@@ -242,6 +242,4 @@ h4{
 </div>
 </TitleImgParallax>
 
-{#if data.user && data.user.access.includes("rezepte")}
 <EditButton href="/rezepte/edit/{data.short_name}"></EditButton>
-{/if}

src/routes/(rezepte)/rezepte/[name]/+page.ts

@@ -0,0 +1,10 @@
+import { error } from "@sveltejs/kit";
+
+export async function load({ fetch, params}) {
+    const res = await fetch(`/api/items/${params.name}`);
+    let item = await res.json();
+    if(!res.ok){
+	    throw error(res.status, item.message)
+    }
+    return item;
+}