fix: responsive layout

Author: grv-saini-20

platforms/metagram/src/routes/(protected)/+layout.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { BottomNav } from '$lib/fragments';
 	let { children } = $props();
+
+	let route = $derived(page.url.pathname);
 </script>
 
 <main class="block h-[100dvh] grid-cols-[22vw_auto_31vw] md:grid">
-	<div class="hidden bg-red-300 md:block">Sidebar</div>
-	{@render children()}
-	<div class="hidden bg-blue-200 md:block">Right Asie</div>
+	<aside class="hidden border border-y-0 border-e-gray-200 md:block">Sidebar</aside>
+	<section>
+		{@render children()}
+	</section>
+	{#if !route.endsWith('/messages')}
+		<aside class="hidden border border-y-0 border-s-gray-200 md:block">Right Aside</aside>
+	{/if}
 	<BottomNav profileSrc="https://picsum.photos/200" />
 </main>

platforms/metagram/src/routes/(protected)/messages/+page.svelte

@@ -1,4 +1,4 @@
 <script lang="ts">
 </script>
 
-<h1>Messages</h1>
+<main>Messages</main>