Toolbars

new N2Styles.searchBar({safeContainer: '.js-search-1'})
%nav.navbar.n2-navbar.blue.js-search-1
  %i.material-icons.menu-action menu
  .heading.col.hidden-xs-down Toolbar
  .col
  .col-lg-6
    = form_tag "/toolbar", class: "d-flex n2-search-bar blue hidden input-dark-bg darken-1", method: :get do
      %button.d-flex.p-0.btn-flat.with-icon.cursor-pointer{ type: :submit }
        %i.material-icons.white-text search
      = text_field_tag :search, nil, placeholder: "Search", autofocus: true, required: true, class: "form-control"
      %i.material-icons.hidden.empty-search-input close
  %i.material-icons.show-search-input search
  = image_tag "avatar.jpg", class: "avatar circle"

new N2Styles.searchBar({safeContainer: '.js-search-2'})
%nav.navbar.n2-navbar.brown.js-search-2
  %i.material-icons.menu-action menu

  .heading.col.hidden-xs-down Toolbar
  .col
  .col-lg-6
    = form_tag "/toolbar", class: "d-flex n2-search-bar brown hidden input-dark-bg darken-1", method: :get do
      %button.d-flex.p-0.btn-flat.with-icon.cursor-pointer{ type: :submit }
        %i.material-icons.white-text search
      = text_field_tag :search, nil, placeholder: "Search", class: "box-shadow-0",
          autofocus: true, required: true, class: "form-control"
      %i.material-icons.hidden.empty-search-input close

  %i.material-icons.show-search-input search
  = image_tag "avatar.jpg", class: "avatar circle"

new N2Styles.searchBar({safeContainer: '.js-search-3', visible: true})
%nav.navbar.n2-navbar.blue.js-search-3
  %i.material-icons.menu-action menu

  .heading Toolbar
  .col
  = form_tag "/toolbar", class: "d-flex n2-search-bar hidden blue input-dark-bg darken-1", method: :get do
    %button.d-flex.p-0.btn-flat.with-icon.cursor-pointer{ type: :submit }
      %i.material-icons.white-text search
    = text_field_tag :search, nil, placeholder: "Search", required: true, class: "form-control"
    %i.material-icons.hidden.empty-search-input close

  %i.material-icons.show-search-input search
  = image_tag "avatar.jpg", class: "avatar circle"
%nav.navbar.n2-navbar.blue
  .tabs-wrapper
    %ul.nav.classic-tabs.tabs-blue{ role: :tablist }
      %li.nav-item
        = link_to "Tab One", "#pane1", class: "nav-link waves-light active", data: { toggle: "tab" }, role: :tab
      %li.nav-item
        = link_to "Tab Two", "#pane2", class: "nav-link waves-light", data: { toggle: "tab" }, role: :tab
      %li.nav-item
        = link_to "Tab Three", "#pane3", class: "nav-link waves-light", data: { toggle: "tab" }, role: :tab
      %li.nav-item
        = link_to "Tab Four", "#pane4", class: "nav-link waves-light", data: { toggle: "tab" }, role: :tab

-# actionable_toolbar also takes an optional color arg as a string to use as the toolbar background
-# ex: actionable_toolbar(color: :red) {}
= actionable_toolbar do
  = link_to(material_icon.shape(:favorite), forms_path, class: "black-text")
  = link_to(material_icon.shape(:delete), forms_path, class: "black-text")
  = link_to(material_icon.shape(:search), forms_path, class: "black-text")