Skip to content

Commit 3c4d2e4

Browse files
kamilmysliwieckamilmysliwiec
committed
chore: add mobile navigation
1 parent 2a3d5af commit 3c4d2e4

File tree

3 files changed

+245
-7
lines changed

3 files changed

+245
-7
lines changed

‎index.html

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,14 @@
109109
><span>DOCUMENTATION</span></a
110110
>
111111
</li>
112-
<li class="hidden-sm hidden-md">
112+
<li class="hidden-xs">
113113
<a
114114
href="https://enterprise.nestjs.com"
115115
title="Enterprise | NestJS - A progressive Node.js framework"
116116
><span>ENTERPRISE</span></a
117117
>
118118
</li>
119-
<li class="hidden-sm hidden-md">
119+
<li class="hidden-xs">
120120
<span
121121
><span class="new">NEW</span
122122
><span class="text">RESOURCES</span>
@@ -213,23 +213,85 @@
213213
/>
214214
</a>
215215
</div>
216-
<nav class="pull-right">
216+
<div class="mobile-nav-icon pull-right">
217+
<span></span>
218+
</div>
219+
<nav class="mobile-nav">
220+
<div class="mobile-nav-head">
221+
<div class="mobile-nav-logo">
222+
<a href="/">
223+
<img
224+
src="img/logo-small-gradient.svg"
225+
alt="NestJS - A progressive Node.js framework"
226+
/>
227+
</a>
228+
</div>
229+
<div class="mobile-nav-close">
230+
<span></span>
231+
</div>
232+
</div>
233+
<ul>
234+
<li>
235+
<a
236+
href="https://enterprise.nestjs.com"
237+
title="Enterprise | NestJS - A progressive Node.js framework"
238+
><span>ENTERPRISE</span></a
239+
>
240+
</li>
241+
<li>
242+
<a href="https://courses.nestjs.com" title="Courses | NestJS - A progressive Node.js framework"
243+
><span>COURSES</span></a
244+
>
245+
</li>
246+
<li>
247+
<a
248+
href="https://jobs.nestjs.com"
249+
title="Jobs | NestJS - A progressive Node.js framework"
250+
><span>JOBS</span><span class="new">NEW</span></a
251+
>
252+
</li>
253+
<li>
254+
<a
255+
href="https://devtools.nestjs.com"
256+
title="Devtools | NestJS - A progressive Node.js framework"
257+
><span>DEVTOOLS</span></a
258+
>
259+
</li>
260+
<li>
261+
<a
262+
href="https://github.com/nestjs/nest"
263+
target="_blank"
264+
title="GitHub | NestJS - A progressive Node.js framework"
265+
><span>GITHUB</span></a
266+
>
267+
</li>
268+
</ul>
269+
<div class="mobile-nav-footer">
270+
<a
271+
href="https://docs.nestjs.com"
272+
title="Documentation | NestJS - A progressive Node.js framework"
273+
class="btn btn-primary d-inline-block"
274+
><span>DOCUMENTATION</span></a
275+
>
276+
</div>
277+
</nav>
278+
<nav class="pull-right hidden-md">
217279
<ul class="nav-wrapper">
218-
<li class="hidden-xs">
280+
<li>
219281
<a
220282
href="https://docs.nestjs.com"
221283
title="Documentation | NestJS - A progressive Node.js framework"
222284
><span>DOCUMENTATION</span></a
223285
>
224286
</li>
225-
<li class="hidden-sm hidden-md">
287+
<li>
226288
<a
227289
href="https://enterprise.nestjs.com"
228290
title="Enterprise | NestJS - A progressive Node.js framework"
229291
><span>ENTERPRISE</span></a
230292
>
231293
</li>
232-
<li class="hidden-sm">
294+
<li>
233295
<span class="sub-nav-trigger"
234296
><span class="new">NEW</span
235297
><span class="text">RESOURCES</span>

‎main.css

Lines changed: 164 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,6 @@ a:active {
9696
-webkit-text-fill-color: transparent;
9797
}
9898

