navbar bootstrap haml

/* HAML */
#navbar
  %nav.navbar.navbar-default.navbar-static-top{ role:"navigation"}
    .container-fluid
      .navbar-header
        %button.navbar-toggle{ type: "button", "data-toggle"=>"collapse", "data-target"=>"#bs-example-navbar-collapse-1" }
          %span.sr-only
            Toggle navigation
          %span.icon-bar
          %span.icon-bar
          %span.icon-bar
        %a.navbar-brand{ href: "#" }
          Innotavtion Time
        = yield :navbar_title
      .collapse.navbar-collapse{ id: "bs-example-navbar-collapse-1" }
        %ul.nav.navbar-nav.navbar-right
          %li.dropdown
            %a.dropdown-toggle{ href: "#", "data-toggle"=>"dropdown"}
              %span.glyphicon.glyphicon-user
              %b.caret
            %ul.dropdown-menu
              - if current_user
                %li
                  = link_to "Log out" , log_out_path
              - else
                %li
                  = link_to "Log in" , new_session_path






/*sass*/
$default-color: #FFFFFF
$navbar-li-hover-color: #333

#navbar
  .navbar-default
    background-color: #5DA6AC
    border-color: #5DA6AC
    .navbar-brand
      color: $default-color
    .navbar-brand:hover
      color: $default-color
    .navbar-brand:focus
      @extend .navbar-brand:hover
    .navbar-nav
      li
        a
          color: #1e1e1e
        a:hover
          color: $navbar-li-hover-color
        a:focus
          color: $navbar-li-hover-color
      .active
        a
          color: #555
          background-color: #E7E7E7
        a:hover
          color: #555
          background-color: #E7E7E7
        a:focus
          color: #555
          background-color: #E7E7E7

  /* mobile version */
  .navbar-default
    .navbar-toggle
      border-color: #67BDC5
    .navbar-toggle:hover
      border-color: #67BDC5
      background-color: #67BDC5
    .navbar-toggle:focus
      background-color: #67BDC5
    .navbar-toggle
      .icon-bar
        background-color: $default-color