admin menu tertiary

app/partials/admin-roles.jade

@@ -0,0 +1,14 @@
+extends layout
+
+block head
+    title Taiga  Project management web application with scrum in mind!
+
+block content
+    sidebar.menu-secondary.sidebar
+        include views/modules/admin-menu
+    sidebar.menu-tertiary.sidebar
+        include views/modules/admin-menu-roles
+
+    section.main.admin-membership
+        header
+            include views/components/mainTitle

app/partials/views/modules/admin-menu-roles.jade

@@ -0,0 +1,24 @@
+section.admin-menu-roles
+    header
+        h1 Roles
+
+    nav
+        ul
+            li
+                a(href="") UX
+                  span.icon.icon-arrow-right
+            li
+                a(href="") Product Owner
+                  span.icon.icon-arrow-right
+            li
+                a(href="") Designer
+                  span.icon.icon-arrow-right
+            li
+                a(href="") Back
+                  span.icon.icon-arrow-right
+            li
+                a(href="") Front
+                  span.icon.icon-arrow-right
+
+        a.button-gray(href="", title="Add New US")
+            span.text + New role

app/styles/dependencies/colors.scss

@@ -13,6 +13,7 @@ $fresh-taiga: #9dce0a;
 $dark-taiga: #879b89;
 $dry-taiga: #70a87d;
 $morning-taiga: #7ab987;
+$dark-grayish-lime-green: #8b9e8d;
 
 $red-light: #ff8282;
 $red: #f00;

app/styles/layout/base.scss

@@ -26,12 +26,21 @@ body {
 }
 
 .menu-secondary {
+    background: $whitish;
     flex-basis: 260px;
     flex-grow: 1;
     flex-shrink: 0;
     padding: 2em 1em;
 }
 
+.menu-tertiary {
+    background-color: $dark-grayish-lime-green;
+    flex-basis: 190px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    padding: 2em 1em;
+}
+
 .extrabar {
     background: $whitish;
     // display: none;

app/styles/main.scss

@@ -32,7 +32,6 @@ $prefix-for-spec:      true;
 
 //Modules
 @import 'modules/nav';
-@import 'modules/sidebar';
 @import 'modules/sprints';
 @import 'modules/burndown';
 @import 'modules/backlog-table';
@@ -42,6 +41,7 @@ $prefix-for-spec:      true;
 @import 'modules/search-filter';
 @import 'modules/search-result-table';
 @import 'modules/admin-menu';
+@import 'modules/admin-menu-roles';
 @import 'modules/admin-membership';
 
 // Responsive

app/styles/modules/admin-menu-roles.scss

@@ -0,0 +1,35 @@
+.admin-menu-roles {
+    h1 {
+        color: $white;
+    }
+    li {
+        @extend %xlarge;
+        border-bottom: 1px solid #a6b2a7;
+        font-family: 'ostrichSans';
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+    a {
+        color: $white;
+        display: block;
+        padding: 1rem 0 1rem 1rem;
+        &.active,
+        &:hover {
+            color: $blackish;
+            .icon {
+                @include transition (opacity .3s linear);
+                opacity: 1;
+            }
+        }
+    }
+    .icon {
+        color: $white;
+        float: right;
+        opacity: 0;
+    }
+    .button-gray {
+        padding: .5rem 0;
+        text-align: center;
+    }
+}

app/styles/modules/admin-menu.scss

@@ -3,6 +3,9 @@
         @extend %xlarge;
         border-bottom: 1px solid $gray-light;
         font-family: 'ostrichSans';
+        &:last-child {
+            border-bottom: 0;
+        }
     }
     a {
         display: block;

app/styles/modules/sidebar.scss

@@ -1,3 +0,0 @@
-.sidebar {
-    background: $whitish;
-}