Merge branch 'feature/sidebar'

src/app/app.component.css

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

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,45 +1,89 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-
+
-@Component({
+/*
-  selector: 'app-root',
+ * Interface for sidebar-links
-  templateUrl: './app.component.html',
+ */
-  styleUrls: ['./app.component.css'],
+declare interface RouteInfo {
-})
+  path: string;
-export class AppComponent {
+  title: string;
-  /*
+  class: string;
-  changeSidebarColor(color){
+}
-    var sidebar = document.getElementsByClassName('sidebar')[0];
+
-    var mainPanel = document.getElementsByClassName('main-panel')[0];
+/* define routes for sidebar-links */
-
+export const ROUTES: RouteInfo[] = [
-    this.sidebarColor = color;
+  {
-
+    path: "/dashboard",
-    if(sidebar != undefined){
+    title: "Dashboard",
-        sidebar.setAttribute('data',color);
+    class: ""
-    }
+  },
-    if(mainPanel != undefined){
+  {
-        mainPanel.setAttribute('data',color);
+    path: "/backlog",
-    }
+    title: "Backlog",
-  }
+    class: ""
-  */
+  },
-  changeDashboardColor(color) {
+  {
-    var body = document.getElementsByTagName('body')[0];
+    path: "/userstories",
-    if (body && color === 'white-content') {
+    title: "Userstories",
-      body.classList.add(color);
+    class: ""
-    } else if (body.classList.contains('white-content')) {
+  },
-      body.classList.remove('white-content');
+  {
-    }
+    path: "/tasks",
-  }
+    title: "Tasks",
-  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+    class: ""
-  /*
+  },
-   updateColor = () => {
+  {
-   var navbar = document.getElementsByClassName('navbar')[0];
+    path: "/sprints",
-     if (window.innerWidth < 993 && !this.isCollapsed) {
+    title: "Sprints",
-       navbar.classList.add('bg-white');
+    class: ""
-       navbar.classList.remove('navbar-transparent');
+  }
-     } else {
+];
-       navbar.classList.remove('bg-white');
+
-       navbar.classList.add('navbar-transparent');
+
-     }
+@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];
+
+    this.sidebarColor = color;
+
+    if(sidebar != undefined){
+        sidebar.setAttribute('data',color);
+    }
+    if(mainPanel != undefined){
+        mainPanel.setAttribute('data',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);
+    } else if (body.classList.contains('white-content')) {
+      body.classList.remove('white-content');
+    }
+  }
+ 
+}

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

@@ -1,3 +1,12 @@
-th.sortable:hover {
+th.sortable:hover {
-  text-decoration: underline;
+  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%;
+}