refactor: TT-331 Redesign of the sidebar

resolve merge conflicts

Author: Edgar Guaman

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

@@ -14,7 +14,18 @@
               <i class="{{ item.icon }}"></i> {{ item.text }}
             </a>
     </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 bg-whiteTW dark:bg-grayTW-dark">
       <button class="btn bg-primaryTW hover:bg-primaryTW-dark text-whiteTW hover:text-whiteTW" id="menu-toggle">
@@ -40,4 +51,4 @@
       </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();
+  }
 }