diff --git a/app/partials/search-issues.jade b/app/partials/search-issues.jade index 79c84c90..1b8d34b1 100644 --- a/app/partials/search-issues.jade +++ b/app/partials/search-issues.jade @@ -16,7 +16,7 @@ block content script. setTimeout(function () { document.body.className = 'open-project-nav'; - }, 2000); + }, 1000); setTimeout(function () { document.body.className = 'closed-project-nav'; diff --git a/app/partials/views/modules/project-nav.jade b/app/partials/views/modules/project-nav.jade index d714e4e8..7c5bbe38 100644 --- a/app/partials/views/modules/project-nav.jade +++ b/app/partials/views/modules/project-nav.jade @@ -4,3 +4,20 @@ nav.project-nav fieldset input(type="text" placeholder="Search in...") a.icon.icon-search + + ul.projects-list + li + a(href="") Decathlon + span.icon.icon-arrow-right + + li + a.active(href="") Yump + span.icon.icon-arrow-right + + li + a(href="") Taiga + span.icon.icon-arrow-right + + li + a(href="") Wine and people + span.icon.icon-arrow-right \ No newline at end of file diff --git a/app/styles/modules/project-nav.scss b/app/styles/modules/project-nav.scss index adc81df7..1d7bf2f1 100644 --- a/app/styles/modules/project-nav.scss +++ b/app/styles/modules/project-nav.scss @@ -1,14 +1,58 @@ .project-nav { @include transform(translate3d(-300px, 0, 0)); - background-color: $blackish; + background-color: #232323; height: 100%; left: 0; overflow: hidden; + padding: 2rem 1rem; position: fixed; top: 0; width: 300px; z-index: 99; h1 { color: $white; + margin-bottom: 2rem; + text-align: center; + } + input { + background-color: $gray; + color: $whitish; + } + .icon-search { + position: absolute; + right: 10px; + top: 6px; + } + ul { + margin-top: 1rem; + } +} + +.projects-list { + a { + @extend %large; + color: $whitish; + display: block; + font-family: 'ostrichSans'; + padding: 1rem; + text-transform: uppercase; + width: 100%; + &.active, + &:hover { + @include transition (background-color .3s linear); + background-color: $gray; + .icon { + @include transition (opacity .3s linear); + opacity: 1; + } + } + } + .icon { + color: $whitish; + float: right; + opacity: 0; + } + li { + border-bottom: 2px solid $gray; } }