refactor: TT-331 Redesign of the sidebar

Author: Edgar Guaman

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

@@ -1,38 +1,54 @@
 <div class="d-flex" id="wrapper">
-  <div class="bg-light border-right" id="sidebar-wrapper">
-    <div class="sidebar-heading" style="text-align: center">
-      <img src="assets/img/ioet.png" width="90" height="auto" style="padding-top: 2rem; padding-bottom: 2rem;" alt="logo" />
-    </div>
-    <div class="list-group list-group-flush">
-            <a
-              *ngFor="let item of itemsSidebar"
-              [routerLink]="item.route"
-              routerLinkActive=""
-              class="list-group-item list-group-item-action bg-light"
-              [ngClass]="{active: item.active}"
-            >
-              <i class="{{ item.icon }}"></i> {{ item.text }}
-            </a>
+  <div class="table-row bg-white border-r border-grey-500" id="sidebar-wrapper">
+    <div class="table-cell">
+      <div class="relative flex items-center border-b border-grey-500 sidebar-heading">
+        <img src="assets/img/ioet-logo-without-letters.png" width="40" height="auto" style="padding-top: 0.5rem; padding-left: 1rem;" alt="logo"/>
+        <h1 class="pl-2 pt-2" style="font-family:spinnaker,sans-serif">ioet</h1>
+      </div>
+      <div class=" py-8 flex items-center pl-3">
+        <img src="assets/icons/user.svg" width="40" height="40"/>
+        <span class="pl-1">
+          <h2 class="font-sans text-base font-semibold">{{userName}}</h2>
+          <p class="font-sans mt-1 text-xs font-medium text-grey dark:text-gray-400">{{userEmail}}</p>
+        </span>
+      </div>
+      <div class="list-group list-group-flush">
+        <a
+          *ngFor="let item of itemsSidebar"
+          [routerLink]="item.route"
+          routerLinkActive=""
+          class="font-sans relative pl-4 py-3 bg-white"
+          [ngClass]="{active: item.active}"
+        >
+        <img src="{{item.icon}}" width="22" height="22" class="absolute"/>
+        <h3 class="font-sans text-base pl-5 text-left" >{{ item.text }}</h3>
+        <!-- <i class="{{ item.icon }} pr-3"></i> {{ item.text }} -->
+        </a>
+        <div class="bg-white pt-2 pr-24 absolute bottom-0">
+          <a class="flex pl-4 mb-4 text-black-dark hover:text-gray-800" href="#">
+            <img src="assets/icons/signout.svg" width="25" height="25"/>
+            <span class="font-sans pl-4 font-medium" (click)="logout()">Sign out</span>
+          </a>
+        </div>       
+      </div>
     </div>
+  <div class="table-cell relative">
+    <span class="absolute cursor-pointer inset-y-0 right-0 min-h-screen w-0.5 hover:z-0 hover:bg-blue-400"  (click)="toggleSideBar()"></span>
+      <span class="group cursor-pointer absolute w-5 top-20 -right-3">
+        <img src="assets/icons/left-chevron.svg" id="hide-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:hidden md:block lg:block"/>
+        <div class="opacity-0 w-12 bg-black text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Hide</div>
+      </span>
+      <span class="group cursor-pointer absolute top-20 -right-5">
+        <img src="assets/icons/right-chevron.svg" id="show-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:block md:hidden lg:hidden"/>
+        <div class="opacity-0 w-12 bg-black text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Show</div>
+      </span>
   </div>
+ </div>
   <div id="page-content-wrapper">
-    <nav class="navbar navbar-expand-lg navbar-light border-bottom">
-      <button class="btn btn-primary" id="menu-toggle">
-        Toggle Menu
-      </button>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
-            <app-user></app-user>
-        </ul>
-      </div>
-    </nav>
     <div class="container-fluid px-0 full-height">
         <div class="content_app h-100">
           <router-outlet></router-outlet>
         </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -7,10 +7,10 @@ body {
 #sidebar-wrapper {
   min-height: 100vh;
   margin-left: -15rem;
-  -webkit-transition: margin .25s ease-out;
-  -moz-transition: margin .25s ease-out;
-  -o-transition: margin .25s ease-out;
-  transition: margin .25s ease-out;
+  -webkit-transition: margin 0.25s ease-out;
+  -moz-transition: margin 0.25s ease-out;
+  -o-transition: margin 0.25s ease-out;
+  transition: margin 0.25s ease-out;
 }
 
 #sidebar-wrapper .sidebar-heading {
@@ -30,7 +30,7 @@ body {
   margin-left: 0;
 }
 
