Fixed GoogleAuth and clearMessages again and updated the routing and navigation

src/lib/components/Apps.svelte

@@ -1,17 +1,26 @@
 <script>
+	import Icon from '@iconify/svelte';
+	import { drawerStore } from '@skeletonlabs/skeleton';
+
 	const routes = [
-		{ path: '/', name: 'Home', icon: '🏠' },
-		{ path: '/wallet', name: 'Wallet', icon: '💼' },
-		{ path: '/helloearth', name: 'Hello Earth', icon: '🌍' },
-		{ path: '/login', name: 'Login', icon: '🔑' }
+		{ path: '/', name: 'Home', icon: 'iconoir:home-simple-door' },
+		{ path: '/messages', name: 'Messages', icon: 'iconoir:message-text' },
+		{ path: '/wallet', name: 'Wallet', icon: 'iconoir:wallet' },
+		{ path: '/helloearth', name: 'Hello Earth', icon: 'iconoir:planet-sat' }
 	];
+	function closeDrawer() {
+		drawerStore.close();
+	}
 </script>
 
-<div class="logo-cloud grid-cols-1 lg:!grid-cols-4 gap-1">
-	{#each routes as route, index}
-		<a class="logo-item" href={route.path}>
-			<span>{route.icon}</span>
-			<span>{route.name}</span>
-		</a>
-	{/each}
+<div class="flex flex-col items-start p-4">
+	<h2 class="font-bold h3">Apps</h2>
+	<div class="flex space-x-4">
+		{#each routes as route}
+			<a class="flex flex-col items-center w-28 logo-item" href={route.path} on:click={closeDrawer}>
+				<Icon icon={route.icon} width="96" height="96" />
+				<span class="mt-2 text-center">{route.name}</span>
+			</a>
+		{/each}
+	</div>
 </div>