#desenvolvimento

ActiveAdmin – Customização do menu


Olá pessoal.

Após um longo hiato sem posts resolvi escrever sobre como fazer um menu customizado utilizando ActiveAdmin.

Pra quem não conhece o ActiveAdmin é um framework que pode ser utilizado para administração de projetos feitos com Ruby on Rails, facilitando ainda mais o desenvolvimento.

Mas como nada é perfeito, o ActiveAdmin tem uma limitação de apenas dois níveis no menu superior. Só que eu precisava de um menu com três níveis.

Eu abri uma questão no StackOverflow mas até o momento sem nenhuma resposta que torne essa customização mais fácil. Eu pesquisei um bocado e fui juntando um pouco de tudo pra poder fazer o que precisava.

Entretanto deixo os comentários abertos caso alguém tenha encontrado uma forma mais simples e mais bonita 😉

Então vamos ao código!!!

A primeira coisa que precisamos fazer é informar ao ActiveAdmin que iremos utilizar um cabeçalho próprio. Para isto acrescente as linhas abaixo no arquivo config/initializers/active_admin.rb:

ActiveAdmin.setup do |config|
  ...
  # Define a classe que irá construir o menu.
  config.view_factory.header = CustomAdminHeader

  # Define o arquivo de CSS que será utilizado no menu.
  config.register_stylesheet 'novo_menu.css'
  ...
end

Agora precisamos criar nossa classe CustomAdminHeader que conterá o código que irá sobrescrever a construção do menu. Você pode criar esta classe dentro da pasta app/admin e nomear o arquivo como custom_admin_header.rb. No arquivo criado, adicione o código abaixo:

# encoding: UTF-8

class CustomAdminHeader < ActiveAdmin::Views::Header
  include Rails.application.routes.url_helpers

  def build(namespace, menu)
    div :id => 'tabs' do
      # Adiciona um item de menu sem filhos.
      ul do
        # Substitua rota_destino_path para a rota que deseja seguir quando o item receber o clique.
        li { link_to 'Item sem filhos', rota_destino_path }
      end

      # Adiciona um item de menu com 1 filho.
      ul do
        li do
          text_node link_to("Pai com 1 filho", "#")
          ul do
            li { link_to 'Filho sem filhos', rota_destino_path }
            # Caso queira adicionar mais filhos, inclua mais LIs aqui.
          end
        end
      end

      # Adiciona um item de menu com 1 filho e 1 neto.
      ul do
        li do
          text_node link_to("Avó com 1 filho", "#")
          ul do
            li do
              text_node link_to("Pai com 1 filho", rota_destino_path)
              ul do
                li { link_to 'Neto sem filhos', rota_destino_path }
                # Caso queira adicionar mais netos, inclua mais LIs aqui.
              end
            end
          end
        end
      end

    # Chama o método construtor da classe pai para colocá-lo todos juntos.
    super(namespace, menu)
  end
end

Quase lá. A estrutura do seu menu será criada por esta classe por isso as definições de menu utilizadas nas classes contidas na pasta app/admin não devem ser exibidas. Para isto você precisa adicionar o código a seguir em todas as classes:

ActiveAdmin.register SuaClasse do
  menu false
end

Por fim deixo o código CSS que utilizei para customizar o menu de forma que mantivesse o layout do menu parecido com o menu original. Você pode chamar o arquivo CSS de novo_menu.css (conforme adicionamos nas configurações do ActiveAdmin) e salvá-lo na pasta app/assets/stylesheets.

.site_title {
  position: absolute;
  left: 20px;
  top: 10px;
  font-size: 1.5em !important;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#tabs {
  font-size: 1.0em;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  padding-left: 80px;
  background: #6a7176;
  background: -webkit-gradient(linear, left top, left bottom, from(#6a7176), to(#4d5256));
  background: -moz-linear-gradient(-90deg, #6a7176, #4d5256);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a7176', endColorstr='#4d5256');
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a7176', endColorstr='#4d5256');
}

#tabs ul {
  margin:0;
  padding:0;
  list-style:none;
}

#tabs ul li {
  float:left;
}

#tabs ul li a {
  float: left;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
  text-decoration:none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#tabs li ul {
  background: #7b8389;
  border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  box-shadow: 0 1px 3px #444444;
  -moz-box-shadow: 0 1px 3px #444444;
  -webkit-box-shadow: 0 1px 3px #444444;
  left: -999em;
  margin: 25px 0 0;
  position: absolute;
  width: 200px;
  z-index: 1010;
}

#tabs li ul a {
  background: none;
  border: 0 none;
  margin-right: 0;
  width: 160px;
  padding-top: 3px;
  padding-bottom: 3px;
}

#tabs ul li a:hover,
#tabs ul li:hover > a {
  color: #fff;
  background: #7b8389;;
}

#tabs li ul a:hover,
#tabs ul li li:hover > a  {
  color: #fff;
  background: #7b8389;;
}

#tabs li:hover ul {
  left: auto;
}

#tabs li li ul {
  margin: 0px 0 0 200px;
  visibility:hidden;
}

#tabs li li:hover ul {
  visibility:visible;
}

Bom, é isso! Espero que possa ser útil.

Até breve 😉

Anúncios
Padrão