Improved phone navigation

materialious/src/lib/Thumbnail.svelte

@@ -287,7 +287,7 @@
 		max-height: 160px;
 	}
 
-	@media screen and (max-width: 1000px) {
+	@media screen and (max-width: 650px) {
 		.thumbnail {
 			max-height: 100%;
 		}

materialious/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { navigating, page } from '$app/stores';
 	import { getFeed } from '$lib/Api/index';
+	import type { Notification } from '$lib/Api/model';
 	import Logo from '$lib/Logo.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Search from '$lib/Search.svelte';
@@ -47,9 +48,6 @@
 	let currentPage: string | null = '';
 	activePage.subscribe((page) => (currentPage = page));
 
-	let searchSuggestions = false;
-	interfaceSearchSuggestions.subscribe((value) => (searchSuggestions = value));
-
 	let sponsorCategoriesList: string[] = [];
 	sponsorBlockCategories.subscribe((value) => (sponsorCategoriesList = value));
 
@@ -292,7 +290,7 @@
 </nav>
 
 <nav class="top">
-	<button class="circle large transparent s m l small-margin" data-ui="#menu-expanded"
+	<button class="circle large transparent m l small-margin" data-ui="#menu-expanded"
 		><i>menu</i></button
 	>
 
@@ -343,6 +341,17 @@
 	{/if}
 </nav>
 
+<nav class="bottom s">
+	{#each pages as page}
+		{#if !page.requiresAuth || isLoggedIn}
+			<a class="round" href={page.href} class:active={currentPage === page.name.toLowerCase()}
+				><i>{page.icon}</i>
+				<div class="tooltip top">{page.name}</div>
+			</a>
+		{/if}
+	{/each}
+</nav>
+
 <dialog class="right" id="dialog-settings">
 	<nav>
 		<h4 class="max">{$_('layout.settings')}</h4>
@@ -706,9 +715,6 @@
 		</nav>
 	</header>
 
-	<div class="s">
-		<Search />
-	</div>
 	<div class="space"></div>
 	{#each pages as page}
 		{#if !page.requiresAuth || isLoggedIn}
@@ -783,4 +789,10 @@
 	form {
 		margin: 1em 0;
 	}
+
+	@media screen and (max-width: 650px) {
+		dialog.right {
+			width: 100%;
+		}
+	}
 </style>