Skip to content

Commit 25aa717

Browse files
marcode24marcode24
committed
✨ add logout from header
1 parent ff11db0 commit 25aa717

File tree

5 files changed

+202
-7
lines changed

5 files changed

+202
-7
lines changed

‎src/app/core/components/header/header.component.html

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,31 @@
33
<div class="burger" (click)="changeVisibilitySidebar()">
44
<i class="bx bx-menu"></i>
55
</div>
6-
<div class="search">
6+
<div class="search" #inputSearch>
77
<div class="input-group">
88
<input type="text" class="icon" #txtSearch
9-
placeholder="Search...">
9+
placeholder="Search..." (focus)="focusInputSearch()" (blur)="focusInputSearch()">
1010
<i class="bx bx-search"></i>
1111
</div>
1212
</div>
13-
<div class="user">
14-
here's user
13+
<div class="profile">
14+
<div class="user">
15+
<div class="user-data" (click)="changeVisibilityOptions()">
16+
<div class="user-img">
17+
<img [src]="userActive.image" alt="user-image">
18+
</div>
19+
<span class="name">{{ userActive.name }} {{ userActive.surname }}</span>
20+
<div class="icon">
21+
<i class="bx bx-chevron-down"></i>
22+
</div>
23+
</div>
24+
<ul class="dropdown-user" #dropdownUser>
25+
<li class="item" (click)="logout()">
26+
<i class="bx bx-log-out"></i>
27+
<span>Cerrar sesión</span>
28+
</li>
29+
</ul>
30+
</div>
1531
</div>
1632
</div>
1733
</header>

‎src/app/core/components/header/header.component.scss

