Refs #2475: starting adding main nav top menu

5 files changed, 219 insertions, 105 deletions

diff --git a/app/assets/stylesheets/new/_layout.sass b/app/assets/stylesheets/new/_layout.sass
index fb7af276f..4321b6cb4 100644
--- a/app/assets/stylesheets/new/_layout.sass
+++ b/app/assets/stylesheets/new/_layout.sass
@@ -9,7 +9,7 @@ html
     box-sizing: inherit
 
 body
-  padding-top: 65px /* Because main nav is fixed to top */
+  padding-top: 60px
   font-family: $base-font-family
   font-size: $base-font-size
   line-height: $line-height
diff --git a/app/assets/stylesheets/new/components/_main_nav.sass b/app/assets/stylesheets/new/components/_main_nav.sass
index fec2702ea..5a86245f3 100644
--- a/app/assets/stylesheets/new/components/_main_nav.sass
+++ b/app/assets/stylesheets/new/components/_main_nav.sass
@@ -1,5 +1,5 @@
 $menuH: 40px
-$menuW: 310px
+$menuW: 300px
 
 #main_nav
   display: block
@@ -9,9 +9,21 @@ $menuW: 310px
   top: 0
   left: 0
   right: 0
-  z-index: 998
+  z-index: 1040
+
+  .brandname
+    font-size: $h2-size
+    font-weight: 700
+    line-height: $menuH
+    padding-left: 10px
+    opacity: 0.6
+
+  #menu_left
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 1
 
-  .nav-menu
     .openMenu, .closeMenu
       display: inline-block
       width: $menuH
@@ -38,11 +50,6 @@ $menuW: 310px
 
       + .brandname
         display: inline-block
-        font-size: $h2-size
-        font-weight: 700
-        line-height: $menuH
-        padding-left: 10px
-        opacity: 0.6
 
     .menu-content
       display: block
@@ -55,7 +62,7 @@ $menuW: 310px
       top: 0
       left: 0
       bottom: 0
-      z-index: 999
+      z-index: 1050
 
     &.open .menu-content
       margin-left: 0
@@ -185,3 +192,88 @@ $menuW: 310px
 
               > span > .fa:first-child
                 padding-right: 1em
