Skip to content

Commit f734f5a

Browse files
marcode24marcode24
committed
✨ change news for authenticated state
1 parent 430b726 commit f734f5a

16 files changed

+283
-135
lines changed

‎src/app/app.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
3+
import { HttpClientModule, } from '@angular/common/http';
44

55
import { AppComponent } from './app.component';
66
import { AppRoutingModule } from './app.routing';

‎src/app/auth/auth.component.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
right: 0;
66
bottom: 0;
77
left: 0;
8-
transition: 0.5s;
98
opacity: 0;
10-
display: flex;
9+
display: none;
1110
justify-content: center;
1211
align-items: center;
1312
}
1413
.modal.modal-open {
14+
display: flex;
1515
opacity: 1;
1616
position: fixed;
1717
}
@@ -51,3 +51,11 @@
5151
padding: 1rem;
5252
gap: 1.2rem;
5353
}
54+
55+
@media (max-width: 480px) {
56+
.modal-content {
57+
border-radius: 0;
58+
min-width: 100vw;
59+
min-height: 100vh;
60+
}
61+
}

‎src/app/auth/auth.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="modal" #modalAuth>
1+
<div class="modal dialog" #modalAuth>
22
<div class="modal-content">
33
<div class="header">
44
<div class="i-wrapper"><i class="bx bx-x" (click)="closeModal()"></i></div>

