Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 71ddf12

Browse files
JaredKhalilJaredKhalil
authored
Merge pull request #415 from openforge/feat/navbar
feat(navbar): update styles to match new design
2 parents 3b33535 + 0d14bab commit 71ddf12

File tree

4 files changed

+142
-79
lines changed

4 files changed

+142
-79
lines changed

‎src/assets/i18n/en.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -453,10 +453,11 @@ export const translations = {
453453
},
454454
},
455455
links: {
456-
home: 'Home',
456+
ourWork: 'Our Work',
457+
resources: 'Resources',
457458
blog: 'Blog',
458459
about: 'About',
459-
contact: 'Contact',
460+
workWithUs: 'Work With Us',
460461
opportunities: 'Opportunities',
461462
github: 'Openforge Github account',
462463
},

‎src/components/app-nav-header/app-nav-header.scss‎

Lines changed: 106 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,133 @@
11
nav.navbar {
2-
background: rgba(23, 23, 25, 1);
2+
background: #ffffff;
3+
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
4+
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
5+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
6+
@include media-breakpoint-down(md) {
7+
padding: 0;
8+
}
9+
10+
.container {
11+
@include media-breakpoint-down(md) {
12+
margin: 0;
13+
max-width: 100%;
14+
}
15+
}
16+
}
17+
18+
button.navbar-toggler {
19+
@include media-breakpoint-down(md) {
20+
margin-right: 24px;
21+
}
22+
}
23+
24+
.navbar-light .navbar-toggler {
25+
border-color: transparent !important;
326
}
427

