US#4445: Add milestones to main menu

app/modules/components/project-menu/project-menu.jade

@@ -25,7 +25,12 @@ nav.menu(
                     tg-svg(svg-icon="icon-timeline")
                     span.helper(translate="PROJECT.SECTION.TIMELINE")
 
-            li#nav-backlog(ng-if="vm.menu.get('backlog')")
+            li#nav-backlog(
+                ng-if="vm.menu.get('backlog')"
+                ng-mouseover="backlogHover = true"
+                ng-mouseleave="backlogHover = false"
+                ng-init="backlogHover = false"
+            )
                 a(
                     tg-nav="project-backlog:project=vm.project.get('slug')"
                     ng-class="{active: vm.active == 'backlog'}"
@@ -33,7 +38,14 @@ nav.menu(
                     tabindex="2"
                 )
                     tg-svg(svg-icon="icon-scrum")
-                    span.helper(translate="PROJECT.SECTION.BACKLOG")
+
+                span.backlog-sprints-menu(ng-show="backlogHover")
+                  span(translate="PROJECT.SECTION.BACKLOG")
+                  a(
+                      tg-repeat="sprint in vm.project.get('milestones') track by sprint.get('id')"
+                      ng-if="!sprint.get('closed')"
+                      tg-nav="project-taskboard:project=vm.project.get('slug'),sprint=sprint.get('slug')"
+                  ) {{::sprint.get('name')}}
 
             li#nav-kanban(ng-if="vm.menu.get('kanban')")
                 a(

app/styles/modules/common/nav.scss

@@ -27,6 +27,9 @@ tg-project-menu {
         padding: 1.1rem .8rem;
         position: relative;
     }
+    li {
+        position: relative;
+    }
     a:hover {
         background: rgba($black, .2);
         transition: color .3s linear;
@@ -100,3 +103,45 @@ tg-project-menu {
         opacity: 1;
     }
 }
+
+.backlog-sprints-menu {
+    @include font-size(small);
+    animation: slideLeft 200ms ease-in-out both;
+    background: linear-gradient(to right, rgba($black, 1) 0%, rgba($black, .8) 100%);
+    color: $white;
+    display: block;
+    left: 50px;
+    opacity: 1;
+    padding: .4rem 1rem;
+    position: absolute;
+    top: 1rem;
+    transition: all .2s;
+    white-space: nowrap;
+    z-index: 99;
+    a {
+        color: $white;
+        padding: .6rem .8rem;
+        text-align: left;
+        text-transform: none;
+        &:nth-child(2) {
+            padding: 1rem .8rem .6rem;
+        }
+        &:last-child {
+            padding: .6rem .8rem .4rem;
+        }
+        &:hover {
+            background: none;
+        }
+    }
+    &::after {
+        background: rgba($blackish, 1);
+        content: '';
+        height: $label-arrow-wh;
+        left: calc(-#{$label-arrow-wh}/2);
+        position: absolute;
+        top: calc(1rem - #{$label-arrow-wh}/2);
+        transform: rotate(45deg);
+        width: $label-arrow-wh;
+        z-index: 98;
+    }
+}