Skip to content

Commit 61ced7d

Browse files
AntDavidLimaAntDavidLima
committed
feat: improve header resposiveness
Signed-off-by: David Lima <antdavidlima@gmail.com>
1 parent 86eddd1 commit 61ced7d

2 files changed

Lines changed: 176 additions & 139 deletions

File tree

‎source/_assets/scss/_header.scss‎

Lines changed: 125 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,32 @@
1616
.navbar-brand {
1717
padding: 0;
1818

19-
@media #{$md, $xs} {
20-
padding: 0.2rem;
21-
}
22-
2319
img {
2420
max-height: 54px;
25-
}
26-
}
27-
28-
.navbar-collapse {
29-
@media #{$md, $xs} {
30-
position: absolute;
31-
top: 100%;
32-
right: 0;
33-
max-width: 300px;
34-
width: 100%;
35-
background-color: var(--white);
36-
z-index: 9;
37-
@include box-shadow(0px 15px 20px 0px rgba(0, 0, 0, 0.1));
38-
padding: 0px;
39-
display: none;
40-
border-radius: 5px;
4121

42-
&.show {
43-
display: block;
22+
@media #{$lg} {
23+
max-height: 40px;
4424
}
4525
}
4626
}
4727

4828
.navbar-nav {
49-
@media #{$md, $xs} {
50-
padding: 20px 30px;
51-
}
52-
5329
display: flex;
54-
align-items: center;
5530
gap: 24px;
31+
align-items: center;
32+
33+
@media #{$laptop} {
34+
gap: 16px;
35+
}
36+
37+
@media #{$lg} {
38+
gap: 12px;
39+
}
40+
41+
@media #{$md, $xs} {
42+
gap: 4px;
43+
align-items: start;
44+
}
5645

5746
& .nav-item {
5847
position: relative;
@@ -65,20 +54,37 @@
6554
padding: 12px 0;
6655
position: relative;
6756

68-
@media #{$md, $xs} {
69-
display: block;
70-
padding: 8px 0;
71-
color: var(--heading-color);
57+
&:hover:not(.link-button),
58+
&.active:not(.link-button) {
59+
color: var(--white);
60+
opacity: 0.5;
7261
}
62+
}
7363

74-
&:hover,
75-
&.active {
64+
&:hover {
65+
& > a:not(.link-button) {
7666
color: var(--white);
7767
opacity: 0.5;
68+
}
69+
}
70+
71+
&.nav-item-has-children {
72+
margin-right: 24px;
7873

79-
@media #{$md, $xs} {
80-
color: var(--primary-color);
81-
opacity: 1;
74+
& > a {
75+
position: relative;
76+
77+
&::after {
78+
content: "";
79+
position: absolute;
80+
width: 0;
81+
height: 0;
82+
border-left: 7px solid transparent;
83+
border-right: 7px solid transparent;
84+
border-top: 7px solid white;
85+
top: 50%;
86+
right: -20px;
87+
transform: translateY(-50%);
8288
}
8389
}
8490
}
@@ -94,6 +100,15 @@
94100
display: flex;
95101
align-items: center;
96102

103+
@media #{$lg, $xs} {
104+
padding: 0 16px;
105+
}
106+
107+
&:hover {
108+
color: #263238;
109+
filter: brightness(1.25);
110+
}
111+
97112
&::after {
98113
content: '';
99114
position: absolute;
@@ -102,71 +117,97 @@
102117
border-radius: 20px;
103118
}
104119
}
120+
}
121+
}
105122

106-
&:hover {
107-
& > a {
108-
color: var(--white);
109-
opacity: 0.5;
123+
#customer-area-link {
124+
margin-left: 24px;
110125

111-
@media #{$md, $xs} {
112-
color: var(--primary-color);
113-
opacity: 1;
114-
}
115-
}
116-
}
126+
@media #{$laptop} {
127+
margin-left: 12px;
128+
}
117129

118-
&.nav-item-has-children {
119-
margin-right: 24px;
130+
@media #{$lg} {
131+
margin-left: 8px;
132+
}
120133

121-
& > a {
122-
position: relative;
134+
@media #{$md, $xs} {
135+
margin-left: auto;
136+
margin-right: auto;
137+
}
123138

124-
&::after {
125-
content: "";
126-
position: absolute;
127-
width: 0;
128-
height: 0;
129-
border-left: 7px solid transparent;
130-
border-right: 7px solid transparent;
131-
border-top: 7px solid white;
132-
top: 50%;
133-
right: -20px;
134-
transform: translateY(-50%);
135-
}
136-
}
137-
}
139+
.button-icon {
140+
display: none;
138141
}
139142

