aboutsummaryrefslogtreecommitdiff
path: root/src/routes/+layout.svelte
blob: 19df3f1c9db950e2914bd13934c6c136072eff80 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<script>
	import { env } from '$env/dynamic/public';
	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
	import { onMount } from 'svelte';
	import userIdentity from '../stores/userIdentity';
	import settings from '../stores/settings';

	export let data;

	let currentUserIdentity = { name: '...', id: -1 };

	onMount(async () => {
		settings.subscribe((value) => {
			if (value.forceLightTheme === true) {
				document.documentElement.classList.add('light-theme');
			} else {
				document.documentElement.classList.remove('light-theme');
			}
		});

		if (data.user !== undefined) {
			if ($userIdentity === '') {
				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
			}

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;

			// document.getElementsByTagName('html')[0].classList.add('limit-height');
			// document.getElementsByTagName('body')[0].classList.add('limit-height');
		}
	});
</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">
			「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
			<a href="/updates">Manga & LN Updates</a> •
			<a href="/tools">Tools</a> • <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><br />
			<a href="/settings">Settings</a>
			<a href="/updates">Manga & LN Updates</a>

			<p />
		</div>

		<hr />
	</div>

	<slot />
</div>

<style>
	:global(html.light-theme) {
		filter: invert(0);
	}

	:global(html.light-theme img) {
		filter: invert(0);
	}

	:global(.limit-height) {
		height: 100%;
	}

	#container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	#mobile-navigation-bar {
		display: none;
	}

	@media (max-width: 640px) {
		#desktop-navigation-bar {
			display: none;
		}

		#mobile-navigation-bar {
			display: unset;
		}
	}
</style>