#19 added navbar and sidebar styles

src/app/app.component.html

@@ -1,5 +1,3 @@
-<app-navbar></app-navbar>
-
 <app-sidebar>
     <router-outlet></router-outlet>
-</app-sidebar>
+</app-sidebar>

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

@@ -1,8 +1,6 @@
-<div class="row">
-  <div class="col mt-1  time-clock-color">
-    <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
-  </div>
-  <div *ngIf="displayTime" class="col time-clock-color">
-    <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
-  </div>
+<div class="col time-clock-color">
+  <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
+</div>
+<div *ngIf="displayTime" class="col time-clock-color">
+  <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
 </div>

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

@@ -1,3 +1,4 @@
 .time-clock-color {
-  color: white;
+  color: black
 }
+

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

@@ -1,8 +1,8 @@
-<nav class="navbar navbar-dark bg-dark">
-  <a class="navbar-brand" href="#">
-    <img src="assets/img/ioet.png" width="20" height="35" class="d-inline-block align-top" alt="">
-  </a>
-
-  <app-clock class="text-center"></app-clock>
-  <app-user></app-user>
-</nav>
+<nav class="navbar navbar-light bg-white border-light border-bottom mt-1">
+  <div class="col-10 text-center">
+    <app-clock></app-clock>
+  </div>
+  <div class="col-2 text-right">
+    <app-user></app-user>
+  </div>
+</nav>

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

@@ -1,18 +1,20 @@
 <div class="d-flex" id="wrapper">
   <!-- Sidebar -->
-  <div class="bg-light border-right" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
-    <div class="list-group list-group-flush">
-      <a *ngFor="let item of itemsSidebar" [routerLink]="item.route"  routerLinkActive="dark"
-          class="list-group-item list-group-item-action bg-light"><i class="{{item.icon}}"></i> {{item.text}}</a>
+  <div class="mt-1 ml-1 rounded-lg sidebar-background" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
+    <div class="text-center mt-5 mb-5">
+      <img src="assets/img/ioet-logo-light.png" width="100" height="100" class="img-fluid text-center" alt="Ioet logo">
+    </div>
+    <div class="list-group list-group-flush rounded-lg items-sidebar-hover">
+      <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>
     </div>
   </div>
   <!-- /#sidebar-wrapper -->
-
-  <!-- Page Content -->
-  <div class="container">
-    <router-outlet></router-outlet>
+  <div class="container-fluid mt-1">
+    <app-navbar></app-navbar>
+    <div class="container">
+      <!-- Page Content -->
+      <router-outlet></router-outlet>
+    </div>
   </div>
-  <!-- /#page-content-wrapper -->
-
 </div>
-<!-- /#wrapper -->
+<!-- /#wrapper -->

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

@@ -4,7 +4,7 @@ body {
 
 #sidebar-wrapper {
   min-height: 100vh;
-  margin-left: -15rem;
+  margin-left: -15vw;
   -webkit-transition: margin .25s ease-out;
   -moz-transition: margin .25s ease-out;
   -o-transition: margin .25s ease-out;
@@ -40,3 +40,26 @@ body {
     margin-left: -15rem;
   }
 }
+
+.items-navbar-style {
+  border-color: transparent;
+  background-color: transparent;
+  font-weight: bold;
+  color: white;
+}
+
+.sidebar-background {
+  background-color: #FC5630 ;
+}
+
+.bg-item-active {
+  background-color: #FD927D;
+  border-top-right-radius: 25px;
+  border-bottom-right-radius: 25px;
+}
+
+.items-sidebar-hover :hover {
+  background-color: #FD927D;
+  border-top-right-radius: 25px;
+  border-bottom-right-radius: 25px;
+}

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

@@ -1,19 +1,8 @@
 <div>
-  <a
-    class="nav-link dropdown-toggle help-color"
-    id="navbarDropdown"
-    role="button"
-    data-toggle="dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
-  >
+  <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">
     <i class="far fa-user-circle"></i> Dario Herrera
   </a>
-
-  <div
-    class="dropdown-menu dropdown-menu-right"
-    aria-labelledby="navbarDropdown"
-  >
+  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
     <a class="dropdown-item">Sign Out</a>
   </div>
-</div>
+</div>

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

@@ -1,5 +1,10 @@
-.help-color {
-  color: white;
+.user-profile {
+  color: black;
+}
+
+.user-profile-hover:hover {
+  background-color: #F8F9FA;
+  cursor: pointer;
 }
 
 .dropdown-menu {