140-
#customer-area-link {
141-
margin-left: 16px;
143+
@media #{$lg} {
144+
.button-text {
145+
position: absolute;
146+
width: 1px;
147+
height: 1px;
148+
padding: 0;
149+
margin: -1px;
150+
overflow: hidden;
151+
clip: rect(0, 0, 0, 0);
152+
white-space: nowrap;
153+
border-width: 0;
154+
}
155+
156+
.button-icon {
157+
display: inline;
158+
}
142159
}
143160
}
144161

145-
.navbar-btn {
162+
.navbar-collapse {
163+
flex-grow: 0;
164+
146165
@media #{$md, $xs} {
147-
position: absolute;
148-
top: 50%;
149-
right: 50px;
150-
@include transform(translateY(-50%));
151-
}
166+
position: fixed;
167+
top: 118px;
168+
left: 0;
169+
width: 100vw;
170+
background-color: #263238;
171+
z-index: 9;
172+
@include box-shadow(0px 15px 20px 0px rgba(0, 0, 0, 0.1));
173+
padding: 0 8px 16px;
174+
display: none;
175+
color: #263238;
152176

153-
.ud-main-btn {
154-
padding: 8px 16px;
155-
background: transparent;
177+
&.show {
178+
display: block;
179+
}
156180
}
181+
}
157182

