Skip to content

Commit fc51bd7

Browse files
FarhanSharesFarhanShares
committed
init
0 parents  commit fc51bd7

26 files changed

+21040
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example

‎.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false

‎README.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Email App - Farhan Israq
2+
3+
## Setup
4+
5+
Make sure to install the dependencies:
6+
7+
```bash
8+
# npm
9+
npm install
10+
```
11+
12+
## Development Server
13+
14+
Start the development server on `http://localhost:3000`:
15+
16+
```bash
17+
# npm
18+
npm run dev
19+
```
20+
21+
## Production
22+
23+
Build the application for production:
24+
25+
```bash
26+
# npm
27+
npm run build
28+
```
29+
30+
Locally preview production build:
31+
32+
```bash
33+
# npm
34+
npm run preview
35+
```

‎app.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script type="ts" setup>
2+
// redirect to default page (let's say, we don't have any homepage!)
3+
if (['', '/'].includes(useRoute().fullPath )) {
4+
navigateTo('/inbox')
5+
}
6+
</script>
7+
8+
<template>
9+
<div>
10+
<NuxtLayout>
11+
<NuxtPage />
12+
</NuxtLayout>
13+
</div>
14+
</template>

‎assets/css/reset.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var {
8+
border: 0;
9+
font-size: 100%;
10+
font: inherit;
11+
vertical-align: baseline;
12+
}
13+
14+
ul, ol {
15+
list-style: none;
16+
}
17+
18+
a {
19+
text-decoration: none;
20+
}
21+
22+
table {
23+
border-collapse: collapse;
24+
border-spacing: 0;
25+
}
26+
27+
body {
28+
line-height: 1;
29+
background-color: #fff;
30+
}
31+
32+
input, button, textarea, select {
33+
border: none;
34+
outline: none;
35+
}
36+
37+
button {
38+
background: none;
39+
}
40+
41+
a, a:visited, a:hover, a:active {
42+
vertical-align: baseline;
43+
text-decoration: none;
44+
color: inherit;
45+
}

