feat(Auth0): Log Out functionality

Author: commitBlob

src/app/auth-pages/admin-bar/admin-bar.component.html

@@ -1,3 +1,26 @@
-<div class="admin-bar-wrapper">
-    admin bar
+<div class="admin-bar-wrapper" [ngClass]="{'admin-bar-expanded': expanded}">
+    <div class="admin-bar-toggle">
+        <span class="toggle-button fa-stack" *ngIf="expanded else collapsed" (click)="toggleSidenav()">
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fas fa-angle-left fa-stack-1x dark-icon"></i>
+        </span>
+        <ng-template #collapsed>
+            <span class="toggle-button fa-stack" (click)="toggleSidenav()">
+            <i class="fas fa-circle fa-stack-2x"></i>
+            <i class="fas fa-angle-right fa-stack-1x dark-icon"></i>
+        </span>
+        </ng-template>
+
+    </div>
+    <div class="admin-bar-actions">
+<!--        admin actions-->
+    </div>
+    <div class="user-actions" (mouseover)="doorOpen = true" (mouseout)="doorOpen = false" (click)="auth.logout()">
+        <i class="fas fa-door-open" *ngIf="doorOpen else doorClosed"></i>
+        <ng-template #doorClosed>
+            <div>
+               <i class="fas fa-door-closed"></i>
+            </div>
+        </ng-template>
+    </div>
 </div>

src/app/auth-pages/admin-bar/admin-bar.component.ts

@@ -1,10 +1,22 @@
 // Core
 import { Component } from '@angular/core';
 
+// App specific
+import { AuthService } from '../../shared/auth-service/auth.service';
+
 @Component({
   selector: 'app-admin-bar',
   templateUrl: 'admin-bar.component.html'
 })
 export class AdminBarComponent {
 
+  expanded = false;
+  doorOpen = false;
+
+  constructor(public auth: AuthService) {
+  }
+
+  toggleSidenav(): void {
+    this.expanded = !this.expanded;
+  }
 }

src/app/shared/auth-service/auth.service.ts

@@ -117,7 +117,7 @@ export class AuthService {
       // Call method to log out
       client.logout({
         client_id: environment.client_id,
-        returnTo: `${window.location.origin}/kantun`
+        returnTo: `${window.location.origin}`
       });
     });
   }

src/app/shared/navigation/admin-navigation-items.ts

@@ -0,0 +1,15 @@
+import { NavigationInteface } from './navigation.inteface';
+
+export const AdminNavigation: NavigationInteface[] = [
+  {
+    linkIcon: 'fas fa-tachometer-alt',
+    linkName: 'Dashboard',
+    linkPath: ''
+  },
+  // {
+  //   linkIcon: 'fab fa-superpowers',
+  //   linkName: 'SUPERPOWERS',
+  //   linkPath: 'skills',
+  //   linkSubName: 'SKILLS'
+  // }
+];

src/assets/styles/components/_admin-bar.scss

@@ -1,5 +1,49 @@
 .admin-bar-wrapper {
-    width: 100%;
-    height: 70px;
     background-color: $back-vari-2;
+    max-width: 300px;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    width: 84px;
+    transition: width 0.3s;
+
+    .admin-bar-toggle {
+        padding: 1em 1.4em 1em 1em;
+
+        .toggle-button {
+            font-size: 1.4em;
+            cursor: pointer;
+            color: $brand-secondary;
+            transition: 0.3s;
+            transform: translateX(0);
+            float: right;
+
+
+            &:hover {
+                color: $neon-pink;
+                transform: translateX(.3em);
+            }
+        }
+    }
+
+    .admin-bar-actions {
+        padding: 1em;
+        border: solid 1px orange;
+    }
+
+    .user-actions {
+        padding: 1em;
+
+        i {
+            font-size: 2em;
+            cursor: pointer;
+            color: $brand-primary;
+        }
+
+    }
+}
+
+.admin-bar-expanded {
+    transition: width 0.3s;
+    width: 300px;
 }

src/assets/styles/components/_buttons.scss

@@ -36,3 +36,8 @@ button {
     }
   }
 }
+
+
+.dark-icon {
+  color: $base-background;
+}

src/assets/styles/layout/_admin-wrapper.scss

@@ -5,4 +5,6 @@
     left: 0;
     right: 0;
     background-color: $base-background;
-}
+    display: flex;
+    flex-flow: row;
+}