158-
.ud-login-btn {
159-
&:hover {
160-
opacity: 0.5;
161-
}
183+
.navbar-toggler {
184+
padding: 0;
185+
186+
& .toggler-icon {
187+
width: 30px;
188+
height: 2px;
189+
background-color: var(--white);
190+
display: block;
191+
margin: 5px 0;
192+
position: relative;
193+
@include transition(0.3s);
162194
}
163195

164-
.ud-white-btn {
165-
background: rgba(255, 255, 255, 0.2);
196+
&.active {
197+
& .toggler-icon {
198+
&:nth-of-type(1) {
199+
@include transform(rotate(45deg));
200+
top: 7px;
201+
}
166202

167-
&:hover {
168-
background: rgba(255, 255, 255, 1);
169-
color: var(--heading-color);
203+
&:nth-of-type(2) {
204+
opacity: 0;
205+
}
206+
207+
&:nth-of-type(3) {
208+
@include transform(rotate(135deg));
209+
top: -7px;
210+
}
170211
}
171212
}
172213
}
@@ -241,16 +282,6 @@
241282
flex-direction: column;
242283
gap: 8px;
243284

244-
@media #{$md, $xs} {
245-
position: static;
246-
box-shadow: none;
247-
width: 100%;
248-
padding: 0px;
249-
opacity: 1;
250-
visibility: visible;
251-
display: none;
252-
}
253-
254285
&.show {
255286
display: flex;
256287
}

‎source/_layouts/header.blade.php‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,56 @@
11
<header class="ud-header">
2-
<div class="container">
3-
<div class="row">
4-
<div class="col-lg-12">
5-
<nav class="navbar navbar-expand-lg">
6-
<a class="navbar-brand" href="{{ locale_url($page, '') }}">
7-
<img src="{{ $page->baseUrl }}assets/images/logo/logo.svg" alt="LibreSign" />
2+
<div class="container">
3+
<nav class="navbar navbar-expand-lg">
4+
<a class="navbar-brand" href="{{ locale_url($page, '') }}">
5+
<img src="{{ $page->baseUrl }}assets/images/logo/logo.svg" alt="LibreSign" />
6+
</a>
7+
<div class="navbar-collapse mx-auto">
8+
<ul class="navbar-nav container">
9+
<li class="nav-item nav-item-has-children">
10+
<a class="ud-menu-scroll" href="{{ locale_url($page, 'solutions') }}">{{$page->t("Solutions")}}</a>
11+
</li>
12+
<li class="nav-item nav-item-has-children">
13+
<a class="ud-menu-scroll" href="{{ locale_url($page, 'features') }}">{{$page->t("Features")}}</a>
14+
</li>
15+
<li class="nav-item nav-item-has-children"><a class="ud-menu-scroll" href="{{ locale_url($page, 'pricing') }}">{{ $page->t('Plans and Pricing')}}</a>
16+
</li>
17+
<li class="nav-item">
18+
<a class="ud-menu-scroll" href="{{ locale_url($page, 'about') }}">{{ $page->t("About") }}</a>
19+
</li>
20+
<li class="nav-item nav-item-has-children">
21+
<a class="ud-menu-scroll" href="{{ locale_url($page, 'posts') }}">{{ $page->t("Content") }}</a>
22+
</li>
23+
<li class="nav-item nav-item-has-children">
24+
<a class="ud-menu-scroll" href="{{ locale_url($page, 'contact') }}">{{ $page->t("Contact") }}</a>
25+
</li>
26+
<li class="nav-item" id="customer-area-link">
27+
<a class="ud-menu-scroll link-button" href="{{ locale_url($page, 'client-area') }}" aria-label="{{ $page->t("Client Area") }}">
28+
<span class="button-text">{{ $page->t("Client Area") }}</span>
29+
<i class="lni lni-user button-icon" aria-hidden="true"></i>
830
</a>
9-
<div class="navbar-collapse">
10-
<ul class="navbar-nav mx-auto">
11-
<li class="nav-item nav-item-has-children">
12-
<a class="ud-menu-scroll" href="{{ locale_url($page, 'solutions') }}">{{$page->t("Solutions")}}</a>
13-
</li>
14-
<li class="nav-item nav-item-has-children">
15-
<a class="ud-menu-scroll" href="{{ locale_url($page, 'features') }}">{{$page->t("Features")}}</a>
16-
</li>
17-
<li class="nav-item nav-item-has-children"><a class="ud-menu-scroll" href="{{ locale_url($page, 'pricing') }}">{{ $page->t('Plans and Pricing')}}</a>
18-
</li>
19-
<li class="nav-item">
20-
<a class="ud-menu-scroll" href="{{ locale_url($page, 'about') }}">{{ $page->t("About") }}</a>
21-
</li>
22-
<li class="nav-item nav-item-has-children">
23-
<a class="ud-menu-scroll" href="{{ locale_url($page, 'posts') }}">{{ $page->t("Content") }}</a>
24-
</li>
25-
<li class="nav-item nav-item-has-children">
26-
<a class="ud-menu-scroll" href="{{ locale_url($page, 'contact') }}">{{ $page->t("Contact") }}</a>
27-
</li>
28-
<li class="nav-item" id="customer-area-link">
29-
<a class="ud-menu-scroll link-button" href="{{ locale_url($page, 'client-area') }}">{{ $page->t("Client Area") }}</a>
30-
</li>
31-
</ul>
32-
</div>
33-
<div class="selector">
34-
<button type="button"><img src="{{ $page->baseUrl }}assets/images/icon/languages/{{ current_path_locale($page) ?: 'en' }}.svg" alt="{{ $page->t('Language') }}" /></button>
35-
<ul class="ud-submenu">
36-
@foreach($page->locales as $localeCode => $localeName)
37-
<li class="ud-submenu-item">
38-
<a class="ud-submenu-link" href="{{ translate_url($page, $localeCode) }}">
39-
<img src="{{ $page->baseUrl }}assets/images/icon/languages/{{ $localeCode ?: 'en' }}.svg" alt="{{ $localeName }}" />
40-
<span>{{ $localeCode ?: 'en'}}</span>
41-
</a>
42-
</li>
43-
@endforeach
44-
</ul>
45-
</div>
46-
</nav>
31+
</li>
32+
</ul>
33+
</div>
34+
<div class="d-flex align-items-center">
35+
<div class="selector">
36+
<button type="button"><img src="{{ $page->baseUrl }}assets/images/icon/languages/{{ current_path_locale($page) ?: 'en' }}.svg" alt="{{ $page->t('Language') }}" /></button>
37+
<ul class="ud-submenu">
38+
@foreach($page->locales as $localeCode => $localeName)
39+
<li class="ud-submenu-item">
40+
<a class="ud-submenu-link" href="{{ translate_url($page, $localeCode) }}">
41+
<img src="{{ $page->baseUrl }}assets/images/icon/languages/{{ $localeCode ?: 'en' }}.svg" alt="{{ $localeName }}" />
42+
<span>{{ $localeCode ?: 'en'}}</span>
43+
</a>
44+
</li>
45+
@endforeach
46+
</ul>
4747
</div>
48+
<button class="navbar-toggler" title="{{$page->t("Toggle navigation menu")}}">
49+
<span class="toggler-icon"> </span>
50+
<span class="toggler-icon"> </span>
51+
<span class="toggler-icon"> </span>
52+
</button>
4853
</div>
49-
</div>
54+
</nav>
55+
</div>
5056
</header>

0 commit comments

Comments
 (0)