# Navbar-Highlighter

Navbar highlighter provides an easier way to activate link based on controller and action used by rails.

Usecase: You want to activate certain links when user is hits static controller's index action. you just need to add data-controller='controller_name' and data-action='action_name' in order to add specified class to it when user hits this controller's action.

Usage

Add navbar_highlighter to Gemfile and bundle install

gem 'navbar_highlighter'

Add the following to your app/assets/javascripts/application.js:

//= require navbar_highlighter

Now, Initialize navbar highlighter using following code, this can be done in a separate js file. for example: navbar_highlighter_init.js

If you are doing so, don't forget to add it to asset.rb like so: Rails.application.config.assets.precompile += %w( navbar_highlighter_init.js )

(function(){
  var data = {
    // navbar you want to use.
    navBar: $('[data-navbar=highlight]'),

    // navbar links class selector
    linkSelectorClass: 'primary-link',

    // name of the class you want to add to activate a link
    classNameToAdd: 'active-link'
  },

  linkHighlighter = new NavbarHighlighter(data);
  linkHighlighter.init();

})();

Add<%= navbar_highlighter_tags %> to any layout that you are using.

---

Add data-controller='controller-name' and data-action='action-name' to the links you want to add class based on controller and action.

---

Add data-navbar='highlight' to navbar just like below snippet:

<nav data-navbar="highlight">
  <ul class="primary-nav-list">
    <li class="primary-menu">
      <a href="/" class="primary-link" data-controller="sessions" data-action="index">
        Home
      </a>
    </li>

    <li class="primary-menu">
      <a href="/users" class="primary-link" data-controller="users" data-action="index" data-parent='sessions'>
      <!-- Adding data-parent='controller_name' will add active-link class to parent link i.e Home link in this case. -->
      Users
      </a>
    </li>
    <ul>
</nav>

Note:

As user hits sessions_controller index action Home link will be active, and when user clicks Users link Users link will be get active-link class.

New feature

Adding a data-parent='controller_name' to link will add class to parent link as well as the child link.

Different un-related links can be highlighted using data-highlight-on=<%= current_url %>. This can be useful when you want to highlight links based on current url.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/abhikanojia/navbar_highlighter. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.

Code of Conduct

Everyone interacting in the NavbarHighlighter project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.