Navegação

É utilizado o plugin: https://github.com/andi/simple-navigation

A navegação é definida por:

1. Navegação local
2. Aba
3. Sub aba

Como utilizar

Deve ser criado um arquivo de navegação (em config/navigations), onde vão ficar todas as informações relativas a navegação toda. Este arquivo deve seguir o padrão {controlador}_navigation.rb. Caso a navegação seja mais específica como a do painel administrativo de Ambiente, deve seguir o padrão {controlador}_{nome para especificar}_navigation.rb.

Exemplo de arquivo de navegação: config/navigations/users_navigation.rb:

  # (...)
  navigation.items do |primary|
      # Classe da ul da navegação local
      primary.dom_class = 'local-nav'
      # (...)
      # Primeira navegação: navegação local
      # Símbolo requisitado pelo plugin, nome do link que aparecerá na navegação local
      primary.item :configurations, 'Configurações',
      # URL para a qual o link levará
      edit_user_path(current_user),
      # Classe que será adicionada ao link
      :link => { :class => 'icon-manage_16_18-before' } do |config_nav|
      # Segunda navegação: Abas
      # Classe da ul das abas
      config_nav.dom_class = 'clearfix ui-tabs-nav'
      config_nav.item :edit, 'Perfil', edit_user_path(@user),
        # Utilizado para indicar quando esta aba deverá ficar selecionada, quando a navegação precisa ficar selecionada 
        # em URLs além da URL especificada para o link
        :highlights_on => update_action_matcher('users'),
        # Classe do li da navegação
        :class => 'ui-state-default',
        :link => { :class => "icon-profile_16_18-before"} do |edit_nav|
        # Terceira navegação: Sub abas
        edit_nav.dom_class = 'clearfix ui-tabs-nav'
        edit_nav.item :biography, "Biografia", edit_user_path(@user),
          :highlights_on => update_action_matcher('users'),
          :class => 'ui-state-default',
          :link => { :class => 'icon-bio_16_18-before' }
        edit_nav.item :curriculum, "Currículo", curriculum_user_path(@user),
          :class => 'ui-state-default',
          :link => { :class => 'icon-cv_16_18-before' }
        end
   # (...)

O primeiro nível é o navegação local, o segundo são as abas e o terceiro são as sub abas. Os detalhes para utilizar a navegação pode ser visto na https://github.com/andi/simple-navigation/wiki/Configuration.

Caso um dos níveis não seja utilizado em determinada tela, o bloco deve ser utilizado na navegação para manter o padrão. Por exemplo:

    # (...)
    # A navegação de Environment não possui sidebar, bloco apenas para
    # manter o padrão
    primary.item :sidebar, 'Sidebar', home_path do |tabs|
      tabs.dom_class = 'clearfix ui-tabs-nav'
      tabs.item :courses, 'Cursos', environment_path(@environment),
        :highlights_on => action_matcher({'environments' => ['show', 'preview']}),
        :class => 'ui-state-default',
        :link => { :class => "icon-course-gray_32_34-before" }
      tabs.item :account, 'Membros', environment_users_path(@environment),
        :class => 'ui-state-default',
        :link => { :class => "icon-members-gray_32_34-before" } do |users_nav|
      # (...)

Tabs com detalhes

Para utilizar detalhes na aba (tabs), basta adicionar o hash :details ao item da navegação, por exemplo:

      # (...)
      config_nav.item :plans, 'Planos', user_plans_path(@user),
        :highlights_on => action_matcher(['plans', 'invoices'], 'index'),
        :class => 'ui-state-default',
        :link => { :class => 'icon-plans_16_18-before'},
        :details => { :text => 'detalhes', :class => "details",
          :if => action_matcher({'invoices' =>  ['index']}) }
      # (...)

O hash details:

• deve ter uma chave :text que contém o texto que será mostrado no detalhe da aba;
• pode ter uma chave :class para ser adicionada a div do details. Para seguir o layout atual, a classe "details" deve ser adicionada;
• pode ter uma chave :if passando um Proc que será utilizado para saber quando o detalhe deve ser mostrado.

Action Matcher

Com o intuito de casar padrão com outros actions poderá ser utilizado o método action_matcher(...) que receberá como parâmetro um hash de controladores e suas respectivas views, exemplo:

action_matcher({'environments' => ['show', 'preview']})

Renderizando

Para renderizar a navegação, basta utilizar um dos seguintes helpers:

• local_nav(contexto)
• tabs(contexto, bloco)
• subtabs(contexto, bloco)

Eles recebem como argumento o contexto, ou seja, o nome da navegação.

Exemplo de uso:

Para renderizar as abas da navegação do painel administrativo de Ambiente, o arquivo de navegação é environments_admin_navigation.rb, a chamada será:

<%= tabs :environments_admin do %>
   <%# (...) %>
<% end %>

Obs.: O helper local_nav não recebe um bloco, já que ele é responsável apenas pelos links da navegação local.