From 12962b307b6562feb6104e41e11f4ddc07809ba6 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 31 Oct 2023 00:10:02 -0700
Subject: feat(layout): small navigation

---
 src/routes/+layout.svelte | 88 +++++++++++++++++++++++++++++++----------------
 1 file changed, 59 insertions(+), 29 deletions(-)

(limited to 'src/routes/+layout.svelte')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 20ae9ef4..de2a88f2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -33,44 +33,61 @@
 </script>
 
 <div id="container">
-	<div id="header">
-		<p />
-
-		<h1><a href="/">期限</a></h1>
-
-		{#if data.user === undefined}
-			<a
-				href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
-				>Log in with AniList</a
-			>
-		{:else}
-			<a href="/api/authentication-log-out">Log out from AniList ({currentUserIdentity.name})</a>
-		{/if}
-
-		<p />
-
-		<p id="desktop-navigation-bar">
+	{#if $settings.hoverNavigation}
+		<div id="hover-header">
 			「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
 			<a href="/updates">Manga & LN Updates</a> •
 			<a href="/tools">Tools</a> • {#if data.user}
 				<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
-			{/if} <a href="/settings">Settings</a> 」
-		</p>
+			{/if} <a href="/settings">Settings</a> 」{#if data.user === undefined}
+				<a
+					href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
+					>Log in</a
+				>
+			{:else}
+				<a href="/api/authentication-log-out">Log out ({currentUserIdentity.name})</a>
+			{/if}
+		</div>
+	{:else}
+		<div id="header">
+			<p />
 
-		<div id="mobile-navigation-bar">
-			<a href="/">Home</a> • <a href="/completed">Completed</a> • <a href="/tools">Tools</a>
-			{#if data.user}
-				• <a href={`/user/${currentUserIdentity.name}`}>Profile</a>
+			<h1><a href="/">期限</a></h1>
+
+			{#if data.user === undefined}
+				<a
+					href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
+					>Log in with AniList</a
+				>
+			{:else}
+				<a href="/api/authentication-log-out">Log out from AniList ({currentUserIdentity.name})</a>
 			{/if}
-			<br />
-			<a href="/settings">Settings</a>
-			<a href="/updates">Manga & LN Updates</a>
 
 			<p />
-		</div>
 
-		<hr />
-	</div>
+			<p id="desktop-navigation-bar">
+				「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
+				<a href="/updates">Manga & LN Updates</a> •
+				<a href="/tools">Tools</a> • {#if data.user}
+					<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
+				{/if} <a href="/settings">Settings</a> 」
+			</p>
+
+			<div id="mobile-navigation-bar">
+				<a href="/">Home</a> • <a href="/completed">Completed</a> • <a href="/tools">Tools</a>
+				{#if data.user}
+					• <a href={`/user/${currentUserIdentity.name}`}>Profile</a>
+				{/if}
+				<br />
+				<a href="/settings">Settings</a>
+				<a href="/updates">Manga & LN Updates</a>
+
+				<p />
+			</div>
+
+			<hr />
+		</div>
+	{/if}
 
 	<slot />
 </div>
@@ -107,4 +124,17 @@
 			display: unset;
 		}
 	}
+
+	#hover-header {
+		position: fixed;
+		top: 0.5%;
+		left: 0.25%;
+		z-index: 1000;
+		transition: 0.25s;
+		opacity: 0;
+	}
+
+	#hover-header:hover {
+		opacity: 1;
+	}
 </style>
-- 
cgit v1.2.3