-@media (min-width: 883px) {
+@media (min-width: 769px) {
   #sidebar-wrapper {
     margin-left: 0;
   }
@@ -41,6 +41,21 @@ body {
   #wrapper.toggled #sidebar-wrapper {
     margin-left: -15rem;
   }
+  #hide-sidebar {
+    display: block;
+  }
+  #show-sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  #hide-sidebar {
+    display: none;
+  }
+  #show-sidebar {
+    display: block;
+  }
 }
 
 .content_app {

src/app/modules/shared/components/sidebar/sidebar.component.spec.ts

@@ -33,7 +33,7 @@ describe('SidebarComponent', () => {
       TestBed.configureTestingModule({
         declarations: [SidebarComponent],
         providers: [
-          { provide: AzureAdB2CService, useValue: azureAdB2CServiceStub },
+          AzureAdB2CService,
           { provide: UserInfoService, useValue: userInfoServiceStub },
         ],
         imports: [RouterTestingModule.withRoutes(routes)],
@@ -83,4 +83,10 @@ describe('SidebarComponent', () => {
     });
   });
 
+  it('uses the Azure service on logout', () => {
+    spyOn(azureAdB2CServiceStubInjected, 'logout');
+    component.logout();
+    expect(azureAdB2CServiceStubInjected.logout).toHaveBeenCalled();
+  });
+
 });

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

@@ -4,70 +4,76 @@ import { NavigationStart, Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { UserInfoService } from 'src/app/modules/user/services/user-info.service';
-
+import { AzureAdB2CService } from '../../../login/services/azure.ad.b2c.service';
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
 })
 export class SidebarComponent implements OnInit, OnDestroy {
-  itemsSidebar: ItemSidebar[] = [];
+  itemsSidebar: ItemSidebar[];
   navStart;
   sidebarItems$: Subscription;
+  userName: string;
+  userEmail: string;
 
-  constructor(
-    private router: Router,
-    private userInfoService: UserInfoService,
-  ) {
+  constructor(private router: Router, private userInfoService: UserInfoService, private azureAdB2CService: AzureAdB2CService) {
     this.navStart = this.router.events.pipe(
       filter((evt) => evt instanceof NavigationStart)
     ) as Observable<NavigationStart>;
   }
 
   ngOnInit(): void {
-    this.toggleSideBar();
     const currentRouting = this.router.routerState.snapshot.url;
     this.sidebarItems$ = this.getSidebarItems().subscribe(() => this.highlightMenuOption(currentRouting));
     this.navStart.subscribe((evt) => {
       this.highlightMenuOption(evt.url);
     });
+    if (this.azureAdB2CService.isLogin()) {
+      this.userName = this.azureAdB2CService.getName();
+      this.userEmail = this.azureAdB2CService.getUserEmail();
+    }
   }
 
   ngOnDestroy(): void {
     this.sidebarItems$.unsubscribe();
   }
 
   toggleSideBar() {
-    $('#menu-toggle').on('click', (e) => {
-      e.preventDefault();
-      $('#wrapper').toggleClass('toggled');
-    });
+    $('#wrapper').toggleClass('toggled');
+    $('#show-sidebar').toggle();
+    $('#hide-sidebar').toggle();
   }
 
   getSidebarItems(): Observable<void> {
     return this.userInfoService.isAdmin().pipe(
       map((isAdmin) => {
         if (isAdmin) {
           this.itemsSidebar = [
-            { route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock', active: false },
-            { route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries', active: false },
-            { route: '/reports', icon: 'fas fa-chart-pie', text: 'Reports', active: false },
-            { route: '/activities-management', icon: 'fas fa-file-alt', text: 'Activities', active: false },
-            { route: '/customers-management', icon: 'fas fa-user', text: 'Customers', active: false },
-            { route: '/users', icon: 'fas fa-user', text: 'Users', active: false },
+            { route: '/time-clock', icon: 'assets/icons/clock.svg', text: 'Time Clock', active: false },
+            { route: '/time-entries', icon: 'assets/icons/time-entries.svg', text: 'Time Entries', active: false },
+            { route: '/reports', icon: 'assets/icons/reports.svg', text: 'Reports', active: false },
+            { route: '/activities-management', icon: 'assets/icons/activities.svg', text: 'Activities', active: false },
+            { route: '/customers-management', icon: 'assets/icons/customers.svg', text: 'Customers', active: false },
+            { route: '/users', icon: 'assets/icons/users.svg', text: 'Users', active: false },
           ];
         } else {
           this.itemsSidebar = [
-            { route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock', active: false },
-            { route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries', active: false },
+            { route: '/time-clock', icon: 'assets/icons/clock.svg', text: 'Time Clock', active: false },
+            { route: '/time-entries', icon: 'assets/icons/time-entries.svg', text: 'Time Entries', active: false },
           ];
         }
       })
     );
   }
 
+
   highlightMenuOption(route) {
     this.itemsSidebar.map((item) => (item.active = false));
     this.itemsSidebar.filter((item) => item.route === route).map((item) => (item.active = true));
   }
+
+  logout() {
+    this.azureAdB2CService.logout();
+  }
 }