99-
10099
.nav-wrapper a:hover svg path {
101100
fill: url(#primary-gradient);
102101
}
@@ -187,6 +186,170 @@ a:active {
187186
font-weight: 700;
188187
}
189188

189+
.mobile-nav-icon {
190+
position: relative;
191+
margin: 30px 0;
192+
display: none;
193+
}
194+
195+
@media (max-width: 1020px) {
196+
.mobile-nav-icon {
197+
display: block;
198+
}
199+
}
200+
201+
.mobile-nav-icon span {
202+
display: block;
203+
width: 24px;
204+
height: 2px;
205+
background: #fff;
206+
transition: all 100ms ease-in;
207+
-moz-transition: all 100ms ease-in;
208+
-webkit-transition: all 100ms ease-in;
209+
}
210+
211+
.mobile-nav-icon span::before,
212+
.mobile-nav-icon span::after {
213+
content: "";
214+
position: absolute;
215+
width: 24px;
216+
height: 2px;
217+
background: #fff;
218+
transition: all 100ms ease-in;
219+
-moz-transition: all 100ms ease-in;
220+
-webkit-transition: all 100ms ease-in;
221+
}
222+
223+
.mobile-nav-icon span::before {
224+
top: -8px;
225+
}
226+
227+
.mobile-nav-icon span::after {
228+
bottom: -8px;
229+
}
230+
231+
.mobile-nav-icon span:hover {
232+
background: var(--primary-gradient);
233+
}
234+
235+
.mobile-nav-icon span:hover::before,
236+
.mobile-nav-icon span:hover::after {
237+
background: var(--primary-gradient);
238+
}
239+
240+
.mobile-nav {
241+
position: fixed;
242+
left: 0;
243+
top: 0;
244+
right: 0;
245+
bottom: 0;
246+
background: #111111;
247+
z-index: 1000000;
248+
padding: 24px;
249+
display: flex;
250+
flex-direction: column;
251+
display: none;
252+
overflow-y: auto;
253+
}
254+
255+
@media (max-width: 1020px) {
256+
.mobile-nav.open {
257+
display: flex;
258+
}
259+
}
260+
261+
body.mobile-nav-open {
262+
overflow: hidden;
263+
}
264+
265+
.mobile-nav-logo img {
266+
width: 50px;
267+
}
268+
269+
.mobile-nav-head {
270+
display: flex;
271+
justify-content: space-between;
272+
align-items: center;
273+
}
274+
275+
.mobile-nav-close span {
276+
position: relative;
277+
width: 22px;
278+
height: 22px;
279+
display: block;
280+
cursor: pointer;
281+
}
282+
283+
.mobile-nav-close span::before,
284+
.mobile-nav-close span::after {
285+
content: "";
286+
position: absolute;
287+
width: 22px;
288+
height: 2px;
289+
background: #fff;
290+
transition: all 100ms ease-in;
291+
-moz-transition: all 100ms ease-in;
292+
-webkit-transition: all 100ms ease-in;
293+
}
294+
295+
.mobile-nav-close span:hover::before,
296+
.mobile-nav-close span:hover::after {
297+
background: var(--primary-gradient);
298+
}
299+
300+
.mobile-nav-close span::before {
301+
transform: rotate(45deg);
302+
top: 10px;
303+
}
304+
305+
.mobile-nav-close span::after {
306+
transform: rotate(-45deg);
307+
top: 10px;
308+
}
309+
310+
.mobile-nav ul {
311+
padding: 0;
312+
margin: 32px 0;
313+
}
314+
315+
.mobile-nav li {
316+
list-style: none;
317+
line-height: 34px;
318+
}
319+
320+
.mobile-nav li a {
321+
color: #fff;
322+
font-weight: 600;
323+
font-size: 14px;
324+
}
325+
326+
.mobile-nav li a span {
327+
vertical-align: middle;
328+
}
329+
330+
.mobile-nav .new {
331+
margin-left: 6px;
332+
margin-right: 0;
333+
}
334+
335+
.mobile-nav li a:hover {
336+
background: var(--primary-gradient);
337+
-webkit-background-clip: text;
338+
-webkit-text-fill-color: transparent;
339+
}
340+
341+
.mobile-nav .btn-primary {
342+
font-size: 14px;
343+
font-weight: 600;
344+
width: 100%;
345+
padding: 14px;
346+
min-width: 100%;
347+
}
348+
349+
.mobile-nav-footer {
350+
margin-top: auto;
351+
}
352+
190353
.d-inline-block {
191354
display: inline-block;
192355
}

‎scripts.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,17 @@ window.addEventListener('load', function() {
7979
xhr.send(data);
8080
});
8181
}
82+
83+
const body = this.document.querySelector('body');
84+
const mobileNavIcon = this.document.querySelector('.mobile-nav-icon');
85+
const mobileNav = this.document.querySelector('.mobile-nav');
86+
const mobileNavClose = this.document.querySelector('.mobile-nav-close');
87+
mobileNavIcon.addEventListener('click', function() {
88+
mobileNav.classList.add('open');
89+
body.classList.add('mobile-nav-open');
90+
});
91+
mobileNavClose.addEventListener('click', function() {
92+
mobileNav.classList.remove('open');
93+
body.classList.remove('mobile-nav-open');
94+
});
8295
});

0 commit comments

Comments
 (0)