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/lib/fragments/SideBar/SideBar.stories.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import { SideBar } from '..';
+
+export default {
+	title: 'UI/SideBar',
+	component: SideBar,
+	tags: ['autodocs'],
+	render: (args: { Component: SideBar; props: ComponentProps<typeof SideBar> }) => ({
+		Component: SideBar,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {}
+};

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

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
+	import { goto } from '$app/navigation';
+	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
+	import { page } from '$app/state';
+
+	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
+		activeTab?: string;
+		profileSrc: string;
+	}
+	let {
+		activeTab = $bindable('home'),
+		profileSrc = 'https://picsum.photos/200'
+	}: IBottomNavProps = $props();
+
+	const tabs = ['home', 'discover', 'post', 'messages', 'profile'];
+	let _activeTab = $derived(page.url.pathname);
+
+	const handleNavClick = (newTab: string) => {
+		activeTab = newTab;
+		goto(`/${newTab}`);
+	};
+
+	$effect(() => {
+		activeTab = _activeTab.split('/').pop() ?? '';
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<nav
+	aria-label="Main navigation"
+	class="hidden h-screen border border-y-0 border-e-gray-200 py-14 md:flex md:justify-center"
+	role="tablist"
+>
+	<div class="flex flex-col items-start justify-start gap-12">
+        <h1 class="text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]">Pictique</h1>
+		<button
+			type="button"
+			class="flex items-center gap-2"
+			aria-current={activeTab === 'home' ? 'page' : undefined}
+			onclick={() => handleNavClick('home')}
+		>
+			<Home
+				size="24px"
+				color={activeTab === 'home'
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-400)'}
+				fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			/>
+			<h3 class={`${activeTab === 'home' ? 'text-brand-burnt-orange' : 'text-black-800'}`}>
+				Feed
+			</h3>
+		</button>
+
+		<button
+			type="button"
+			class="flex items-center gap-2"
+			aria-current={activeTab === 'discover' ? 'page' : undefined}
+			onclick={() => handleNavClick('discover')}
+		>
+			<Search
+				size="24px"
+				color={activeTab === 'discover'
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-400)'}
+				fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			/>
+			<h3
+				class={`${activeTab === 'discover' ? 'text-brand-burnt-orange' : 'text-black-800'}`}
+			>
+				Search
+			</h3>
+		</button>
+
+		<button
+			type="button"
+			class="flex items-center gap-2"
+			aria-current={activeTab === 'post' ? 'page' : undefined}
+			onclick={() => handleNavClick('post')}
+		>
+			<Camera
+				size="24px"
+				color={activeTab === 'post'
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-400)'}
+				fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			/>
+			<h3 class={`${activeTab === 'post' ? 'text-brand-burnt-orange' : 'text-black-800'}`}>
+				Upload a photo
+			</h3>
+		</button>
+
+		<button
+			type="button"
+			class="flex items-center gap-2"
+			aria-current={activeTab === 'messages' ? 'page' : undefined}
+			onclick={() => handleNavClick('messages')}
+		>
+			<CommentsTwo
+				size="24px"
+				color={activeTab === 'messages'
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-400)'}
+				fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			/>
+			<h3
+				class={`${activeTab === 'messages' ? 'text-brand-burnt-orange' : 'text-black-800'}`}
+			>
+				Messages
+			</h3>
+		</button>
+
+		<button
+			type="button"
+			class="flex items-center gap-2"
+			aria-current={activeTab === 'profile' ? 'page' : undefined}
+			onclick={() => handleNavClick('profile')}
+		>
+			<span
+				class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
+			>
+				<img
+					width="24px"
+					height="24px"
+					class="aspect-square rounded-full"
+					src={profileSrc}
+					alt="profile"
+				/>
+			</span>
+			<h3 class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'}`}>
+				Profile
+			</h3>
+		</button>
+	</div>
+</nav>

platforms/metagram/src/lib/fragments/index.ts

@@ -7,3 +7,4 @@ export { default as Drawer } from './Drawer/Drawer.svelte';
 export { default as Message } from './Message/Message.svelte';
 export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
+export { default as SideBar } from './SideBar/SideBar.svelte';

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

@@ -1,9 +1,19 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { BottomNav } from '$lib/fragments';
+	import SideBar from '$lib/fragments/SideBar/SideBar.svelte';
 	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">
+	<SideBar profileSrc="https://picsum.photos/200" />
+	<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>