Refs #912: updating menu-items on side nav

2 files changed, 63 insertions, 15 deletions

diff --git a/app/assets/stylesheets/new/components/_main_nav.sass b/app/assets/stylesheets/new/components/_main_nav.sass
index e7a56e38c..bf849b315 100644
--- a/app/assets/stylesheets/new/components/_main_nav.sass
+++ b/app/assets/stylesheets/new/components/_main_nav.sass
@@ -16,6 +16,7 @@
     text-align: center
     background-color: #fff
     border-right: 1px solid darken(#fafafa, 10%)
+    cursor: pointer
 
   .nav-right
     padding: 0
@@ -33,9 +34,11 @@
         height: 50px
 
 #main_nav .nav-menu
+  padding: 0
+
   .toggleMenu
     display: inline-block
-    cursor: pointer
+    padding: 15px
     transform: rotate(0deg)
     transition: 0.3s
     font: normal normal normal 14px/1 FontAwesome
@@ -65,11 +68,7 @@
 
     > li > a
       display: block
-      padding: 15px
-      border-top: 1px solid darken(#fafafa, 10%)
-
-    > li:first-child > a
-      border-top: none
+      border-bottom: 1px solid darken(#fafafa, 10%)
 
   &.open
     .toggleMenu
@@ -77,3 +76,33 @@
 
     .menu-content
       margin-left: 0
+
+  // Details of menu-content list items
+  .menu-content
+    .brand
+      padding: 15px
+      border-bottom: 1px solid darken(#fafafa, 10%)
+
+      .brandname
+        font-size: 1.5em
+
+    .mc-item
+      .mci-icon
+        display: inline-block
+        vertical-align: middle
+        padding: 15px
+        width: 50px
+
+      .mci-desc
+        display: inline-block
+        vertical-align: middle
+        padding: 15px
+        width: calc(100% - 50px)
+        border-left: 1px solid darken(#fafafa, 10%)
+
+        h4
+          margin: 0
+
+          + *
+            display: inline-block
+            margin-top: 0.5em
diff --git a/app/views/layouts/new/_main_nav.html.slim b/app/views/layouts/new/_main_nav.html.slim
index 04541754e..9b4cbfb2b 100644
--- a/app/views/layouts/new/_main_nav.html.slim
+++ b/app/views/layouts/new/_main_nav.html.slim
@@ -3,26 +3,45 @@ nav#main_nav
     span.toggleMenu title='Toggle menu'
 
     ul.menu-content
+      li.brand
+        span.brandname Stif BOIV
+      
       li
-        = link_to '#' do
-          span.fa.fa-lg.fa-paw
-          = " Le premier lien"
+        = link_to '#', class: 'mc-item' do
+          span.mci-icon
+            span.fa.fa-lg.fa-paw
+          span.mci-desc
+            h4 = "Espace de données"
+            em.small
+              = "Accès à mes offres de transport"
+              br
+              = "Détail des opérations en cours"
       li
-        = link_to '#' do
-          span.fa.fa-lg.fa-paw
-          = " Le deuxième lien"
+        = link_to '#', class: 'mc-item' do
+          span.mci-icon
+            span.fa.fa-lg.fa-paw
+          span.mci-desc
+            h4 = "Organisation"
+            em.small = "Consulter mon profil et la liste des membres de mon organisation"
+            
+      li
+        = link_to '#', class: 'mc-item' do
+          span.mci-icon
+            span.fa.fa-lg.fa-paw
+          span.mci-desc
+            h4 = "Portail"
 
   div
     |Breadcrumb to go
 
   ul.nav-right
     li
-      = link_to '#' do
+      = link_to '#', title: 'Mon compte' do
         span.fa.fa-lg.fa-user
 
     li
-      = link_to '#' do
+      = link_to '#', title: 'Rechercher' do
         span.fa.fa-lg.fa-search
     li
-      = link_to '#' do
+      = link_to '#', title: 'Notifications' do
         span.fa.fa-lg.fa-bell-o