feat: responsive setup for mobile and desktop

platforms/metagram/src/app.css

@@ -11,9 +11,9 @@
 body {
 	font-family: 'Geist', sans-serif;
 	padding-top: env(safe-area-inset-top);
-    padding-bottom: env(safe-area-inset-bottom);
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-left: env(safe-area-inset-left);
+	padding-right: env(safe-area-inset-right);
 	background-color: white;
 }
 

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte

@@ -40,7 +40,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <nav
 	aria-label="Main navigation"
-	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 sm:hidden"
+	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 md:hidden"
 	role="tablist"
 >
 	<button

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

@@ -1,9 +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>
-	{@render children()}
+<main class="block h-[100dvh] grid-cols-[22vw_auto_31vw] md:grid">
+	<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)/home/+page.svelte

@@ -1,12 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
-	import { Button } from '$lib/ui';
 </script>
 
-<h1>Home</h1>
-<Button
-	callback={async () => {
-		(isNavigatingThroughNav.value = false), goto('/discover');
-	}}>discover</Button
->
+<main>Main</main>

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

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

platforms/metagram/src/routes/+layout.svelte

@@ -33,6 +33,6 @@
 	});
 </script>
 
-<main>
+<main class="h-[100dvh] px-4 md:px-0">
 	{@render children()}
 </main>