import prototype from challenge results, bare minimum fixes

Author: thabofletcher

app/index.jade

@@ -67,17 +67,14 @@ html
     //- endinject
     // endbuild
 
-  body(ng-app="topcoder", ng-controller="TopcoderController as main", ng-class="{'ui-refresh': $state.current.data.UIRefresh}", ng-strict-di)
+  body(ng-app="topcoder", ng-controller="TopcoderController as main", ng-class="{'ui-refresh': $state.current.data.UIRefresh, 'menu-visible': main.menuVisible}", ng-strict-di)
 
     //- include ./layout/header/header.jade
     #header(ui-view="header")
 
     notifications-bar.notifications(closeIcon="fa fa-times-circle")
 
-    //- include ./layout/header/sidebar.jade
-    div(ui-view="sidebar")
-
-    .view-container(ng-class="{slided: main.sidebarActive}")
+    .view-container
       div(ui-view="container")
 
     //- include ./layout/footer/footer.jade

app/layout/header/header.jade

@@ -1,46 +1,77 @@
-header.topcoder-header(ng-class="{slided: main.sidebarActive}")
-  .container
-    a(id="topcoder-logo", ng-href="https://www.{{vm.domain}}", title="topcoder")
-      img(src="/images/logo.png", alt="Topcoder Logo")
-
-    nav.top-right
-      ul
-        li.login(ng-hide="vm.isAuth") #[a(ui-sref="login") Log In]
-
-        li.logout(ng-show="vm.isAuth") #[a(ng-click="vm.logout()") Log Out]
-
-        li.contact #[a(href="#") Contact]
-
-        li.help #[a(href="#") Help]
-
-        li.search #[a(href="#") #[i#search] Search]
-
-        li.my-account(ng-show="vm.isAuth") #[a(ng-click="vm.isActive = !vm.isActive", slide-toggle="#user-widget") My Account]
-
-        li.signup(ng-hide="vm.isAuth") #[a(ui-sref="register") Sign Up]
-
-    button.bars(type="button", ng-click="main.sidebarActive = !main.sidebarActive")
-      span.icon-bar
-      span.icon-bar
-      span.icon-bar
-
-    nav.bottom
-      ul
-        li #[a(ng-href="https://www.{{vm.domain}}/challenges/") Challenges]
-
-        li #[a(ng-href="https://www.{{vm.domain}}/community/") Community]
-
-        li #[a(ng-href="https://www.{{vm.domain}}/about/") About]
-
-        li #[a.blog(ng-href="https://www.{{vm.domain}}/blog/") Blog]
-
-    a#signup(ng-hide="vm.isAuth", ui-sref="register") Sign Up
-    a#my-account(ng-show="vm.isAuth", ng-click="vm.isActive = !vm.isActive", ng-init="vm.isActive = false", slide-toggle="#user-widget") My Account
-      i(ng-class="{'active': isActive}")
-
-    div#user-widget.slideable
-      div#user-widget-content(style="visibility: hidden;")
-        .action
-          a.profileLink(ui-sref="profile.about({userHandle:vm.userHandle})") Profile
-          a(ui-sref="dashboard") My Dashboard
-          a.linkAlt(href='//community.topcoder.com/tc?module=MyHome') Account Settings
+// Header container
+.header-wrapper(ng-class="{'autocomplete': main.searchTerm.length > 0}")
+  // Main header element
+  header.top-header
+    // Header content visible on small screens
+    .show-small.mobile-heading
+      span.tc-text-logo(ng-if="main.menuVisible") [ topcoder ]
+      button.btn-open-menu(type="button", ng-if="!main.menuVisible", ng-click="main.menuVisible = true") Menu
+      button.btn-close-menu(type="button", ng-if="main.menuVisible", ng-click="main.menuVisible = false")
+      // User link (profile or join)
+      a(href="javascript:;", ng-switch="main.loggedIn" class="user-link" data-ng-if="!main.menuVisible")
+        img(ng-switch-when="true", src="/images/sample-avatar.png", class="user-avatar") 
+        span(ng-switch-when="false" class="btn-link") JOIN
+        
+    // main menu 
+    ul.main-menu
+      // search container
+      li.menu-item.search-wrapper
+        .menu-item-header.show-large #[button.btn-expand-search.search-icon(type="button")]
+        .submenu
+          input(type="text" placeholder="find people or competitions" ng-model="main.searchTerm")
+          // Suggestion list container
+          ul.suggestion-list(ng-if="main.searchTerm.length > 0")
+            li(ng-repeat="suggestion in main.suggestions | filter:main.searchTerm | limitTo:5") 
+              a(href="javascript:;" class="menu-link") {{suggestion}}
+          
+      // user menu
+      li.menu-item.link-group.user-menu(ng-switch="main.loggedIn", ng-class="{'anonymous-menu': !main.loggedIn}")
+        // links for logged in user
+        div(ng-switch-when="true")
+          .menu-item-header
+            img(src="/images/sample-avatar.png", class="user-avatar") 
+            span.username Victor G.
+          a.btn-link.btn-edit-profile.show-small(href="javascript:;") EDIT
+          ul.submenu
+            li.submenu-item #[a.menu-link(href="javascript:;") DASHBOARD]
+            li.submenu-item #[a.menu-link(href="javascript:;") MY PROFILE]
+            li.submenu-item #[a.menu-link(href="javascript:;") SETTINGS]
+            li.submenu-item #[a.menu-link(href="javascript:;", ng-click="main.menuVisible = main.loggedIn = false") LOG OUT]
+        // links for anonymous user
+        .menu-item-header(ng-switch-when="false")
+          a.btn-link(href="javascript:;") REGISTER
+          a.btn-link.secondary-link(href="javascript:;", ng-click="main.menuVisible = false; main.loggedIn = true") LOG IN
+          
+      // 'COMPETE' link group
+      li.menu-item.link-group
+        .menu-item-header COMPETE
+        ul.submenu
+          li.submenu-item #[a.menu-link(href="javascript:;") START HERE]
+          li.submenu-item #[a.menu-link(href="javascript:;") DESIGN CHALLANGES]
+          li.submenu-item #[a.menu-link(href="javascript:;") DEVELOPMENT CHALLANGES]
+          li.submenu-item #[a.menu-link(href="javascript:;") DATA SCIENCE CHALLANGES]
+          li.submenu-item #[a.menu-link(href="javascript:;") SINGLE ROUND MATCHES]
+            
+      // 'LEARN' link group
+      li.menu-item.link-group
+        .menu-item-header LEARN
+        ul.submenu
+          li.submenu-item #[a.menu-link(href="javascript:;") START HERE]
+          li.submenu-item #[a.menu-link(href="javascript:;") DESIGN]
+          li.submenu-item #[a.menu-link(href="javascript:;").active DEVELOPMENT]
+          li.submenu-item #[a.menu-link(href="javascript:;") DATA SCIENCE]
+          li.submenu-item #[a.menu-link(href="javascript:;") SINGLE ROUND MATCHES]
+          li.submenu-item #[a.menu-link(href="javascript:;") TUTORIALS]
+          li.submenu-item #[a.menu-link(href="javascript:;") EDITORIALS]
+          
+      // 'COMMUNITY' link group
+      li.menu-item.link-group
+        .menu-item-header COMMUNITY
+        ul.submenu
+          li.submenu-item #[a.menu-link(href="javascript:;") HOME]
+          li.submenu-item #[a.menu-link(href="javascript:;") MEMBERS]
+          li.submenu-item #[a.menu-link(href="javascript:;") PROGRAMS]
+          li.submenu-item #[a.menu-link(href="javascript:;") FORUMS]
+          li.submenu-item #[a.menu-link(href="javascript:;") STATISTICS]
+          li.submenu-item #[a.menu-link(href="javascript:;") EVENTS]
+          li.submenu-item #[a.menu-link(href="javascript:;") BLOG]

