refactor main-navigation to menu

app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee

@@ -30,7 +30,7 @@ class App.FirstStepsClues extends App.Controller
       ]
     }
     {
-      container: '.main-navigation .overviews'
+      container: '.js-overviewsMenuItem'
       headline: 'Overviews'
       text: 'Here you find your ticket overviews for open, my assigned or escalated tickets.'
       #headline: 'Übersichten'
@@ -40,7 +40,7 @@ class App.FirstStepsClues extends App.Controller
       ]
     }
     {
-      container: '.main-navigation .dashboard'
+      container: '.js-dashboardMenuItem'
       headline: 'Dashboard'
       text: 'Here you see a quick overview about your and other agents performance.'
       #headline: 'Dashboard'

app/assets/javascripts/app/controllers/layout_ref.coffee

@@ -1020,7 +1020,7 @@ class CluesRef extends App.ControllerContent
       ]
     }
     {
-      container: '.main-navigation .overviews'
+      container: '.js-overviewsMenuItem'
       headline: 'Übersichten'
       text: 'Hier findest du eine Liste aller Tickets.'
       actions: [
@@ -1028,7 +1028,7 @@ class CluesRef extends App.ControllerContent
       ]
     }
     {
-      container: '.main-navigation .dashboard'
+      container: '.js-dashboardMenuItem'
       headline: 'Dashboard'
       text: 'Hier siehst du auf einem Blick ob sich alle Agenten an die Spielregeln halten.'
       actions: [

app/assets/javascripts/app/controllers/navigation.coffee

@@ -52,11 +52,11 @@ class App.Navigation extends App.ControllerWidgetPermanent
 
     # get active tabs to reactivate on rerender
     active_tab = {}
-    @$('.active').children('a').each( (i,d) ->
+    @$('.is-active').each( (i,d) ->
       href = $(d).attr('href')
       active_tab[href] = true
     )
-    @$('.main-navigation').html App.view('navigation/menu')(
+    @$('.js-menu').html App.view('navigation/menu')(
       items:      items
       open_tab:   open_tab
       active_tab: active_tab
@@ -353,8 +353,8 @@ class App.Navigation extends App.ControllerWidgetPermanent
         @addPrioCount newlist, item
 
   update: (url) =>
-    @$('li').removeClass('active')
-    @$("[href=\"#{url}\"]").parents('li').addClass('active')
+    @$('.is-active').removeClass('is-active')
+    @$("[href=\"#{url}\"]").addClass('is-active')
 
   recentViewNavbarItemsRebuild: =>
 

app/assets/javascripts/app/views/navigation.jst.eco

@@ -13,7 +13,7 @@
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 
-<ul class="main-navigation"></ul>
+<div class="menu js-menu"></div>
 
 <div class="tasks tasks-navigation"></div>
 

app/assets/javascripts/app/views/navigation/menu.jst.eco

@@ -1,9 +1,8 @@
 <% for item in @items: %>
   <% if item.child: %>
-  <li class="dropdown <% if @open_tab[item.target] : %>open<% end %>">
-    <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
-        <%- @Icon(item.class, 'nav-icon') %>
-        <span class="nav-item-name flex">
+    <a href="<%= item.target %>" class="dropdown-toggle dropdown<%- ' open' if @open_tab[item.target] %>" data-toggle="dropdown">
+        <%- @Icon(item.class, 'menu-item-icon') %>
+        <span class="menu-item-name flex">
           <%- @T(item.name) %>
         </span>
         <%- @Icon('arrow-down', 'dropdown-icon') %>
@@ -21,22 +20,20 @@
     </ul>
   </li>
   <% else: %>
-    <li<% ' class="active"' if @active_tab[item.target] %>>
-      <a class="horizontal center" href="<%= item.target %>">
-        <%- @Icon(item.class, 'nav-icon') %>
-        <span class="nav-item-name">
+    <a class="menu-item js-<%- item.class %>MenuItem<%- ' is-active' if @active_tab[item.target] %>" href="<%= item.target %>">
+      <%- @Icon(item.class, 'menu-item-icon') %>
+      <span class="menu-item-name">
         <%- @T(item.name) %>
       </span>
       <% if item.counter: %>
       <span class="counter badge badge--big"></span>
       <% end %>
       <% if item.switch: %>
-        <div class="zammad-switch zammad-switch--dark zammad-switch--small">
+      <span class="zammad-switch zammad-switch--dark zammad-switch--small">
          <input type="checkbox" id="<%- item.class %>-switch">
          <label for="<%- item.class %>-switch"></label>
-        </div>
+      </span>
       <% end %>
     </a>
-    </li>
   <% end %>
 <% end %>