Skip to content

Commit b390e14

Browse files
daros10daros10
committed
#19 added navbar and sidebar styles
1 parent 741bfdd commit b390e14

File tree

9 files changed

+63
-47
lines changed

9 files changed

+63
-47
lines changed

‎src/app/app.component.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<app-navbar></app-navbar>
2-
31
<app-sidebar>
42
<router-outlet></router-outlet>
5-
</app-sidebar>
3+
</app-sidebar>

‎src/app/modules/shared/components/clock/clock.component.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
<div class="row">
2-
<div class="col mt-1 time-clock-color">
3-
<i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
4-
</div>
5-
<div *ngIf="displayTime" class="col time-clock-color">
6-
<h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
7-
</div>
1+
<div class="col time-clock-color">
2+
<i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
3+
</div>
4+
<div *ngIf="displayTime" class="col time-clock-color">
5+
<h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
86
</div>

‎src/app/modules/shared/components/clock/clock.component.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.time-clock-color {
2-
color: white;
2+
color: black
33
}
4+

‎src/app/modules/shared/components/navbar/navbar.component.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<nav class="navbar navbar-dark bg-dark">
2-
<a class="navbar-brand" href="#">
3-
<img src="assets/img/ioet.png" width="20" height="35" class="d-inline-block align-top" alt="">
4-
</a>
5-
6-
<app-clock class="text-center"></app-clock>
7-
<app-user></app-user>
8-
</nav>
1+
<nav class="navbar navbar-light bg-white border-light border-bottom mt-1">
2+
<div class="col-10 text-center">
3+
<app-clock></app-clock>
4+
</div>
5+
<div class="col-2 text-right">
6+
<app-user></app-user>
7+
</div>
8+
</nav>

‎src/app/modules/shared/components/sidebar/sidebar.component.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<div class="d-flex" id="wrapper">
22
<!-- Sidebar -->
3-
<div class="bg-light border-right" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
4-
<div class="list-group list-group-flush">
5-
<a *ngFor="let item of itemsSidebar" [routerLink]="item.route" routerLinkActive="dark"
6-
class="list-group-item list-group-item-action bg-light"><i class="{{item.icon}}"></i> {{item.text}}</a>
3+
<div class="mt-1 ml-1 rounded-lg sidebar-background" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
4+
<div class="text-center mt-5 mb-5">
5+
<img src="assets/img/ioet-logo-light.png" width="100" height="100" class="img-fluid text-center" alt="Ioet logo">
6+
</div>
7+
<div class="list-group list-group-flush rounded-lg items-sidebar-hover">
8+
<a *ngFor="let item of itemsSidebar" [routerLink]="item.route" routerLinkActive="bg-item-active" class="list-group-item list-group-item-action items-navbar-style"><i class="{{item.icon}} mr-3 ml-3"></i> {{item.text}}</a>
79
</div>
810
</div>
911
<!-- /#sidebar-wrapper -->
10-
11-
<!-- Page Content -->
12-
<div class="container">
13-
<router-outlet></router-outlet>
12+
<div class="container-fluid mt-1">
13+
<app-navbar></app-navbar>
14+
<div class="container">
15+
<!-- Page Content -->
16+
<router-outlet></router-outlet>
17+
</div>
1418
</div>
15-
<!-- /#page-content-wrapper -->
16-
1719
</div>
18-
<!-- /#wrapper -->
20+
<!-- /#wrapper -->

‎src/app/modules/shared/components/sidebar/sidebar.component.scss

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44

55
#sidebar-wrapper {
66
min-height: 100vh;
7-
margin-left: -15rem;
7+
margin-left: -15vw;
88
-webkit-transition: margin .25s ease-out;
99
-moz-transition: margin .25s ease-out;
1010
-o-transition: margin .25s ease-out;
@@ -40,3 +40,26 @@ body {
4040
margin-left: -15rem;
4141
}
4242
}
43+
44+
.items-navbar-style {
45+
border-color: transparent;
46+
background-color: transparent;
47+
font-weight: bold;
48+
color: white;
49+
}
50+
51+
.sidebar-background {
52+
background-color: #FC5630 ;
53+
}
54+
55+
.bg-item-active {
56+
background-color: #FD927D;
57+
border-top-right-radius: 25px;
58+
border-bottom-right-radius: 25px;
59+
}
60+
61+
.items-sidebar-hover :hover {
62+
background-color: #FD927D;
63+
border-top-right-radius: 25px;
64+
border-bottom-right-radius: 25px;
65+
}

‎src/app/modules/shared/components/user/user.component.html

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
11
<div>
2-
<a
3-
class="nav-link dropdown-toggle help-color"
4-
id="navbarDropdown"
5-
role="button"
6-
data-toggle="dropdown"
7-
aria-haspopup="true"
8-
aria-expanded="false"
9-
>
2+
<a class="nav-link dropdown-toggle user-profile user-profile-hover border border-ligth rounded-pill text-center" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
103
<i class="far fa-user-circle"></i> Dario Herrera
114
</a>
12-
13-
<div
14-
class="dropdown-menu dropdown-menu-right"
15-
aria-labelledby="navbarDropdown"
16-
>
5+
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
176
<a class="dropdown-item">Sign Out</a>
187
</div>
19-
</div>
8+
</div>

‎src/app/modules/shared/components/user/user.component.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
.help-color {
2-
color: white;
1+
.user-profile {
2+
color: black;
3+
}
4+
5+
.user-profile-hover:hover {
6+
background-color: #F8F9FA;
7+
cursor: pointer;
38
}
49

510
.dropdown-menu {

‎src/assets/img/ioet-logo-light.png

40.5 KB
Loading

0 commit comments

Comments
 (0)