app/layout/header/sidebar.jade

@@ -7,6 +7,8 @@
 
   function TopcoderController(NotificationService, $rootScope, CONSTANTS) {
     var vm = this;
+    vm.menuVisible = false;
+    vm.loggedIn = false;
     // set some $rootScope constants here
     $rootScope.DOMAIN = CONSTANTS.domain;
 

app/topcoder.controller.js

@@ -50,10 +50,6 @@
             controller: 'HeaderController',
             controllerAs: 'vm'
           },
-          'sidebar@': {
-            // TODO revisit to see how the layout works
-            templateUrl: 'layout/header/sidebar.html',
-          },
           'container@': {
             template: "<div ui-view>Main container, add your stuff here</div>"
           },

app/topcoder.routes.js

@@ -15,11 +15,6 @@ body {
   @include source-sans;
 }
 
-#header {
-  display: flex;
-  justify-content: center;
-}
-
 .notifications {
   .notifications-container {
     position: static;
@@ -57,36 +52,6 @@ body {
   }
 }
 
-// Transits the header, content and footer on sidebar visibility
-.view-container,
-header,
-footer {
-  transition-duration: 0.3s;
-  -moz-transition-duration: 0.3s;
-  -webkit-transition: -webkit-transform .3s ease-in-out;
-  -ms-transition: transform .3s ease-in-out;
-  transition: transform .3s ease-in-out;
-  z-index: 1000;
-}
-
-.slided {
-  @media only screen and (max-width: 1020px) {
-    -moz-transform: transform3d(-82%,0,0);
-    -ms-transform: translateX(-82%);
-    -ms-transform: transform3d(-82%,0,0);
-    -webkit-transform: translate3d(-82%, 0px, 0px);
-    transform: translate3d(-82%, 0px, 0px);
-    margin-right: 0px;
-    margin-left: 0px;
-  }
-}
-
-// Stops scrolling when sidebar is visible
-.stop-scrolling {
-  height: 100%;
-  overflow: hidden;
-}
-
 // Styles for elements used across modules
 button {
   cursor: pointer;