Start implementing new styles

src/lib/components/NavBar.svelte

@@ -1,14 +1,39 @@
 <script lang="ts">
-	import { Navbar, NavBrand, Modal, Button } from 'flowbite-svelte';
-	import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
+	import {
+		Navbar,
+		NavBrand,
+		Modal,
+		Drawer,
+		Button,
+		CloseButton,
+		Checkbox,
+		Toggle,
+		Select,
+		Input,
+		Label
+	} from 'flowbite-svelte';
+	import {
+		UserSettingsSolid,
+		UploadSolid,
+		InfoCircleSolid,
+		ArrowRightOutline
+	} from 'flowbite-svelte-icons';
 	import FileUpload from './FileUpload.svelte';
 	import { processFiles } from '$lib/upload';
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { sineIn } from 'svelte/easing';
+
+	let transitionParams = {
+		x: 320,
+		duration: 200,
+		easing: sineIn
+	};
 
 	let promise: Promise<void>;
 	let modal = false;
-	let isReader = false;
+	let drawer = true;
+	let isReader = true;
 
 	async function onUpload(files: FileList) {
 		promise = processFiles(files).then(() => {
@@ -19,6 +44,14 @@
 	afterNavigate(() => {
 		isReader = $page.route.id === '/[manga]/[volume]';
 	});
+
+	let selected = 'us';
+
+	let countries = [
+		{ value: 'us', name: 'auto' },
+		{ value: 'ca', name: 'Canada' },
+		{ value: 'fr', name: 'France' }
+	];
 </script>
 
 <div class="relative z-10">
@@ -27,12 +60,51 @@
 			<span class="text-xl font-semibold dark:text-white">Mokuro</span>
 		</NavBrand>
 		<div class="flex md:order-2 gap-5">
-			<UserSettingsSolid class="hover:text-cyan-300" />
-			<UploadSolid class="hover:text-cyan-300" on:click={() => (modal = true)} />
+			<UserSettingsSolid class="hover:text-primary-700" on:click={() => (drawer = false)} />
+			<UploadSolid class="hover:text-primary-700" on:click={() => (modal = true)} />
 		</div>
 	</Navbar>
+	{#if isReader}
+		<UserSettingsSolid
+			class="hover:text-primary-700 absolute right-5 top-5 opacity-10 hover:opacity-100"
+			on:click={() => (drawer = false)}
+		/>
+	{/if}
 </div>
 
+<Drawer
+	placement="right"
+	transitionType="fly"
+	width="lg:w-1/4 md:w-1/2 w-full"
+	{transitionParams}
+	bind:hidden={drawer}
+	id="sidebar1"
+>
+	<div class="flex items-center">
+		<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold">
+			<UserSettingsSolid class="w-4 h-4 mr-2.5" />Settings
+		</h5>
+		<CloseButton on:click={() => (drawer = true)} class="mb-4 dark:text-white" />
+	</div>
+	<div class="flex flex-col gap-5">
+		<Toggle size="small">Right to left</Toggle>
+		<Toggle size="small">Display two pages</Toggle>
+		<Toggle size="small">First page is cover</Toggle>
+		<Toggle size="small">OCR enabled</Toggle>
+		<Toggle size="small">Display box outlines</Toggle>
+		<Toggle size="small">Editable text</Toggle>
+		<Toggle size="small">Toggle boxes on click</Toggle>
+		<div>
+			<Label>Fontsize:</Label>
+			<Select items={countries} bind:value={selected} />
+		</div>
+		<div>
+			<Label>Background color:</Label>
+			<Input type="color" />
+		</div>
+	</div>
+</Drawer>
+
 <Modal title="Upload" bind:open={modal} outsideclose>
 	{#await promise}
 		<h2 class="justify-center flex">Loading...</h2>