Skip to content

Commit 9e98d04

Browse files
grv-saini-20grv-saini-20
authored
feat: responsive setup for mobile and desktop (#159)
* feat: responsive setup for mobile and desktop * fix: width of sidebar and rightaside * fix: responsive layout * feat: SideBar * fix: added some finishing touches to sidebar and button * fix: prevent pages transition on desktop * fix: icon center * feat: settings page and icon added
1 parent 0b2f709 commit 9e98d04

File tree

16 files changed

+283
-32
lines changed

16 files changed

+283
-32
lines changed

‎platforms/metagram/src/app.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
body {
1212
font-family: 'Geist', sans-serif;
1313
padding-top: env(safe-area-inset-top);
14-
padding-bottom: env(safe-area-inset-bottom);
15-
padding-left: env(safe-area-inset-left);
16-
padding-right: env(safe-area-inset-right);
14+
padding-bottom: env(safe-area-inset-bottom);
15+
padding-left: env(safe-area-inset-left);
16+
padding-right: env(safe-area-inset-right);
1717
background-color: white;
1818
}
1919

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
4141
<nav
4242
aria-label="Main navigation"
43-
class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 sm:hidden"
43+
class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 md:hidden"
4444
role="tablist"
4545
>
4646
<button

‎platforms/metagram/src/lib/fragments/SideBar/SideBar.stories.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { ComponentProps } from 'svelte';
2+
import { SideBar } from '..';
3+
4+
export default {
5+
title: 'UI/SideBar',
6+
component: SideBar,
7+
tags: ['autodocs'],
8+
render: (args: { Component: SideBar; props: ComponentProps<typeof SideBar> }) => ({
9+
Component: SideBar,
10+
props: args
11+
})
12+
};
13+
14+
export const Primary = {
15+
args: {}
16+
};

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

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from 'svelte/elements';
3+
import { Home, CommentsTwo, Search, Camera, Settings } from '$lib/icons';
4+
import { goto } from '$app/navigation';
5+
import { page } from '$app/state';
6+
import Button from '$lib/ui/Button/Button.svelte';
7+
import { cn } from '$lib/utils';
8+
9+
interface ISideBarProps extends HTMLAttributes<HTMLElement> {
10+
activeTab?: string;
11+
profileSrc: string;
12+
handlePost?: () => Promise<void>;
13+
}
14+
let {
15+
activeTab = $bindable('home'),
16+
profileSrc = 'https://picsum.photos/200',
17+
handlePost,
18+
...restProps
19+
}: ISideBarProps = $props();
20+
21+
let _activeTab = $derived(page.url.pathname);
22+
23+
const handleNavClick = (newTab: string) => {
24+
activeTab = newTab;
25+
goto(`/${newTab}`);
26+
};
27+
28+
$effect(() => {
29+
activeTab = _activeTab.split('/').pop() ?? '';
30+
});
31+
32+
const cBase =
33+
'hidden h-screen border border-y-0 border-e-gray-200 py-14 md:flex md:justify-center';
34+
</script>
35+
36+
<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
37+
<nav
38+
{...restProps}
39+
aria-label="Main navigation"
40+
class={cn([cBase, restProps.class].join(' '))}
41+
role="tablist"
42+
>
43+
<div class="flex flex-col items-start justify-start gap-12">
44+
<h1 class="bg-[image:var(--color-brand-gradient)] bg-clip-text text-transparent">
45+
Pictique
46+
</h1>
47+
<button
48+
type="button"
49+
class="flex items-center gap-2"
50+
aria-current={activeTab === 'home' ? 'page' : undefined}
51+
onclick={() => handleNavClick('home')}
52+
>
53+
<Home
54+
size="24px"
55+
color={activeTab === 'home'
56+
? 'var(--color-brand-burnt-orange)'
57+
: 'var(--color-black-400)'}
58+
fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
59+
/>
60+
<h3
61+
class={`${activeTab === 'home' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
62+
>
63+
Feed
64+
</h3>
65+
</button>
66+
67+
<button
68+
type="button"
69+
class="flex items-center gap-2"
70+
aria-current={activeTab === 'discover' ? 'page' : undefined}
71+
onclick={() => handleNavClick('discover')}
72+
>
73+
<Search
74+
size="24px"
75+
color={activeTab === 'discover'
76+
? 'var(--color-brand-burnt-orange)'
77+
: 'var(--color-black-400)'}
78+
fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange)' : 'white'}
79+
/>
80+
<h3
81+
class={`${activeTab === 'discover' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
82+
>
83+
Search
84+
</h3>
85+
</button>
86+
87+
<button
88+
type="button"
89+
class="flex items-center gap-2"
90+
aria-current={activeTab === 'post' ? 'page' : undefined}
91+
onclick={() => handleNavClick('post')}
92+
>
93+
<Camera
94+
size="24px"
95+
color={activeTab === 'post'
96+
? 'var(--color-brand-burnt-orange)'
97+
: 'var(--color-black-400)'}
98+
fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange)' : 'white'}
99+
/>
100+
<h3
101+
class={`${activeTab === 'post' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
102+
>
103+
Upload a photo
104+
</h3>
105+
</button>
106+
107+
<button
108+
type="button"
109+
class="flex items-center gap-2"
110+
aria-current={activeTab === 'messages' ? 'page' : undefined}
111+
onclick={() => handleNavClick('messages')}
112+
>
113+
<CommentsTwo
114+
size="24px"
115+
color={activeTab === 'messages'
116+
? 'var(--color-brand-burnt-orange)'
117+
: 'var(--color-black-400)'}
118+
fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
119+
/>
120+
<h3
121+
class={`${activeTab === 'messages' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
122+
>
123+
Messages
124+
</h3>
125+
</button>
126+
127+
<button
128+
type="button"
129+
class="flex items-center gap-2"
130+
aria-current={activeTab === 'settings' ? 'page' : undefined}
131+
onclick={() => handleNavClick('settings')}
132+
>
133+
<Settings
134+
size="24px"
135+
color={activeTab === 'settings'
136+
? 'var(--color-brand-burnt-orange)'
137+
: 'var(--color-black-400)'}
138+
fill={activeTab === 'settings' ? 'var(--color-brand-burnt-orange)' : 'white'}
139+
/>
140+
<h3
141+
class={`${activeTab === 'settings' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
142+
>
143+
Settings
144+
</h3>
145+
</button>
146+
147+
<button
148+
type="button"
149+
class="flex items-center gap-2"
150+
aria-current={activeTab === 'profile' ? 'page' : undefined}
151+
onclick={() => handleNavClick('profile')}
152+
>
153+
<span
154+
class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
155+
>
156+
<img
157+
width="24px"
158+
height="24px"
159+
class="aspect-square rounded-full"
160+
src={profileSrc}
161+
alt="profile"
162+
/>
163+
</span>
164+
<h3
165+
class={`${activeTab === 'profile' ? 'text-brand-burnt-orange' : 'text-black-800'} mt-[4px]`}
166+
>
167+
Profile
168+
</h3>
169+
</button>
170+
{#if handlePost}
171+
<Button size="sm" variant="secondary" callback={handlePost}>Post a photo</Button>
172+
{/if}
173+
</div>
174+
</nav>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export { default as Drawer } from './Drawer/Drawer.svelte';
77
export { default as Message } from './Message/Message.svelte';
88
export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
99
export { default as Modal } from './Modal/Modal.svelte';
10+
export { default as SideBar } from './SideBar/SideBar.svelte';

‎platforms/metagram/src/lib/icons/Settings.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import type { ISvgProps } from './../types';
3+
4+
let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
5+
</script>
6+
7+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size} color={color} fill="none">
8+
<path d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z" stroke={color} stroke-width="1.5"></path>
9+
<path d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z" stroke={color} stroke-width="1.5" stroke-linecap="round"></path>
10+
</svg>
11+

‎platforms/metagram/src/lib/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ export { default as Flash } from './Flash.svelte';
88
export { default as CommentsTwo } from './CommentsTwo.svelte';
99
export { default as Search } from './Search.svelte';
1010
export { default as Camera } from './Camera.svelte';
11+
export { default as Settings } from "./Settings.svelte";

‎platforms/metagram/src/lib/ui/Button/Button.svelte‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import type { HTMLButtonAttributes } from 'svelte/elements';
44
55
interface IButtonProps extends HTMLButtonAttributes {
6-
variant?: 'primary' | 'danger';
6+
variant?: 'primary' | 'secondary' | 'danger';
77
isLoading?: boolean;
88
callback?: () => Promise<void> | void;
99
blockingClick?: boolean;
@@ -39,13 +39,35 @@
3939
};
4040
4141
const variantClasses = {
42-
primary: { background: 'bg-grey', text: 'text-black-800' },
43-
danger: { background: 'bg-red-500', text: 'text-white' }
42+
primary: {
43+
background: 'bg-grey',
44+
text: 'text-black-800',
45+
border: 'border border-black-400'
46+
},
47+
secondary: {
48+
background: 'bg-brand-burnt-orange',
49+
text: 'text-white',
50+
border: 'border border-brand-burnt-orange-700'
51+
},
52+
danger: { background: 'bg-red-500', text: 'text-white', border: 'border border-red-700' }
4453
};
4554
4655
const disabledVariantClasses = {
47-
primary: { background: 'bg-grey/50', text: 'text-black-800/50' },
48-
danger: { background: 'bg-red-500/50', text: 'text-white/50' }
56+
primary: {
57+
background: 'bg-grey/50',
58+
text: 'text-black-800/50',
59+
border: 'border border-black-400/50'
60+
},
61+
secondary: {
62+
background: 'bg-brand-burnt-orange/50',
63+
text: 'text-white/50',
64+
border: 'border border-brand-burnt-orange-700/50'
65+
},
66+
danger: {
67+
background: 'bg-red-500/50',
68+
text: 'text-white/50',
69+
border: 'border border-red-700/50'
70+
}
4971
};
5072
5173
const sizeVariant = {
@@ -55,7 +77,7 @@
5577
5678
const classes = $derived({
5779
common: cn(
58-
'cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100',
80+
'cursor-pointer w-full flex items-center justify-center rounded-full font-semibold duration-100',
5981
sizeVariant[size]
6082
),
6183
background: disabled
@@ -64,6 +86,9 @@
6486
text: disabled
6587
? disabledVariantClasses[variant].text || variantClasses[variant].text
6688
: variantClasses[variant].text,
89+
border: disabled
90+
? disabledVariantClasses[variant].border || variantClasses[variant].border
91+
: variantClasses[variant].border,
6792
disabled: 'cursor-not-allowed'
6893
});
6994
</script>
@@ -75,6 +100,7 @@
75100
classes.common,
76101
classes.background,
77102
classes.text,
103+
classes.border,
78104
disabled && classes.disabled,
79105
restProps.class
80106
].join(' ')

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

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,46 @@
11
<script lang="ts">
2-
import { BottomNav } from '$lib/fragments';
2+
import { page } from '$app/state';
3+
import { BottomNav, Header } from '$lib/fragments';
4+
import SideBar from '$lib/fragments/SideBar/SideBar.svelte';
35
let { children } = $props();
6+
7+
let route = $derived(page.url.pathname);
8+
let heading = $state("");
9+
10+
$effect(() => {
11+
switch (route) {
12+
case "/home":
13+
heading = "Feed";
14+
break;
15+
case "/discover":
16+
heading = "Search";
17+
break;
18+
case "/post":
19+
heading = "Post";
20+
break;
21+
case "/messages":
22+
heading = "Messages";
23+
break;
24+
case "/settings":
25+
heading = "Settings";
26+
break;
27+
case "/profile":
28+
heading = "Profile";
29+
break;
30+
}
31+
})
432
</script>
533

6-
<main>
7-
{@render children()}
34+
<main class="block h-[100dvh] grid-cols-[22vw_auto_31vw] md:grid">
35+
<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
36+
<section class="md:pt-10">
37+
<Header variant="primary" {heading}/>
38+
{@render children()}
39+
</section>
40+
{#if !route.endsWith('/messages')}
41+
<aside class="hidden border border-y-0 border-s-gray-200 md:block md:pt-14">
42+
Right Aside
43+
</aside>
44+
{/if}
845
<BottomNav profileSrc="https://picsum.photos/200" />
946
</main>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
<script lang="ts">
22
</script>
3-
4-
<h1>Discover Page</h1>

0 commit comments

Comments
 (0)