feat: #528 introducing responsive menu

Author: enriquezrene

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

@@ -1,30 +1,38 @@
 <div class="d-flex" id="wrapper">
-  <!-- Sidebar -->
-  <div id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
-    <div class="text-center my-5">
-      <img src="assets/img/ioet.png" width="70" height="auto" class="img-fluid" alt="ioet logo" />
+  <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="container">
-      <a
-        *ngFor="let item of itemsSidebar"
-        [routerLink]="item.route"
-        routerLinkActive=""
-        class="item-hover item"
-        [ngClass]="{active: item.active}"
-      >
-        <i class="{{ item.icon }}"></i> {{ item.text }}
-      </a>
+    <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>
   </div>
-  <!-- /#sidebar-wrapper -->
-  <div class="main_app">
-    <div class="header_app">
-      <app-navbar></app-navbar>
-    </div>
-    <div class="content_app">
-      <!-- Page Content -->
-      <router-outlet></router-outlet>
+  <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">
+        <div class="content_app">
+          <router-outlet></router-outlet>
+        </div>
     </div>
   </div>
 </div>
-<!-- /#wrapper -->

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

@@ -1,64 +1,56 @@
 @import '../../../../../styles/colors.scss';
 
-#wrapper {
-  height: 100vh;
+body {
+  overflow-x: hidden;
+}
 
-  #sidebar-wrapper {
-    flex: 0 0 14.5rem;
-    background-color: #f4f5f7;
-    z-index: 1;
-    margin-left: -15rem;
-    -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 {
+  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;
+}
 
-  .main_app {
-    flex: 1;
-  }
+#sidebar-wrapper .sidebar-heading {
+  padding: 0.875rem 1.25rem;
+  font-size: 1.2rem;
+}
 
-  .header_app {
-    height: 8%;
-  }
+#sidebar-wrapper .list-group {
+  width: 15rem;
+}
 
-  .content_app {
-    height: 92%;
-    padding: 1rem 3rem;
-    overflow-y: auto;
-  }
+#page-content-wrapper {
+  min-width: 100vw;
+}
 
+#wrapper.toggled #sidebar-wrapper {
+  margin-left: 0;
+}
 
-  .item-hover:hover {
-    color: #16BAC5;
+@media (min-width: 768px) {
+  #sidebar-wrapper {
+    margin-left: 0;
   }
-
-  .active {
-    color: #16BAC5;
-    font-weight: bold;
-    text-decoration: underline;
+  #page-content-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+  #wrapper.toggled #sidebar-wrapper {
+    margin-left: -15rem;
   }
 }
 
-.container {
-  display: grid;
-  grid-gap: 20px;
-  justify-content: center;
-  align-self: center;
-
-  .item {
-    font-size: medium;
-    color: #555164;
-    display: grid;
-    grid-template-columns: 30px 100px;
-    align-items: center;
-  }
+.content_app {
+  padding: 5rem 3rem;
+  overflow-y: auto;
 }
 
-@media (min-width: 768px) {
-  #wrapper {
-    #sidebar-wrapper {
-      margin-left: 0;
-    }
-  }
+.active {
+  color: $primary;
+  font-weight: bold;
+  text-decoration: underline;
+  border-color: $primary;
 }

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

@@ -11,6 +11,7 @@ import {filter} from 'rxjs/operators';
   styleUrls: ['./sidebar.component.scss'],
 })
 export class SidebarComponent implements OnInit {
+
   itemsSidebar: ItemSidebar[] = [];
   navStart;
 
@@ -21,13 +22,21 @@ export class SidebarComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.toggleSideBar();
     this.getSidebarItems();
     this.highlightMenuOption(this.router.routerState.snapshot.url);
     this.navStart.subscribe(evt => {
       this.highlightMenuOption(evt.url);
     });
   }
 
+  toggleSideBar() {
+    $('#menu-toggle').on('click', (e) => {
+      e.preventDefault();
+      $('#wrapper').toggleClass('toggled');
+    });
+  }
+  
   getSidebarItems() {
     if (this.azureAdB2CService.isAdmin()) {
       this.itemsSidebar = [

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

@@ -1,16 +1,10 @@
-<div>
-  <a
-    class="nav-link dropdown-toggle user-profile justify-content-center text-center"
-    id="navbarDropdown"
-    role="button"
-    data-toggle="dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
-  >
+<li class="nav-item active dropdown">
+  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+     aria-haspopup="true" aria-expanded="false">
     <i class="far fa-user-circle"></i>
     {{name}}
   </a>
-  <div class="dropdown-menu style-click" aria-labelledby="navbarDropdown">
-    <a class="dropdown-item style-click" (click)="logout()">Sign Out</a>
+  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+    <a class="dropdown-item" href="#" (click)="logout()">Sign Out</a>
   </div>
-</div>
+</li>

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

@@ -5,11 +5,6 @@
   cursor: pointer;
 }
 
-.dropdown-menu {
-  margin-left: 50%;
-  transform: translateX(-50%);
-}
-
 .style-click:active {
   background-color: $primary;
   color: white;