528
nav.navbar .navbar-nav .nav-item {
6-
text-align: right;
29+
text-align: left;
30+
31+
@include media-breakpoint-down(md) {
32+
margin-left: 24px;
33+
margin-right: 24px;
34+
}
735

836
&.dropdown {
937
cursor: pointer;
1038

1139
.dropdown-menu {
1240
border: none;
13-
background: rgba(23, 23, 25, 0.75);
14-
top: 54px;
41+
background: #ffffff;
42+
top: 40px;
1543
border-top-left-radius: 0;
1644
border-top-right-radius: 0;
45+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
46+
@include media-breakpoint-down(md) {
47+
margin: 0;
48+
padding: 0;
49+
box-shadow: none;
50+
}
1751
}
52+
}
1853

19-
.dropdown-item {
20-
color: rgba(244, 245, 249, 0.75);
21-
text-align: right;
22-
23-
&:hover {
24-
background: rgba(23, 23, 25, 0.75);
25-
}
54+
&.contact-us-button {
55+
display: flex;
56+
align-items: center;
2657

27-
&.active {
28-
background: transparent;
29-
color: $orange;
30-
}
58+
@include media-breakpoint-down(md) {
59+
margin-left: 24px;
60+
margin-right: 24px;
3161
}
3262
}
33-
a {
34-
padding-right: 1rem;
35-
padding-left: 1rem;
36-
}
3763

38-
&.split {
64+
&.search {
65+
margin-right: 1.5rem;
66+
display: flex;
67+
align-items: center;
68+
margin-left: 1.5rem;
69+
font-size: 24px;
70+
position: absolute;
71+
right: 20px;
72+
top: 14px;
73+
}
3974

40-
.dropdown-menu {
41-
margin-top: 0;
42-
@include media-breakpoint-up(md) {
43-
margin-top: -8px;
44-
}
75+
&.search-bar {
76+
width: 100%;
77+
margin: 0;
78+
padding: 10px;
79+
position: relative;
80+
background: lightgray;
81+
input {
82+
width: 100%;
83+
border: 1px solid rgba(23, 23, 25, 0.5);
84+
border-radius: 20px;
85+
padding-left: 48px;
86+
height: 36px;
4587
}
46-
47-
margin-top: 8px;
48-
@include media-breakpoint-down(md) {
49-
margin-top: 0;
88+
.search-icon {
89+
position: absolute;
90+
top: 12px;
91+
left: 24px;
5092
}
93+
}
94+
}
5195

52-
stencil-route-link {
53-
.main {
54-
display: inline;
55-
padding-right: 0;
56-
}
96+
nav.navbar .navbar-nav .nav-link {
97+
color: #121212;
98+
font-weight: 300;
99+
padding-top: 0;
100+
padding-bottom: 0;
101+
102+
&.dropdown-item {
103+
background: white;
104+
&.active {
105+
color: $orange;
57106
}
107+
}
58108

59-
.dropdown-toggle {
60-
display: inline;
61-
padding-left: 0;
109+
&.contact-us {
110+
background: black;
111+
color: white;
112+
letter-spacing: 2px;
113+
font-size: 16px;
114+
border-radius: 30px;
115+
font-weight: 300;
116+
padding: 0 20px 0 20px;
117+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
118+
margin-right: 1.5rem;
119+
margin-left: 1.5rem;
120+
@include media-breakpoint-down(md) {
121+
margin-left: 0;
122+
margin-right: 0;
123+
margin-top: 0.5rem;
124+
margin-bottom: 1.5rem;
62125
}
63126
}
64127
}
128+
129+
ul.navbar-nav {
130+
@include media-breakpoint-down(md) {
131+
margin: 0;
132+
}
133+
}

‎src/components/app-nav-header/app-nav-header.tsx‎

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class AppNavHeader {
2525

2626
render() {
2727
return (
28-
<nav class="navbar navbar-expand-lg navbar-dark align-items-lg-end fixed-top">
28+
<nav class="navbar navbar-expand-lg align-items-lg-end fixed-top navbar-light">
2929
<div class="container">
3030
<div class="navbar-brand">
3131
<stencil-route-link tabindex="0" url="/" exact={true} anchorClass="nav-link" activeClass="active">
@@ -48,32 +48,26 @@ export class AppNavHeader {
4848
</button>
4949

5050
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
51-
<ul class="navbar-nav ml-md-auto">
51+
<ul class="navbar-nav">
5252
<li class="nav-item" data-target="#navbarSupportedContent">
53-
<stencil-route-link url="/" exact={true} anchorClass="nav-link" activeClass="active">
54-
{translate('nav.links.home')}
53+
<stencil-route-link url="/our-work" exact={true} anchorClass="nav-link" activeClass="active">
54+
{translate('nav.links.ourWork')}
5555
</stencil-route-link>
5656
</li>
57-
<li class="nav-item dropdown split" data-target="#navbarSupportedContent">
58-
<stencil-route-link anchorClass="nav-link main" url="/services" role="button" activeClass="active">
59-
Services
60-
</stencil-route-link>
61-
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
62-
<span class="sr-only">Toggle Dropdown</span>
57+
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
58+
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
59+
{translate('nav.links.resources')}
6360
</a>
64-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
65-
<stencil-route-link url="/services/app-developer" anchorClass="nav-link dropdown-item" activeClass="active">
66-
Development
67-
</stencil-route-link>
68-
<stencil-route-link url="/services/app-designer" anchorClass="nav-link dropdown-item" activeClass="active">
69-
Design
70-
</stencil-route-link>
71-
<stencil-route-link url="/services/startup-consulting" anchorClass="nav-link dropdown-item" activeClass="active">
72-
Consulting
61+
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
62+
<stencil-route-link url="/blog" anchorClass="nav-link dropdown-item" activeClass="active">
63+
Blog
7364
</stencil-route-link>
74-
<stencil-route-link url="/services/training" anchorClass="nav-link dropdown-item" activeClass="active">
75-
Training
65+
<stencil-route-link url="/forge" anchorClass="nav-link dropdown-item" activeClass="active">
66+
The Forge
7667
</stencil-route-link>
68+
<a class="nav-link" id="github" href="https://github.com/openforge" title={translate('nav.links.github')} target="_blank" rel="noopener">
69+
Github
70+
</a>
7771
</div>
7872
</li>
7973
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
@@ -82,33 +76,29 @@ export class AppNavHeader {
8276
</a>
8377
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
8478
<stencil-route-link url="/about" anchorClass="nav-link dropdown-item" activeClass="active">
85-
Meet the team
86-
</stencil-route-link>
87-
<stencil-route-link url="/juntoscope" anchorClass="nav-link dropdown-item" activeClass="active">
88-
Juntoscope Case Study
79+
Meet the Team
8980
</stencil-route-link>
90-
<stencil-route-link url="/toolbox" anchorClass="nav-link dropdown-item" activeClass="active">
91-
Toolbox
81+
<stencil-route-link url="/process" anchorClass="nav-link dropdown-item" activeClass="active">
82+
Our Process
9283
</stencil-route-link>
93-
<stencil-route-link url="/resources/pwa-white-paper" anchorClass="nav-link dropdown-item" activeClass="active">
94-
PWA White Paper
84+
<stencil-route-link url="/partners" anchorClass="nav-link dropdown-item" activeClass="active">
85+
Partners
9586
</stencil-route-link>
9687
</div>
9788
</li>
98-
<li class="nav-item" data-target="#navbarSupportedContent">
99-
<stencil-route-link url="/contact" anchorClass="nav-link" activeClass="active">
100-
{translate('nav.links.contact')}
89+
<li class="nav-item contact-us-button" data-target="#navbarSupportedContent">
90+
<stencil-route-link url="/contact" anchorClass="nav-link contact-us" activeClass="active">
91+
{translate('nav.links.workWithUs')}
10192
</stencil-route-link>
10293
</li>
103-
<li class="nav-item" data-target="#navbarSupportedContent">
104-
<stencil-route-link url="/blog" exact={true} anchorClass="nav-link" activeClass="active">
105-
{translate('nav.links.blog')}
106-
</stencil-route-link>
94+
<li class="nav-item search d-none d-lg-block" data-target="#navbarSupportedContent">
95+
<i class="fa fa-search" />
10796
</li>
108-
<li class="nav-item" data-target="#navbarSupportedContent">
109-
<a class="nav-link" id="github" href="https://github.com/openforge" title={translate('nav.links.github')} target="_blank" rel="noopener">
110-
<div class="fab fa-github" />
111-
</a>
97+
<li class="nav-item search-bar d-md-block d-lg-none" data-target="#navbarSupportedContent">
98+
<input type="text" placeholder="Type to search content..." class="search-input" />
99+
<div class="search-icon">
100+
<i class="fa fa-search" />
101+
</div>
112102
</li>
113103
</ul>
114104
</div>

‎src/pages/open-forge-app/open-forge-app.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ export class OpenForgeApp {
2525
if (srcEl.classList.contains('dropdown-toggle')) {
2626
return;
2727
}
28+
if (srcEl.classList.contains('search-input')) {
29+
return;
30+
}
2831
const opened = document.getElementsByClassName('navbar-collapse show');
2932
if (opened.length > 0) {
3033
const navbarButton: any = document.getElementsByClassName('navbar-toggler')[0];

0 commit comments

Comments
 (0)