‎src/app/auth/auth.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { AuthService } from '@services/auth.service';
66
@Component({
77
selector: 'app-auth',
88
templateUrl: './auth.component.html',
9-
styleUrls: ['./auth.component.css']
9+
styleUrls: ['./auth.component.css'],
1010
})
1111
export class AuthComponent implements OnInit, OnDestroy {
1212

‎src/app/core/components/sidebar/sidebar.component.css

Lines changed: 92 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
nav {
22
position: fixed;
33
height: 100%;
4-
width: 80px;
5-
background: var(--bg-color);
4+
width: 250px;
5+
/* background: var(--bg-color); */
6+
border-right: 1px solid var(--bg-color);
67
padding: 6px 14px;
78
z-index: 99;
8-
transition: all 0.5s ease;
9-
padding: 0 0.6rem;
9+
transition: 0.5s ease;
10+
padding: 0 0.2rem;
1011
display: flex;
1112
flex-direction: column;
1213
align-items: flex-start;
1314
gap: 10px;
14-
}
15-
16-
nav.open {
17-
width: 250px;
15+
/* border: 1px solid black; */
1816
}
1917

2018
nav .logo-details {
@@ -27,38 +25,30 @@ nav .logo-details {
2725
}
2826

2927
nav .logo-details .icon {
30-
opacity: 0;
31-
transition: all 0.5s;
28+
opacity: 1;
29+
transition: 0.5s;
3230
color: var(--primary-color);
3331
}
3432

35-
nav .logo-details .logo_name {
33+
nav .logo-details span.logo_name {
3634
color: var(--primary-color);
3735
font-size: 20px;
3836
font-weight: 600;
39-
opacity: 0;
40-
transition: all 0.5s;
41-
flex-grow: 1;
42-
}
43-
44-
nav.open .logo-details .icon,
45-
nav.open .logo-details .logo_name,
46-
nav.open .profile .profile-details img,
47-
nav.open .profile .profile-details .username {
4837
opacity: 1;
38+
transition: 0.5s;
39+
flex-grow: 1;
4940
}
5041

5142
nav .logo-details .toggled {
5243
font-size: 23px;
5344
text-align: center;
5445
cursor: pointer;
55-
transition: all 0.5s ease;
46+
transition: 0.5s ease;
5647
position: absolute;
5748
width: 100%;
5849
}
5950

60-
nav.open .logo-details .toggled,
61-
nav.open .profile .profile-details #log_out {
51+
nav.open .logo-details .toggled {
6252
position: initial;
6353
}
6454

@@ -115,32 +105,27 @@ nav li a {
115105
display: flex;
116106
height: 100%;
117107
width: 100%;
118-
border-radius: 12px;
108+
border-radius: 40px;
119109
align-items: center;
120110
text-decoration: none;
121111
transition: 0.5s ease;
122112
background: transparent;
123113
}
124114

125-
nav li a:hover {
126-
background: #f7f7f7;
115+
nav li a:hover,
116+
.profile .profile-details:hover {
117+
background: #e2e2e2;
127118
}
128119

129120
nav li a .links_name {
130121
color: var(--bg-color-secondary);
131-
font-size: 15px;
122+
font-size: 16px;
132123
font-weight: 400;
133124
white-space: nowrap;
134125
opacity: 0;
135126
pointer-events: none;
136127
transition: 0.4s;
137-
}
138-
139-
nav.open li a .links_name {
140128
opacity: 1;
141-
pointer-events: auto;
142-
transition: 0.4s;
143-
font-weight: 400;
144129
}
145130

146131
nav li a:hover .links_name,
@@ -155,51 +140,100 @@ nav li i {
155140

156141
nav .profile {
157142
width: 100%;
158-
height: 60px;
159-
opacity: 1;
160143
padding: 0.2rem;
161144
display: flex;
162145
flex-grow: 1;
163146
align-items: flex-end;
164147
}
165148

166-
nav .profile .profile-details {
149+
.profile .profile-details {
167150
display: flex;
168151
align-items: center;
169-
flex-wrap: nowrap;
152+
border-radius: 40px;
153+
padding: 0.7rem;
154+
cursor: pointer;
155+
transition: 0.3s;
170156
width: 100%;
171-
margin-bottom: 10px;
157+
transition: 0.5s;
158+
}
159+
160+
.profile-details .box-image {
161+
width: 3rem;
162+
height: 3rem;
163+
min-width: 3rem;
164+
min-height: 3rem;
172165
}
173166

174-
nav .profile img {
175-
height: 48px;
176-
width: 48px;
177-
min-height: 48px;
178-
min-width: 48px;
167+
.profile-details img {
168+
border-radius: 50%;
179169
object-fit: cover;
180-
border-radius: 10px;
181-
margin: 0 5px;
182-
opacity: 0;
183-
transition: 0.4s;
170+
width: 100%;
171+
height: 100%;
184172
}
185173

186-
nav .profile .username {
174+
.profile-details .username {
175+
margin: 0 5px;
187176
flex-grow: 1;
188-
font-size: 15px;
177+
font-size: 14px;
189178
font-weight: 400;
190179
color: var(--bg-color-secondary);
191180
white-space: nowrap;
192-
opacity: 0;
181+
opacity: 1;
193182
transition: 0.4s;
183+
white-space: nowrap;
184+
overflow: hidden;
185+
text-overflow: ellipsis;
194186
}
195187

196-
nav .profile .job {
197-
font-size: 12px;
188+
.profile a {
189+
text-decoration: none;
190+
display: flex;
191+
align-items: center;
192+
opacity: 1;
198193
}
199194

200-
nav .profile-details #log_out {
201-
transition: all 0.5s;
202-
position: absolute;
195+
.profile-details a i {
196+
min-width: 0;
197+
font-size: 24px;
198+
}
199+
200+
@media (max-width: 1280px) {
201+
nav {
202+
width: 80px;
203+
}
204+
205+
nav .logo-details .logo_name,
206+
nav li a .links_name,
207+
.profile-details .username,
208+
.profile a {
209+
opacity: 0;
210+
display: none;
211+
}
212+
213+
nav li a .links_name {
214+
pointer-events: auto;
215+
transition: 0.4s;
216+
font-weight: 400;
217+
}
218+
219+
nav .logo-details i,
220+
nav li a i {
221+
flex-grow: 1;
222+
}
223+
224+
nav .profile,
225+
.profile-details {
226+
justify-content: center;
227+
}
228+
229+
.profile-details {
230+
padding: 0.3rem !important;
231+
width: auto !important;
232+
}
233+
234+
.profile-details .box-image {
235+
justify-content: center;
236+
}
203237
}
204238

205239
@media (max-width: 768px) {
@@ -208,6 +242,7 @@ nav .profile-details #log_out {
208242
height: auto;
209243
bottom: 0;
210244
transition: none;
245+
background: var(--bg-color);
211246
}
212247

213248
nav .profile,
@@ -233,7 +268,8 @@ nav .profile-details #log_out {
233268
}
234269

235270
nav li a i {
236-
font-size: 22px;
271+
font-size: 24px;
272+
flex-grow: 0;
237273
}
238274

239275
nav li a .links_name {

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
<nav class="sidebar open">
22
<div class="logo-details">
33
<i class='bx bx-news icon'></i>
4-
<div class="logo_name">InfoReader</div>
5-
<i class='bx bx-menu toggled' #bxMenuIcon (click)="toggled(bxMenuIcon)"></i>
4+
<span class="logo_name">InfoReader</span>
65
</div>
76
<ul class="nav-list">
87
<li>
9-
<a href="#">
10-
<i class='bx bx-world'></i>
8+
<a (click)="changeExplore(true)">
9+
<i class='bx bx-news'></i>
1110
<span class="links_name">News</span>
1211
</a>
1312
<span class="tooltip">News</span>
1413
</li>
1514
<li>
16-
<a href="#">
17-
<i class='bx bx-star'></i>
18-
<span class="links_name">Preferences</span>
15+
<a (click)="changeExplore(false)">
16+
<i class='bx bx-world'></i>
17+
<span class="links_name">Explore</span>
1918
</a>
20-
<span class="tooltip">Preferences</span>
19+
<span class="tooltip">Explore</span>
2120
</li>
2221
<li>
2322
<a href="#">
@@ -36,11 +35,15 @@
3635
</ul>
3736
<div class="profile" *ngIf="userActive">
3837
<div class="profile-details">
39-
<img
40-
src="https://images.unsplash.com/photo-1515621061946-eff1c2a352bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=789&q=80"
41-
alt="profileImg">
42-
<span class="username"> {{userActive.email | slice:0:12}} </span>
43-
<i class='bx bx-log-out' id="log_out"></i>
38+
<figure class="box-image">
39+
<img
40+
src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
41+
alt="img-user">
42+
</figure>
43+
<span class="username"> {{userActive.email }} </span>
44+
<a href="" class="more">
45+
<i class='bx bx-dots-horizontal-rounded'></i>
46+
</a>
4447
</div>
4548
</div>
4649

0 commit comments

Comments
 (0)