Merge branch 'feature/sidebar'

src/app/app.component.css

@@ -1,20 +1,22 @@
+/* size and position of the sidebar */
 .sidebar {
   width: 150px;
   position: relative;
   float: left;
   margin-top: 10px;
-  bottom: 0;
+  /* background: rgba(34, 129, 247, 0.8); */
-  opacity: 95%;
 }
 
 .nav a {
   font-size: 1em;
 }
 
+/* show cursor position on link */
 .nav a:hover:not(.active) {
-  font-size: 1.15em;
+    font-size: 1.1em;
-}
+  }
 
+/* show content beneath sidebar */
 .content {
   position: relative;
   float: right;

src/app/app.component.html

@@ -1,49 +1,35 @@
 <div class="container-fluid">
+
+  <!-- sidebar div -->
   <div class="sidebar">
-    <div class="logo">
+  <div class="sidebar-wrapper">
-      <a class="simple-text logo-normal">
-        Taskboard
-      </a>
-    </div>
     <ul class="nav">
-      <li class="active">
+      <li
-        <a [routerLink]="['dashboard']">
+        routerLinkActive="active"
-          <p>Dashboard</p>
+        *ngFor="let menuItem of menuItems"
-        </a>
+        class="{{ menuItem.class }} nav-item"
-      </li>
+      >
-      <li>
+        <a [routerLink]="[menuItem.path]">
-        <a [routerLink]="['backlog']">
+          <i class="tim-icons  {{ menuItem.icon }}"></i>
-          <p>Backlog</p>
+          <p>{{ menuItem.title }}</p>
-        </a>
-      </li>
-      <li>
-        <a [routerLink]="['sprints']">
-          <p>Sprints</p>
-        </a>
-      </li>
-      <li>
-        <a [routerLink]="['userstories']">
-          <p>Userstories</p>
-        </a>
-      </li>
-      <li>
-        <a [routerLink]="['tasks']">
-          <p>Tasks</p>
         </a>
       </li>
     </ul>
   </div>
+</div>
 
   <router-outlet></router-outlet>
 
+  <!-- content class for sidebar-css -->
   <div class="content">
-    <div class="fixed-plugin">
+    <div class=" fixed-plugin">
-      <div class="show-dropdown" ngbDropdown>
+      <div class=" show-dropdown" ngbDropdown>
         <a data-toggle="dropdown" ngbDropdownToggle>
           <i class="fa fa-cog fa-2x"></i>
         </a>
         <ul ngbDropdownMenu>
-          <!--
+          <
+          <!-- sidebar background -->
           <li class=" header-title">Sidebar Background</li>
           <li class=" adjustments-line">
             <a class=" switch-trigger background-color" href="javascript:void(0)">
@@ -65,20 +51,13 @@
               <div class=" clearfix"></div>
             </a>
           </li>
-          -->
+
-          <li class="adjustments-line text-center color-change">
+          <!-- change dashboard-color for dark-/whitemode -->
-            <span class="color-label"> LIGHT MODE </span>
+          <li class=" adjustments-line text-center color-change">
-            <span
+            <span class=" color-label"> LIGHT MODE </span>
-              class="badge light-badge mr-2"
+            <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
-              (click)="changeDashboardColor('white-content')"
+            <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
-            >
+            <span class=" color-label"> DARK MODE </span>
-            </span>
-            <span
-              class="badge dark-badge ml-2"
-              (click)="changeDashboardColor('black-content')"
-            >
-            </span>
-            <span class="color-label"> DARK MODE </span>
           </li>
         </ul>
       </div>

src/app/app.component.ts

@@ -1,12 +1,67 @@
 import { Component } from '@angular/core';
 
+/*
+ * Interface for sidebar-links
+ */
+declare interface RouteInfo {
+  path: string;
+  title: string;
+  class: string;
+}
+
+/* define routes for sidebar-links */
+export const ROUTES: RouteInfo[] = [
+  {
+    path: "/dashboard",
+    title: "Dashboard",
+    class: ""
+  },
+  {
+    path: "/backlog",
+    title: "Backlog",
+    class: ""
+  },
+  {
+    path: "/userstories",
+    title: "Userstories",
+    class: ""
+  },
+  {
+    path: "/tasks",
+    title: "Tasks",
+    class: ""
+  },
+  {
+    path: "/sprints",
+    title: "Sprints",
+    class: ""
+  }
+];
+
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
+
+  /* function to add and load sidebar */
 export class AppComponent {
-  /*
+  
+  menuItems: any[];
+  public sidebarColor: string = "blue";
+
+  ngOnInit() {
+    this.menuItems = ROUTES.filter(menuItem => menuItem);
+  }
+  isMobileMenu() {
+    if (window.innerWidth > 991) {
+      return false;
+    }
+    return true;
+  }
+
+  /* function to change sidebar color */
   changeSidebarColor(color){
     var sidebar = document.getElementsByClassName('sidebar')[0];
     var mainPanel = document.getElementsByClassName('main-panel')[0];
@@ -20,8 +75,9 @@ export class AppComponent {
         mainPanel.setAttribute('data',color);
     }
   }
-  */
+
-  changeDashboardColor(color) {
+  /* function to change dashboard-color for darkmode and whitemode */
+  changeDashboardColor(color){
     var body = document.getElementsByTagName('body')[0];
     if (body && color === 'white-content') {
       body.classList.add(color);
@@ -29,17 +85,5 @@ export class AppComponent {
       body.classList.remove('white-content');
     }
   }
-  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+ 
-  /*
-   updateColor = () => {
-   var navbar = document.getElementsByClassName('navbar')[0];
-     if (window.innerWidth < 993 && !this.isCollapsed) {
-       navbar.classList.add('bg-white');
-       navbar.classList.remove('navbar-transparent');
-     } else {
-       navbar.classList.remove('bg-white');
-       navbar.classList.add('navbar-transparent');
-     }
-   };
-   */
 }

src/app/components/backlog/backlog.component.css

@@ -1,3 +1,12 @@
 th.sortable:hover {
   text-decoration: underline;
 }
+
+/* show content beneath sidebar */
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 10px;
+  width: 80%;
+}

src/app/components/dashboard/dashboard.component.css

@@ -5,3 +5,12 @@
 .text-very-large {
   font-size: 2.4rem;
 }
+
+/* show content beneath sidebar */
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 10px;
+  width: 80%;
+}