‎assets/scss/app.scss

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
@import "./variables";
2+
3+
* {
4+
font-family: "Plus Jakarta Sans", sans-serif;
5+
}
6+
7+
body {
8+
font-size: 14px;
9+
line-height: 18.12px;
10+
}
11+
12+
input[type=checkbox] {
13+
width: 16px;
14+
height: 16px;
15+
}
16+
17+
.container {
18+
display: flex;
19+
height: 100vh;
20+
}
21+
22+
.sidebar {
23+
flex: 0 0 $sidebar-width;
24+
display: flex;
25+
flex-direction: column;
26+
padding: 20px 0;
27+
border-right: 1px solid $default-border-color;
28+
background: linear-gradient(0deg, #f8fafc, #f8fafc);
29+
}
30+
31+
.sidebar__header {
32+
display: flex;
33+
flex-direction: column;
34+
row-gap: 32px;
35+
margin-bottom: 20px;
36+
}
37+
38+
.sidebar__logo {
39+
padding: 0 24px;
40+
}
41+
42+
.sidebar__menu {
43+
list-style: none;
44+
padding: 0 10px;
45+
46+
&-item {
47+
display: flex;
48+
align-items: center;
49+
padding: 12px 24px;
50+
column-gap: 12px;
51+
cursor: pointer;
52+
border-radius: $sidebar-item-radius;
53+
font-size: 16px;
54+
line-height: 20.7px;
55+
56+
&>svg {
57+
width: 24px;
58+
height: 24px;
59+
}
60+
61+
&>span:last-child {
62+
margin-left: auto;
63+
}
64+
}
65+
66+
&-item--active {
67+
background-color: $sidebar-item-active-bg;
68+
}
69+
}
70+
71+
.sidebar__footer {
72+
margin-top: auto;
73+
}
74+
75+
.sidebar__logout {
76+
display: flex;
77+
align-items: center;
78+
padding: 12px 24px;
79+
column-gap: 12px;
80+
border-radius: $sidebar-item-radius;
81+
}
82+
83+
.mailbox-view {
84+
height: 100vh;
85+
overflow-y: auto;
86+
flex: 1 0;
87+
display: flex;
88+
flex-direction: column;
89+
row-gap: 32px;
90+
padding-top: 24px;
91+
color: $default-text-color;
92+
}
93+
94+
.mailbox-view__header {
95+
display: flex;
96+
flex-direction: column;
97+
row-gap: 32px;
98+
padding: 0 24px;
99+
100+
&>h1 {
101+
font-size: 32px;
102+
line-height: 41.41px;
103+
}
104+
105+
&-content {
106+
display: flex;
107+
justify-content: space-between;
108+
align-items: center;
109+
110+
&>button {
111+
display: flex;
112+
column-gap: 12px;
113+
align-items: center;
114+
font-weight: 500;
115+
}
116+
117+
&>button:hover {
118+
text-decoration: underline;
119+
cursor: pointer;
120+
}
121+
122+
&>div {
123+
display: flex;
124+
column-gap: 40px;
125+
align-items: center;
126+
}
127+
}
128+
129+
&-action {
130+
display: inline-flex;
131+
column-gap: 12px;
132+
align-items: center;
133+
cursor: pointer;
134+
135+
&>svg {
136+
width: 19px;
137+
height: 19px;
138+
}
139+
}
140+
}
141+
142+
.mailbox-view__content {
143+
display: grid;
144+
grid-auto-flow: row;
145+
grid-auto-rows: 60px;
146+
height: 100%;
147+
overflow-y: auto;
148+
149+
.mailbox-view__content__item {
150+
display: flex;
151+
column-gap: 20px;
152+
padding: 0 24px;
153+
align-items: center;
154+
border: 1px solid $default-border-color;
155+
font-size: 14px;
156+
font-weight: 500;
157+
cursor: pointer;
158+
159+
&.mailbox-view__content__item--read {
160+
opacity: 0.5;
161+
}
162+
163+
&:nth-child(even) {
164+
background-color: $even-mail-item;
165+
}
166+
167+
&:nth-child(odd) {
168+
background-color: $odd-mail-item;
169+
}
170+
171+
&:hover {
172+
background-color: $hover-mail-item;
173+
}
174+
}
175+
}
176+
177+
.mail-view {
178+
position: fixed;
179+
inset: 0;
180+
display: flex;
181+
opacity: 0;
182+
pointer-events: none;
183+
background-color: transparent;
184+
transition: opacity 400ms 0s ease, background-color 400ms 0s ease;
185+
186+
&.mail-view--open {
187+
opacity: 1;
188+
background-color: #4c5764cc;
189+
backdrop-filter: blur(1px);
190+
pointer-events: auto;
191+
192+
.mail-view__backdrop {
193+
pointer-events: auto;
194+
}
195+
196+
.mail-view__body {
197+
transform: translateX(0);
198+
}
199+
}
200+
}
201+
202+
.mail-view__backdrop {
203+
width: 40%;
204+
height: 100%;
205+
display: flex;
206+
pointer-events: none;
207+
}
208+
209+
.mail-view__body {
210+
transform: translateX(100%);
211+
transition: transform 400ms 0s ease;
212+
margin-left: auto;
213+
width: 60%;
214+
padding: 32px;
215+
display: flex;
216+
row-gap: 32px;
217+
flex-direction: column;
218+
background-color: white;
219+
border: 1px solid $default-border-color;
220+
}
221+
222+
.mail-view__header {
223+
display: flex;
224+
align-items: center;
225+
justify-content: space-between;
226+
227+
&>div {
228+
display: flex;
229+
column-gap: 40px;
230+
}
231+
232+
&-action {
233+
display: flex;
234+
align-items: center;
235+
column-gap: 12px;
236+
cursor: pointer;
237+
}
238+
}
239+
240+
241+
.mail-view__content {
242+
display: flex;
243+
flex-direction: column;
244+
row-gap: 20px;
245+
246+
&>h1 {
247+
font-size: 20px;
248+
line-height: 25.88px;
249+
font-weight: 500;
250+
color: #121829;
251+
}
252+
253+
&>p {
254+
font-size: 14px;
255+
line-height: 18.12px;
256+
color: #4b5563;
257+
}
258+
}

‎assets/scss/variables.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$sidebar-item-radius: 54px;
2+
$sidebar-item-active-bg: #d6e2fb;
3+
$sidebar-width: 260px;
4+
$default-border-color: #E5E7EB;
5+
$default-text-color: #121829;
6+
$odd-mail-item: #FFFFFF;
7+
$even-mail-item: #F3F6FB;
8+
$hover-mail-item: #D1E2FF;

0 commit comments

Comments
 (0)