Lines changed: 153 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ header {
99
width: -webkit-fill-available;
1010
background: var(--bg);
1111
border-bottom: 2px solid #e0e0e0;
12-
z-index: 90;
12+
z-index: 95;
1313

1414
@include width-medium {
1515
margin-left: 0;
@@ -23,13 +23,27 @@ header {
2323
gap: 1rem;
2424
padding: 0 1rem;
2525
height: 100%;
26+
position: relative;
2627

2728
& .search {
2829
flex: 1;
2930
display: flex;
3031
align-items: center;
3132
justify-content: space-between;
3233
gap: 1rem;
34+
35+
@include width-medium {
36+
flex: auto;
37+
}
38+
39+
@include width-small {
40+
&.focus {
41+
position: absolute;
42+
left: 1rem;
43+
right: 1rem;
44+
z-index: 100;
45+
}
46+
}
3347
}
3448
}
3549

@@ -98,9 +112,146 @@ header {
98112
}
99113
}
100114

101-
.user {
115+
.profile {
102116
flex: 1;
103117
display: flex;
104118
align-items: center;
105119
justify-content: flex-end;
120+
position: relative;
121+
122+
& .user {
123+
padding: 0.35rem 0.5rem;
124+
border-radius: 1rem;
125+
transition: 0.3s ease-in-out;
126+
127+
&:hover {
128+
background: var(--bg-hover-3);
129+
cursor: pointer;
130+
}
131+
132+
& .user-data {
133+
display: flex;
134+
align-items: center;
135+
justify-content: flex-end;
136+
gap: 0.5rem;
137+
138+
& .user-img {
139+
width: 38px;
140+
height: 38px;
141+
border-radius: 50%;
142+
display: flex;
143+
align-items: center;
144+
justify-content: center;
145+
overflow: hidden;
146+
147+
& img {
148+
width: 100%;
149+
height: 100%;
150+
object-fit: cover;
151+
}
152+
}
153+
154+
& .name {
155+
@include fs-6;
156+
@include fw-500;
157+
color: var(--fc-primary);
158+
text-overflow: ellipsis;
159+
overflow: hidden;
160+
white-space: nowrap;
161+
162+
@include width-small {
163+
display: none;
164+
}
165+
}
166+
167+
& .icon {
168+
display: flex;
169+
align-items: center;
170+
justify-content: center;
171+
color: var(--fc-primary);
172+
transition: 0.5s;
173+
border-radius: 50%;
174+
width: 35px;
175+
height: 35px;
176+
177+
@include width-small {
178+
display: none;
179+
}
180+
181+
& i {
182+
@include fs-1;
183+
}
184+
}
185+
}
186+
}
187+
}
188+
189+
.dropdown-user {
190+
display: none;
191+
z-index: 2;
192+
list-style-type: none;
193+
position: absolute;
194+
opacity: 0;
195+
top: 55px;
196+
right: 0;
197+
background-color: #f7f7f7;
198+
padding: 0;
199+
font-size: 16px;
200+
border-radius: 10px;
201+
box-shadow: none;
202+
visibility: hidden;
203+
height: fit-content;
204+
transition: visibility 0.2s, opacity 0.2s linear, bottom 0.2s linear,
205+
box-shadow 0.2s linear;
206+
min-width: 14rem;
207+
208+
&.active {
209+
opacity: 1;
210+
bottom: 0;
211+
display: block;
212+
visibility: visible;
213+
box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.25);
214+
}
215+
216+
.item {
217+
display: flex;
218+
align-items: center;
219+
list-style: none;
220+
height: 45px;
221+
transition: 0.3s ease;
222+
padding: 0 1rem;
223+
gap: 1rem;
224+
225+
&:hover {
226+
background: var(--bg-hover-3);
227+
cursor: pointer;
228+
}
229+
230+
&:first-child {
231+
border-radius: 10px 10px 0 0;
232+
}
233+
234+
&:last-child {
235+
border-radius: 0 0 10px 10px;
236+
}
237+
238+
&:first-of-type {
239+
border-radius: 10px;
240+
}
241+
242+
& span {
243+
@include fs-5;
244+
@include fw-400;
245+
color: var(--fc-primary);
246+
text-overflow: ellipsis;
247+
overflow: hidden;
248+
white-space: nowrap;
249+
}
250+
251+
& i {
252+
@include fs-4;
253+
@include fw-500;
254+
color: var(--fc-primary);
255+
}
256+
}
106257
}

‎src/app/core/components/header/header.component.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,37 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ElementRef, ViewChild } from '@angular/core';
2+
3+
import { AuthService } from '@services/auth.service';
24

35
@Component({
46
selector: 'app-header',
57
templateUrl: './header.component.html',
68
styleUrls: ['./header.component.scss']
79
})
810
export class HeaderComponent {
11+
@ViewChild('dropdownUser') dropdownUser: ElementRef;
12+
@ViewChild('inputSearch') inputSearch: ElementRef;
13+
userActive = this.authService.userActive;
14+
15+
constructor(
16+
private authService: AuthService
17+
) { }
18+
919
changeVisibilitySidebar(): void {
1020
const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
1121
sidebarElement.classList.toggle('closed');
1222
const overlayElement = document.querySelector('.overlay') as HTMLElement;
1323
overlayElement.classList.toggle('opened');
1424
}
25+
26+
changeVisibilityOptions(): void {
27+
this.dropdownUser.nativeElement.classList.toggle('active');
28+
}
29+
30+
logout(): void {
31+
this.authService.logout();
32+
}
33+
34+
focusInputSearch(): void {
35+
this.inputSearch.nativeElement.classList.toggle('focus');
36+
}
1537
}

‎src/app/core/services/auth.service.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,9 @@ export class AuthService {
6060
return true;
6161
}), catchError(() => of(false)));
6262
}
63+
64+
logout(): void {
65+
Storage.removeLocalStorage('token');
66+
this.router.navigateByUrl('/login');
67+
}
6368
}

‎src/styles.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,7 @@ input {
301301
& a {
302302
color: var(--fc-purple);
303303
text-decoration: none;
304+
@include fw-500;
304305

305306
&:hover {
306307
cursor: pointer;

0 commit comments

Comments
 (0)