Add mock catalog

src/lib/components/Button.svelte

@@ -3,7 +3,7 @@
 
 	type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
 
-	export let variant: ButtonType;
+	export let variant: ButtonType = 'primary';
 
 	function getStyles(buttonType: ButtonType) {
 		switch (buttonType) {

src/lib/components/Catalog.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import image1 from '$lib/assets/1.jpg';
+	import image2 from '$lib/assets/2.jpg';
+	import image3 from '$lib/assets/3.jpg';
+	import image4 from '$lib/assets/4.jpg';
+	import image5 from '$lib/assets/5.jpg';
+	import type { Manga } from '$lib/types/catalog';
+	import CatalogItem from './CatalogItem.svelte';
+
+	const manga: Manga[] = [
+		{
+			title: 'Manga name',
+			cover: image1,
+			currentPage: 26,
+			totalPages: 100
+		},
+		{
+			title: 'Another',
+			cover: image2,
+			currentPage: 0,
+			totalPages: 120
+		},
+		{
+			title: 'Awooo',
+			cover: image3,
+			currentPage: 69,
+			totalPages: 96
+		},
+		{
+			title: 'Title',
+			cover: image4,
+			currentPage: 9,
+			totalPages: 59
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		}
+	];
+</script>
+
+<div>
+	{#each manga as item}
+		<CatalogItem manga={item} />
+	{/each}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: row;
+		gap: 20px;
+		flex-wrap: wrap;
+	}
+</style>

src/lib/components/CatalogItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { currentManga } from '$lib/catalog';
+	import type { Manga } from '$lib/types/catalog';
+	import Button from './Button.svelte';
+
+	export let manga: Manga;
+	const { cover, currentPage, title, totalPages } = manga;
+
+	function onClick() {
+		currentManga.set(manga);
+	}
+</script>
+
+<a href={title} on:click={onClick}>
+	<div class="content">
+		{title}
+		<img src={cover} alt={title} />
+		{currentPage} / {totalPages}
+	</div>
+</a>
+
+<style>
+	img {
+		width: 250px;
+		height: 350px;
+		object-fit: contain;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		text-align: center;
+	}
+</style>

src/lib/components/NavBar.svelte

@@ -1,43 +1,19 @@
 <script lang="ts">
 	import { colors } from '$lib/theme';
-	import Button from './Button.svelte';
 
-	let expanded = true;
-
-	function toggle() {
-		expanded = !expanded;
-	}
-	let color = colors.secondaryColor;
+	export let title: string | undefined = undefined;
 </script>
 
-{#if expanded}
-	<nav>
-		<div>
-			<h2>Mokuro</h2>
-			<Button variant="secondary" on:click={toggle}>Settings</Button>
-		</div>
-	</nav>
-{:else}
-	<button on:click={toggle} class="svg">
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke={color}
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line
-				x1="3"
-				y1="18"
-				x2="21"
-				y2="18"
-			/></svg
-		>
-	</button>
-{/if}
+<nav>
+	<div style:background-color={colors.primaryColor}>
+		{#if title}
+			<a href="/"><h2>Back</h2></a>
+			<h2>{title}</h2>
+		{:else}
+			<a href="/"><h2>Mokuro</h2></a>
+		{/if}
+	</div>
+</nav>
 
 <style>
 	nav {
@@ -49,24 +25,8 @@
 		display: flex;
 		flex: 1;
 		justify-content: space-between;
-		background-color: var(--primary-color);
 		padding: 0 10px 0 10px;
 		align-items: center;
 		z-index: 1;
 	}
-	.svg {
-		padding: 10px;
-		margin: 5px;
-		position: fixed;
-		border-radius: 2px;
-		z-index: 1;
-		right: 10px;
-	}
-
-	.svg:active {
-		background-color: var(--primary-accent-color);
-	}
-	svg {
-		z-index: 1;
-	}
 </style>