merge feature/sidebar

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { SprintTableComponent } from './sprint-table/sprint-table.component';
 // import { DashboardComponent } from './dashboard/dashboard.component';
 
 
+
 const routes: Routes = [
   { path: 'tasks', component: TaskTableComponent },
   { path: 'userstories', component: UserstoryTableComponent },

src/app/app.component.css

@@ -0,0 +1,22 @@
+.sidebar {
+  width: 150px;
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  bottom: 0;
+  opacity: 95%;
+}
+
+.nav a {
+    font-size: 1em;
+}
+
+.nav a:hover:not(.active) {
+    font-size: 1.15em;
+  }
+
+.content {
+    position: relative;
+    float: right;
+    margin-top: 10px;
+}

src/app/app.component.html

@@ -1,5 +1,39 @@
-<router-outlet></router-outlet>
-<div class=" fixed-plugin">
+<div class="container-fluid">
+
+  <div class="sidebar">
+    <div class="logo">
+      <a class="simple-text logo-normal">
+        Taskboard
+      </a>
+    </div>
+      <ul class="nav">
+        <li class="active ">
+          <a href="/dashboard">
+            <p>Dashboard</p>
+          </a>
+        </li>
+        <li>
+          <a href="/sprints">
+            <p>Sprints</p>
+          </a>
+        </li>
+        <li>
+          <a href="/userstories">
+            <p>Userstories</p>
+          </a>
+        </li>
+        <li>
+          <a href="/tasks">
+            <p>Tasks</p>
+          </a>
+        </li>
+      </ul>
+  </div>
+
+  <router-outlet></router-outlet>
+
+  <div class="content">
+    <div class=" fixed-plugin">
       <div class=" show-dropdown" ngbDropdown>
         <a data-toggle="dropdown" ngbDropdownToggle>
           <i class="fa fa-cog fa-2x"></i>
@@ -37,3 +71,5 @@
         </ul>
       </div>
     </div>
+  </div>
+</div>

src/app/dashboard/dashboard.component.html

@@ -92,6 +92,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   </div>
 

src/app/sprint-table/sprint-table.component.css

@@ -1,3 +1,11 @@
 th.sortable:hover {
     text-decoration: underline;
 }
+
+.content {
+    position: relative;
+    float: left;
+    margin-top: 10px;
+    margin-left: 20px;
+    width: 80%;
+}

src/app/sprint-table/sprint-table.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
-
+  <div class="content">
     <h3>
       Sprints
     </h3>
@@ -63,4 +63,4 @@
 
     </table>
   </div>
-  
+</div>

src/app/task-table/task-table.component.css

@@ -1,3 +1,11 @@
 th.sortable:hover {
   text-decoration: underline;
 }
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}

src/app/task-table/task-table.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
-
+  <div class="content">
     <h3>
       <a *ngIf="filterUserstoryId" [routerLink]="['/userstories', {id: filterUserstoryId}]">
         Userstory #{{filterUserstoryId}}
@@ -122,5 +122,5 @@
       </tbody>
 
     </table>
+  </div>
 </div>
-

src/app/userstory-table/userstory-table.component.css

@@ -1,3 +1,11 @@
 th.sortable:hover {
   text-decoration: underline;
 }
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}