+
+  #menu_top
+    display: block
+    letter-spacing: -0.31em
+    text-rendering: optimizespeed
+    font-weight: 400
+    height: $menuH
+    padding-left: $menuH
+    background-color: $blue
+    color: #fff
+
+    > *
+      display: inline-block
+      letter-spacing: normal
+      word-spacing: normal
+      text-rendering: auto
+      vertical-align: top
+      overflow: hidden
+
+      &.brandname
+        width: 65px
+        padding-right: 10px
+
+      &.menu-content
+        position: relative
+        width: calc(100% - 65px)
+        height: $menuH
+        line-height: $menuH
+        // padding: 0 10px
+
+        &:before
+          content: ''
+          display: block
+          position: absolute
+          height: 14px
+          width: 1px
+          background-color: rgba(#fff, 0.8)
+          left: 0
+          top: 13px
+
+        .menu-item
+          padding: 0 10px
+
+          .fa
+            padding-left: 0.5em
+
+            &:first-child
+              padding-left: 0
+
+        > *, .menu-item
+          display: inline-block
+          color: #fff
+
+        .menu-item-group
+          > .menu-item
+            background-color: rgba(#fff, 0)
+
+            &:hover, &:focus
+              text-decoration: none
+              background-color: rgba(#fff, 0.2)
+
+  // Breadcrumb in nav
+  .breadcrumb
+    padding: 0
+    margin: 0
+    background-color: transparent
+    border-radius: 0
+
+    > li
+      > a
+        color: rgba(#fff, 0.9)
+        transition: 0.2s
+
+        &:hover, &:focus
+          text-decoration: none
+          color: rgba(#fff, 1)
+          transition: 0.2s
+
+      &.active
+        color: #fff
+
+      + li:before
+        content: '\003e'
+        color: #fff
+        padding: 0 0.5em
diff --git a/app/views/layouts/new/_main_nav.html.slim b/app/views/layouts/new/_main_nav.html.slim
index 53671db99..17ecb1dd3 100644
--- a/app/views/layouts/new/_main_nav.html.slim
+++ b/app/views/layouts/new/_main_nav.html.slim
@@ -1,97 +1,6 @@
 nav#main_nav
-  .nav-menu
-    .openMenu title='Ouvrir le menu'
+  // Left menu content
+  = render 'layouts/new/main_nav_left'
 
-    .menu-content
-      .closeMenu title='Fermer le menu'
-      .brandname IBOO
-
-      #menu-items.panel-group
-        .menu-item.panel
-          .list-group
-            a.list-group-item href='#'
-              span Tableau de bord
-
-        .menu-item.panel
-          .panel-heading
-            h4.panel-title
-              = link_to '#miOne', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'true' do
-                |Espace de travail
-
-          #miOne.panel-collapse.collapse.in
-            .list-group
-              a.list-group-item.active href='#'
-                span Jeux de données
-              a.list-group-item href='#'
-                span Importations
-              a.list-group-item href='#'
-                span Modèles de calendrier
-              a.list-group-item href='#'
-                span Jeux de contrôle
-
-        .menu-item.panel
-          .panel-heading
-            h4.panel-title
-              = link_to '#miTwo', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'false' do
-                |Offres
-
-          #miTwo.panel-collapse.collapse
-            .list-group
-              a.list-group-item href='#'
-                span Mon offre courante
-              a.list-group-item href='#'
-                span Liste de mes offres
-
-              .list-group-item.separator
-
-              a.list-group-item href='#'
-                span Offre courante Île-de-France
-              a.list-group-item href='#'
-                span Liste offre Île-de-France
-
-        .menu-item.panel
-          .panel-heading
-            h4.panel-title
-              = link_to '#miThree', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'false' do
-                |Données
-
-          #miThree.panel-collapse.collapse
-            .panel-body
-              em.text-muted
-                = "Sélectionnez un jeu de données pour accéder à plus de fonctionnalités"
-
-        .menu-item.panel
-          .panel-heading
-            h4.panel-title
-              = link_to '#miFour', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'false' do
-                |Synchronisation
-
-          #miFour.panel-collapse.collapse
-            .list-group
-              a.list-group-item href='#'
-                span Synchronisation iCAR
-              a.list-group-item href='#'
-                span Synchronisation iLLICO
-
-      .panel-group
-        .menu-item.panel
-          .list-group
-            a.list-group-item href='#'
-              span
-                span.fa.fa-circle
-                |Portail (POSTIF)
-
-            a.list-group-item href='#'
-              span
-                span.fa.fa-circle
-                |Codifligne (iLLICO)
-
-            a.list-group-item href='#'
-              span
-                span.fa.fa-circle
-                |Reflex (iCAR)
-
-            a.list-group-item href='#'
-              span
-                span.fa.fa-circle
-                |Support
+  // Top menu content
+  = render 'layouts/new/main_nav_top'
diff --git a/app/views/layouts/new/_main_nav_left.html.slim b/app/views/layouts/new/_main_nav_left.html.slim
new file mode 100644
index 000000000..832793247
--- /dev/null
+++ b/app/views/layouts/new/_main_nav_left.html.slim
@@ -0,0 +1,96 @@
+.nav-menu#menu_left
+  .openMenu title='Ouvrir le menu'
+
+  .menu-content
+    .closeMenu title='Fermer le menu'
+    .brandname IBOO
+
+    #menu-items.panel-group
+      .menu-item.panel
+        .list-group
+          = link_to '#', class: 'list-group-item' do
+            span Tableau de bord
+
+      .menu-item.panel
+        .panel-heading
+          h4.panel-title
+            = link_to '#miOne', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'true' do
+              |Espace de travail
+
+        #miOne.panel-collapse.collapse.in
+          .list-group
+            = link_to '#', class: 'list-group-item active' do
+              span Jeux de données
+            = link_to '#', class: 'list-group-item' do
+              span Importations
+            = link_to '#', class: 'list-group-item' do
+              span Modèles de calendrier
+            = link_to '#', class: 'list-group-item' do
+              span Jeux de contrôle
+
+      .menu-item.panel
+        .panel-heading
+          h4.panel-title
+            = link_to '#miTwo', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'false' do
+              |Offres
+
+        #miTwo.panel-collapse.collapse
+          .list-group
+            = link_to '#', class: 'list-group-item' do
+              span Mon offre courante
+            = link_to '#', class: 'list-group-item' do
+              span Liste de mes offres
+
+            .list-group-item.separator
+
+            = link_to '#', class: 'list-group-item' do
+              span Offre courante Île-de-France
+            = link_to '#', class: 'list-group-item' do
+              span Liste offre Île-de-France
+
+      .menu-item.panel
+        .panel-heading
+          h4.panel-title
+            = link_to '#miThree', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'false' do
+              |Données
+
+        #miThree.panel-collapse.collapse
+          .panel-body
+            em.text-muted
+              = "Sélectionnez un jeu de données pour accéder à plus de fonctionnalités"
+
+      .menu-item.panel
+        .panel-heading
+          h4.panel-title
+            = link_to '#miFour', data: { toggle: 'collapse', parent: '#menu-items' }, 'aria-expanded' => 'false' do
+              |Synchronisation
+
+        #miFour.panel-collapse.collapse
+          .list-group
+            = link_to '#', class: 'list-group-item' do
+              span Synchronisation iCAR
+            = link_to '#', class: 'list-group-item' do
+              span Synchronisation iLLICO
+
+    .panel-group
+      .menu-item.panel
+        .list-group
+          = link_to '#', target: '_blank', class: 'list-group-item' do
+            span
+              span.fa.fa-circle
+              |Portail (POSTIF)
+
+          = link_to '#', target: '_blank', class: 'list-group-item' do
+            span
+              span.fa.fa-circle
+              |Codifligne (iLLICO)
+
+          = link_to '#', target: '_blank', class: 'list-group-item' do
+            span
+              span.fa.fa-circle
+              |Reflex (iCAR)
+
+          = link_to '#', target: '_blank', class: 'list-group-item' do
+            span
+              span.fa.fa-circle
+              |Support
diff --git a/app/views/layouts/new/_main_nav_top.html.slim b/app/views/layouts/new/_main_nav_top.html.slim
new file mode 100644
index 000000000..9b8633944
--- /dev/null
+++ b/app/views/layouts/new/_main_nav_top.html.slim
@@ -0,0 +1,17 @@
+.nav-menu#menu_top
+  .brandname IBOO
+
+  .menu-content
+    .menu-item
+      = render 'layouts/new/breadcrumb'
+
+    .menu-item-group.pull-right
+      = link_to '#', class: 'menu-item', title: 'Opérations' do
+        span.fa.fa-lg.fa-tasks
+
+      = link_to '#', class: 'menu-item', title: 'Profil' do
+        span = current_user.username
+        span.fa.fa-lg.fa-user
+
+      = link_to destroy_user_session_path, method: :delete, class: 'menu-item', title: 'Se déconnecter' do
+        span.fa.fa-lg.fa-sign-out