ui migration to Sophie Design

src/menu.pug

 nav#navbar
   sib-router#navbar-router(default-route='members')
-    sib-route(name='members')
+    sib-route.menu(name='members')
       div.menu-notification
         div 1
       div.menu-label Members
       div.menu-icon.icon-people
-    sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
-    sib-route(name='job-offers')
+    sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
+    sib-route.menu(name='job-offers')
       div.menu-notification
         div 2
       div.menu-label Job offers
       div.menu-icon.icon-briefcase
     sib-route(hidden, name='job-offer-create')
     div
-      div.menu-notification
-      div.menu-label Projects
-      div.menu-icon.icon-folder-alt
+      div.menu
+        div.menu-notification
+        div.menu-label Projects
+        div.menu-icon.icon-folder-alt
+      sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
       sib-display(
         data-src=`${sdn}/projects/`,
         data-fields='name',
         next='project'
       )
-      sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
     div
-      div.menu-notification
-      div.menu-label Groups
-      div.menu-icon.icon-bubbles
+      div.menu
+        div.menu-notification
+        div.menu-label Groups
+        div.menu-icon.icon-bubbles
+      sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
       sib-display(
         data-src=`${sdn}/channels/`,
         data-fields='name',
         next='group'
       )
-      sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)

src/styles/menu.scss

@@ -40,7 +40,7 @@ sib-router {
   display: flex;
   flex-direction: column;
 
-  > * {
+  .menu {
     display: flex;
     flex-direction: row-reverse;
     padding: 1em;