feat(layout): small navigation

3 files changed, 72 insertions, 30 deletions

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>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index b8d368cc..c08e0af6 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -50,6 +50,16 @@
 		<SettingCheckboxToggle setting="limitListHeight" text="Limit list area to screen" />
 		<SettingCheckboxToggle setting="displaySocialButton" text="Show social button" />
 		<SettingCheckboxToggle setting="displayUnresolved" text="Display unresolved media" />
+
+		<SettingCheckboxToggle setting="hoverNavigation" text="Display navigation as hover bar">
+			<SettingHint lineBreak>
+				Minimises and moves navigation to the top-left corner of the screen, visible only on hover.
+				Intended for use on desktop devices.
+			</SettingHint>
+		</SettingCheckboxToggle>
+
+		<br />
+
 		<SettingCheckboxToggle setting="displayNotStarted" text="Show media with zero progress">
 			<SettingHint lineBreak>
 				May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 5ffae4f5..85d137d5 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -16,6 +16,7 @@ export interface Settings {
 	limitListHeight: boolean;
 	displaySocialButton: boolean;
 	disableGuessing: boolean;
+	hoverNavigation: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -32,7 +33,8 @@ const defaultSettings: Settings = {
 	displayPausedMedia: true,
 	limitListHeight: false,
 	displaySocialButton: false,
-	disableGuessing: false
+	disableGuessing: false,
+	hoverNavigation: false
 };
 
 const createStore = () => {