Adds: Sidebar Footer (style only)

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css

@@ -0,0 +1,29 @@
+.sidebar-footer {
+  width: 230px;
+  height: 40px;
+  margin: 5px 15px;
+  padding: 5px;
+  color: rgb(117, 117, 117);
+  background-color: #fafafa;
+  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
+}
+
+.sidebar-footer .option {
+  margin: 0px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 10px;
+  border-radius: 0px;
+}
+
+.sidebar-footer .vl {
+  border-right: 1px solid #d4d4d4;
+}
+
+.option .style-icon {
+	font-size: 15px;
+	margin: 0px;
+	width: 20px;
+	padding-top: 2px;
+	color: #2e75b6;
+}

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -0,0 +1,8 @@
+<div class="sidebar-footer d-flex justify-content-around">
+	<a class="option vl" href="#">
+		<i class="material-icons style-icon">mode_comment</i>
+		Glossary
+	</a>
+	<a class="option vl" href="#"><i class="fa fa-book style-icon"></i>Guide</a>
+	<a class="option" href="#"><i class="fa fa-life-ring style-icon"></i>Help</a>
+</div>

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarFooterComponent } from './sidebar-footer.component';
+
+describe('SidebarFooterComponent', () => {
+  let component: SidebarFooterComponent;
+  let fixture: ComponentFixture<SidebarFooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarFooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-footer',
+  templateUrl: './sidebar-footer.component.html',
+  styleUrls: ['./sidebar-footer.component.css']
+})
+export class SidebarFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

dmp-frontend/src/app/ui/sidebar/sidebar.component.css

@@ -18,6 +18,11 @@
 
 .nav hr {
   width: 230px;
-	border-top: 2px solid #fff;
+  border-top: 1px solid #fff;
-	border-bottom: 2px solid #e0e2e3;
+  border-bottom: 2px solid #d4d4d4;
+}
+
+.sidebar-footer {
+  position: relative;
+  height: 48%;
 }

dmp-frontend/src/app/ui/sidebar/sidebar.component.html

@@ -45,6 +45,7 @@
 
 	<!-- END OF MOBILE MENU -->
 
+	<!-- Sidebar Menu -->
 	<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst">
 		<div class="sidebarSubtitle">
 			<p>{{ groupMenuItem.title }}</p>
@@ -59,4 +60,10 @@
 		</li>
 		<hr *ngIf="!isLast">
 	</ul>
+	<!-- Sidebar Footer -->
+	<ul class="nav sidebar-footer">
+		<li class="active-pro nav-item">
+			<app-sidebar-footer></app-sidebar-footer>
+		</li>
+	</ul>
 </div>

dmp-frontend/src/app/ui/sidebar/sidebar.module.ts

@@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router';
 import { CommonFormsModule } from '../../common/forms/common-forms.module';
 import { CommonUiModule } from '../../common/ui/common-ui.module';
 import { SidebarComponent } from './sidebar.component';
+import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
 
 @NgModule({
 	imports: [
@@ -11,7 +12,8 @@ import { SidebarComponent } from './sidebar.component';
 		RouterModule
 	],
 	declarations: [
-		SidebarComponent
+		SidebarComponent,
+		SidebarFooterComponent
 	],
 	entryComponents: [],
 	exports: [SidebarComponent]

dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss

@@ -49,7 +49,7 @@
     width: 260px;
     z-index: 4;
 
-        padding-bottom: 30px;
+    padding-bottom: 10px;
 
     .dropdown .dropdown-backdrop {
       display: none !important;
@@ -82,7 +82,6 @@
           opacity: 1;
           white-space: nowrap;
           display: block;
-
         }
 
         .sidebar-mini {
@@ -172,7 +171,7 @@
           position: absolute;
           height: 1px;
           left: 15px;
-                    background-color: rgba(180,180,180, .3);
+          background-color: rgba(180, 180, 180, 0.3);
         }
 
         & + li {
@@ -214,7 +213,6 @@
     padding: 10px 15px;
   }
 
-
   .sidebar-background {
     position: absolute;
     z-index: 1;
@@ -233,8 +231,8 @@
       height: 100%;
       content: "";
       display: block;
-            background: #FFFFFF;
+      background: #ffffff;
-            opacity: .93;
+      opacity: 0.93;
     }
   }
 
@@ -246,14 +244,13 @@
     z-index: 4;
 
     &:after {
-            content: '';
+      content: "";
       position: absolute;
       bottom: 0;
       right: 15px;
       height: 1px;
       width: calc(100% - 30px);
-            background-color: rgba(180,180,180, .3);
+      background-color: rgba(180, 180, 180, 0.3);
-
     }
 
     p {
@@ -294,7 +291,6 @@
     }
   }
 
-
   &[data-background-color="black"] {
     @include sidebar-background-color($gray-base, $white-color);
 
@@ -334,7 +330,7 @@
     .logo,
     .nav li.separator {
       &:after {
-                background-color: rgba(255,255,255, .3);
+        background-color: rgba(255, 255, 255, 0.3);
       }
     }
 
@@ -348,7 +344,15 @@
 
   &[data-image]:after,
   &.has-image:after {
-        opacity: .77;
+    opacity: 0.77;
+  }
+
+  .nav .nav-item {
+    &.active-pro {
+      position: absolute;
+      width: 100%;
+      bottom: 0px;
+    }
   }
 }
 
@@ -367,7 +371,6 @@
   }
 }
 
-
 .main-panel {
   position: relative;
   float: right;
@@ -406,14 +409,13 @@
   }
 }
 
-
 .sidebar,
 .main-panel,
 .sidebar-wrapper {
   -webkit-transition-property: top, bottom, width;
   transition-property: top, bottom, width;
-    -webkit-transition-duration: .2s,.2s, .35s;
+  -webkit-transition-duration: 0.2s, 0.2s, 0.35s;
-    transition-duration: .2s,.2s, .35s;
+  transition-duration: 0.2s, 0.2s, 0.35s;
   -webkit-transition-timing-function: linear, linear, ease;
   transition-timing-function: linear, linear, ease;
   -webkit-overflow-scrolling: touch;
@@ -490,14 +492,4 @@
       }
     }
   }
-
-    .sidebar {
-      .nav .nav-item {
-        &.active-pro {
-          position: absolute;
-          width: 100%;
-          bottom: 13px;
-        }
-      }
-    }
 }