content adjust in navbar

src/app/app.module.ts

@@ -18,7 +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,
@@ -34,7 +34,6 @@ import { HighlightedDirective } from './directives/highlighted.directive';
     DetailsFieldsComponent,
     ProjectListHoverComponent,
     ModalComponent,
-    HighlightedDirective
   ],
   imports: [
     CommonModule,

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

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

src/app/components/shared/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>
+    <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin text-white"></i>
+</div>
+<div *ngIf="displayTime" class="text-white">
+    <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
 </div>

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

@@ -1,9 +1,21 @@
-<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>
+<nav class="navbar navbar-dark bg-dark">
 
-    <app-clock class="text-center"></app-clock>
-    <app-user></app-user>
+    <div class="container-fluid row">
+
+        <div class="col text-left">
+            <a class="navbar-brand" href="/">
+                <img src="assets/img/ioet.png" width="20" height="35" class="align-top" alt="">
+            </a>
+        </div>
+
+        <div class="col text-center">
+            <app-clock></app-clock>
+        </div>
+
+        <div class="col text-right" style="background-color: sienna;">
+            <app-user></app-user>
+        </div>
+
+    </div>
 
 </nav>

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

@@ -2,12 +2,12 @@
     <!-- Sidebar -->
     <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>
+            <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 -->