MetaState-Prototype-Project · JulienAuvo · May 19, 2025 · May 13, 2025 · May 13, 2025 · May 13, 2025
@@ -61,3 +61,90 @@
 		#f7a428 152.07%
 	);
 }
+
+/* Ensure background remains correct during transitions */
+:root[data-transition]::view-transition-group(root),
+:root[data-transition]::view-transition-old(root),
+:root[data-transition]::view-transition-new(root) {
+	background-color: white !important; /* Default to white */
+}
+
+/* Prevent flickering */
+:root[data-transition]::view-transition-old(root),
+:root[data-transition]::view-transition-new(root) {
+	contain: paint;
+	will-change: transform, opacity;
+}
+
+/* Slide-in from the right without fade */
+@keyframes slide-from-right {
+	from {
+		transform: translateX(100%); /* Start from the right */
+		opacity: 1; /* Ensure fully visible */
+	}
+	to {
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
+	}
+}
+
+/* Slide-out to the right without fade */
+@keyframes slide-to-right {
+	from {
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(100%); /* Move to the right */
+		opacity: 1;
+	}
+}
+
+/* Slide-in from the left without fade */
+@keyframes slide-from-left {
+	from {
+		transform: translateX(-100%); /* Start from the left */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
+	}
+}
+
+/* Slide-out to the left without fade */
+@keyframes slide-to-left {
+	from {
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(-100%); /* Move to the left */
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+:root[data-transition]::view-transition-old(root) {
+	animation: 400ms ease-out both fade-out;
+}
+
+:root[data-transition='right']::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+	position: relative;
+	z-index: 1;
+}
+
+:root[data-transition='left']::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+	position: relative;
+	z-index: 1;
+}
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import { BottomNav } from '..';
+
+export default {
+	title: 'UI/BottomNav',
+	component: BottomNav,
+	tags: ['autodocs'],
+	render: (args: { Component: BottomNav; props: ComponentProps<typeof BottomNav> }) => ({
+		Component: BottomNav,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {}
+};
@@ -0,0 +1,130 @@
+<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 previousTab = $state('home');
+	let _activeTab = $derived(page.url.pathname);
+
+	const handleNavClick = (newTab: string) => {
+		// activeTab = newTab;
+		isNavigatingThroughNav.value = true;
+
+		const fromIndex = tabs.indexOf(previousTab);
+		const toIndex = tabs.indexOf(newTab);
+
+		const direction = toIndex > fromIndex ? 'right' : 'left';
+		document.documentElement.setAttribute('data-transition', direction);
+
+		previousTab = newTab;
+		goto(`/${newTab}`);
+	};
+
+	$effect(() => {
+		activeTab = _activeTab.split('/').pop() ?? '';
+	});
+</script>
+
+<!-- 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"
+	role="tablist"
+>
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		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'}
+		/>
+	</button>
+
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		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'}
+		/>
+	</button>
+
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		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'}
+		/>
+	</button>
+
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		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'}
+		/>
+	</button>
+
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		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>
+	</button>
+</nav>
+
+<style>
+	nav {
+		view-transition-name: bottomNav;
+	}
+</style>
@@ -1 +1,2 @@
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 25 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M8.00004 6V6.75C8.2508 6.75 8.48498 6.62468 8.62408 6.41603L8.00004 6ZM17 6L16.376 6.41603C16.5151 6.62467 16.7492 6.75 17 6.75V6ZM3.25004 13.5V11.5H1.75004V13.5H3.25004ZM8.18854 4.36518L7.376 5.58398L8.62408 6.41603L9.43661 5.19723L8.18854 4.36518ZM12.1407 2.25C11.6305 2.25 11.1969 2.24925 10.8369 2.28282C10.4615 2.31783 10.1124 2.39366 9.7728 2.5754L10.4806 3.89791C10.5831 3.843 10.7171 3.8005 10.9762 3.77634C11.2506 3.75075 11.6031 3.75 12.1407 3.75V2.25ZM9.43661 5.19723C9.73486 4.74985 9.93097 4.45705 10.1045 4.24286C10.2683 4.04074 10.378 3.95282 10.4806 3.89791L9.7728 2.5754C9.43322 2.75714 9.17649 3.00553 8.93908 3.29853C8.71144 3.57948 8.47158 3.94062 8.18854 4.36518L9.43661 5.19723ZM3.25004 11.5C3.25004 10.0499 3.25818 9.49107 3.38998 9.05658L1.95457 8.62115C1.7419 9.32224 1.75004 10.159 1.75004 11.5H3.25004ZM8.00004 5.25C6.65904 5.25 5.82228 5.24186 5.12119 5.45454L5.55661 6.88995C5.99111 6.75814 6.54991 6.75 8.00004 6.75V5.25ZM3.38998 9.05658C3.70507 8.01787 4.51791 7.20503 5.55661 6.88995L5.12119 5.45454C3.60308 5.91505 2.41509 7.10304 1.95457 8.62115L3.38998 9.05658ZM10 20.25C8.33793 20.25 7.15728 20.2488 6.25137 20.1417C5.36201 20.0366 4.83567 19.8384 4.43826 19.5123L3.48667 20.6718C4.19562 21.2536 5.04432 21.5095 6.07529 21.6313C7.0897 21.7512 8.37467 21.75 10 21.75V20.25ZM1.75004 13.5C1.75004 15.1254 1.74881 16.4103 1.86872 17.4248C1.99058 18.4557 2.24642 19.3044 2.82824 20.0134L3.98776 19.0618C3.66162 18.6644 3.46347 18.138 3.35835 17.2487C3.25127 16.3428 3.25004 15.1621 3.25004 13.5H1.75004ZM4.43826 19.5123C4.2737 19.3772 4.12281 19.2263 3.98776 19.0618L2.82824 20.0134C3.02562 20.2539 3.24616 20.4744 3.48667 20.6718L4.43826 19.5123ZM23.25 13.5V11.5H21.75V13.5H23.25ZM15.5634 5.19722L16.376 6.41603L17.624 5.58397L16.8115 4.36517L15.5634 5.19722ZM12.8593 3.75C13.3969 3.75 13.7494 3.75075 14.0238 3.77634C14.2829 3.80049 14.4169 3.84299 14.5195 3.89791L15.2272 2.57539C14.8877 2.39366 14.5386 2.31783 14.1631 2.28282C13.8031 2.24925 13.3695 2.25 12.8593 2.25V3.75ZM16.8115 4.36517C16.5285 3.94062 16.2886 3.57948 16.061 3.29853C15.8235 3.00553 15.5668 2.75713 15.2272 2.57539L14.5195 3.89791C14.6221 3.95282 14.7317 4.04074 14.8955 4.24286C15.0691 4.45705 15.2652 4.74985 15.5634 5.19722L16.8115 4.36517ZM23.25 11.5C23.25 10.159 23.2581 9.32224 23.0455 8.62115L21.6101 9.05657C21.7419 9.49107 21.75 10.0499 21.75 11.5H23.25ZM17 6.75C18.4501 6.75 19.0089 6.75814 19.4434 6.88994L19.8789 5.45453C19.1778 5.24186 18.341 5.25 17 5.25V6.75ZM23.0455 8.62115C22.585 7.10304 21.397 5.91505 19.8789 5.45453L19.4434 6.88994C20.4821 7.20503 21.295 8.01787 21.6101 9.05657L23.0455 8.62115ZM15 21.75C16.6254 21.75 17.9103 21.7512 18.9248 21.6313C19.9557 21.5095 20.8044 21.2536 21.5134 20.6718L20.5618 19.5123C20.1644 19.8384 19.638 20.0366 18.7487 20.1417C17.8428 20.2488 16.6621 20.25 15 20.25V21.75ZM21.75 13.5C21.75 15.1621 21.7488 16.3428 21.6417 17.2487C21.5366 18.138 21.3384 18.6644 21.0123 19.0618L22.1718 20.0134C22.7536 19.3044 23.0095 18.4557 23.1313 17.4248C23.2512 16.4103 23.25 15.1254 23.25 13.5H21.75ZM21.5134 20.6718C21.7539 20.4744 21.9744 20.2539 22.1718 20.0134L21.0123 19.0618C20.8772 19.2263 20.7263 19.3772 20.5618 19.5123L21.5134 20.6718ZM12.8593 2.25H12.1407V3.75H12.8593V2.25ZM10 21.75H15V20.25H10V21.75Z"
+		fill={color}
+	/>
+	<path
+		d="M12.5 9V17M16.5 13H8.5"
+		stroke={color}
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
 	viewBox="0 0 24 24"
-	fill="none"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >

@@ -1,37 +1,30 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
-	viewBox="0 0 24 24"
-	fill="none"
+	viewBox="0 0 25 24"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >
 	<path
-		d="M3.16405 11.3497L4 11.5587L4.45686 16.1005C4.715 18.6668 4.84407 19.9499 5.701 20.7249C6.55793 21.5 7.84753 21.5 10.4267 21.5H13.5733C16.1525 21.5 17.4421 21.5 18.299 20.7249C19.1559 19.9499 19.285 18.6668 19.5431 16.1005L20 11.5587L20.836 11.3497C21.5201 11.1787 22 10.564 22 9.85882C22 9.35735 21.7553 8.88742 21.3445 8.59985L13.1469 2.86154C12.4583 2.37949 11.5417 2.37949 10.8531 2.86154L2.65549 8.59985C2.24467 8.88742 2 9.35735 2 9.85882C2 10.564 2.47993 11.1787 3.16405 11.3497Z"
-		fill="url(#paint0_linear_1643_261)"
+		d="M3.66405 11.3497L4.5 11.5587L4.95686 16.1005C5.215 18.6668 5.34407 19.9499 6.201 20.7249C7.05793 21.5 8.34753 21.5 10.9267 21.5H14.0733C16.6525 21.5 17.9421 21.5 18.799 20.7249C19.6559 19.9499 19.785 18.6668 20.0431 16.1005L20.5 11.5587L21.336 11.3497C22.0201 11.1787 22.5 10.564 22.5 9.85882C22.5 9.35735 22.2553 8.88742 21.8445 8.59985L13.6469 2.86154C12.9583 2.37949 12.0417 2.37949 11.3531 2.86154L3.15549 8.59985C2.74467 8.88742 2.5 9.35735 2.5 9.85882C2.5 10.564 2.97993 11.1787 3.66405 11.3497Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
 	/>
 	<path
-		d="M12 17C13.3807 17 14.5 15.8807 14.5 14.5C14.5 13.1193 13.3807 12 12 12C10.6193 12 9.5 13.1193 9.5 14.5C9.5 15.8807 10.6193 17 12 17Z"
+		d="M12.5 17C13.8807 17 15 15.8807 15 14.5C15 13.1193 13.8807 12 12.5 12C11.1193 12 10 13.1193 10 14.5C10 15.8807 11.1193 17 12.5 17Z"
 		fill="white"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
 	/>
-	<defs>
-		<linearGradient
-			id="paint0_linear_1643_261"
-			x1="-5.55319"
-			y1="5.16"
-			x2="33.2477"
-			y2="6.45747"
-			gradientUnits="userSpaceOnUse"
-		>
-			<stop stop-color="#4D44EF" />
-			<stop offset="0.5" stop-color="#F35B5B" />
-			<stop offset="1" stop-color="#F7A428" />
-		</linearGradient>
-	</defs>
 </svg>
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M17 17L21 21"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
@@ -6,3 +6,5 @@ export { default as VerticalDots } from './VerticalDots.svelte';
 export { default as Home } from './Home.svelte';
 export { default as Flash } from './Flash.svelte';
 export { default as CommentsTwo } from './CommentsTwo.svelte';
+export { default as Search } from './Search.svelte';
+export { default as Camera } from './Camera.svelte';
@@ -0,0 +1,3 @@
+export const isNavigatingThroughNav = $state({
+	value: false
+});
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { BottomNav } from '$lib/fragments';
+	let { children } = $props();
+</script>
+
+<main>
+	{@render children()}
+	<BottomNav profileSrc="https://picsum.photos/200" />
+</main>
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Discover Page</h1>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as BottomNav } from './BottomNav/BottomNav.svelte';
		export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';