added some styles

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { CreateProjectComponent } from './components/shared/create-project/creat
 import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
 import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
 import { ModalComponent } from './components/shared/modal/modal.component';
+import { HighlightedDirective } from './directives/highlighted.directive';
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,7 +33,8 @@ import { ModalComponent } from './components/shared/modal/modal.component';
     TimeClockComponent,
     DetailsFieldsComponent,
     ProjectListHoverComponent,
-    ModalComponent
+    ModalComponent,
+    HighlightedDirective
   ],
   imports: [
     CommonModule,

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -1,4 +1,4 @@
-<div class="text-center mt-3">
+<div class="text-center mt-5">
 
     <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
         Field technology is requiered. Enter this field for clock out.

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

@@ -1,5 +1,5 @@
-<nav class="navbar navbar-dark bg-dark">
-    <a class="navbar-brand" href="#">
+<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>
 

src/app/components/shared/sidebar/sidebar.component.css

@@ -2,6 +2,14 @@ body {
     overflow-x: hidden;
 }
 
+.options-sidebar-hover :hover {
+    color: #30BCED !important
+}
+
+.color-item-avtive {
+    color: #16BAC5 !important
+}
+
 #sidebar-wrapper {
     min-height: 100vh;
     margin-left: -15rem;

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

@@ -1,13 +1,13 @@
 <div class="d-flex" id="wrapper">
     <!-- Sidebar -->
-    <div class="bg-light border-right" id="sidebar-wrapper">
-        <div class="list-group list-group-flush">
-            <a [routerLink]="['/getting-started']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-flag"></i>   Getting Started</a>
-            <a [routerLink]="['/time-clock']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
-            <a [routerLink]="['/time-entries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
-            <a [routerLink]="['/time-off']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-paper-plane"></i>  Time Off</a>
-            <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
-            <a [routerLink]="['/project-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i>   Projects</a>
+    <div class="bg-dark border-right rounded-right " id="sidebar-wrapper">
+        <div class="list-group options-sidebar-hover">
+            <a [routerLink]="['/getting-started']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white" style="border-top-color: #565264; border-color: #565264;"><i class="fas fa-flag "></i>   Getting Started</a>
+            <a [routerLink]="['/time-clock']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-clock "></i>   Time Clock</a>
+            <a [routerLink]="['/time-entries']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-list-alt "></i>  Time Entries</a>
+            <a [routerLink]="['/time-off']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-paper-plane "></i>  Time Off</a>
+            <a [routerLink]="['/reports']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="fas fa-chart-pie "></i>   Reports</a>
+            <a [routerLink]="['/project-management']" routerLinkActive="color-item-avtive" class="list-group-item list-group-item-action bg-dark text-white " style="border-color: #565264;"><i class="far fa-folder-open "></i>   Projects</a>
         </div>
     </div>
     <!-- /#sidebar-wrapper -->
@@ -19,4 +19,4 @@
     <!-- /#page-content-wrapper -->
 
 </div>
-<!-- /#wrapper -->
+<!-- /#wrapper -->

src/app/directives/highlighted.directive.spec.ts

@@ -0,0 +1,8 @@
+import { HighlightedDirective } from './highlighted.directive';
+
+describe('HighlightedDirective', () => {
+  it('should create an instance', () => {
+    const directive = new HighlightedDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/highlighted.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlighted]'
+})
+export class HighlightedDirective {
+
+  constructor( private el: ElementRef ) {
+    console.log('Directiva llamada!');
+   }
+
+   @Input('appHighlighted') nuevoColor: string;
+
+   @HostListener('mouseenter') mouseEntro() {
+    this.resaltar( this.nuevoColor || 'red' );
+   }
+
+   @HostListener('mouseleave') mouseSalio() {
+    this.resaltar( null );
+   }
+
+   private resaltar( color: string ) {
+    this.el.nativeElement.style.color = color;
+   }
+
+}

src/index.html

@@ -7,7 +7,6 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
 </head>
 
@@ -17,4 +16,4 @@
     <script src="https://kit.fontawesome.com/76d0c245a1.js" crossorigin="anonymous"></script>
 </body>
 
-</html>
+</html>