notebook/app/views/layouts/_document_navbar.html.erb

<div class="navbar-fixed">
  <nav class="navbar nav-extended <%= 'logged-in' if user_signed_in? %>" style="background-color: <%= @navbar_color.presence || '#2196F3' %>">
    <div class="nav-wrapper">
      <ul>
        <li class="left">
          <a class="sidenav-trigger show-on-large left" href="#" data-target="sidenav-left">
            <i class="material-icons">menu</i>
          </a>
        </li>
        <li class="left">
          <%=
            link_to documents_path, class: 'tooltipped', data: {
              position: 'bottom',
              tooltip: 'Back to your documents'
            } do
          %>
            <i class="material-icons white-text">file_copy</i>
          <% end %>
        </li>
        <li class="left">
          <%=
            link_to new_document_path, class: 'tooltipped', data: {
              position: 'bottom',
              tooltip: 'New document'
            },
            target: '_blank' do
          %>
            <i class="material-icons white-text left">note_add</i>
          <% end %>
        </li>

        <ul id="about-this-document-dropdown" class="dropdown-content">
          <li style="padding: 0 20px" class="<%= Document.color %> lighten-5">
            <h5>
              About this document
            </h5>
            <p>
              Created <%= time_ago_in_words @document.created_at %> ago
            </p>
            <p class="clearfix">
              Last edited <%= time_ago_in_words @document.updated_at %> ago
            </p>
            <p class="clearfix"></p>
          </li>
          <li class="<%= Document.color %> lighten-5">
            <%= link_to @document.user, class: User.color + '-text' do %>
              <i class="material-icons left"><%= User.icon %></i>
              <span class="black-text">Written by</span>
              <%= @document.user.name %>
            <% end %>
          </li>
          <li class="<%= Document.color %> lighten-5">
            <%= link_to '#universe-picker-modal', class: Universe.color + '-text modal-trigger' do %>
              <i class="material-icons left"><%= Universe.icon %></i>
              <span class="black-text">Set in</span>
              <span class="js-content-universe-name">
                <%= @document.universe_id.nil? ? 'No Universe Set' : @document.universe.name %>
              </span>
            <% end %>
          </li>
          <li class="divider"></li>
          <li>
            <%= link_to @document, target: '_blank' do %>
              <i class="material-icons left <%= Document.color %>-text"><%= Document.icon %></i>
              View formatted document
            <% end %>
          </li>
          <li>
            <%= link_to analysis_document_path(@document) do %>
              <i class="material-icons left orange-text">bar_chart</i>
              Analyze this document
            <% end %>
          </li>
          <li>
            <%= link_to '#', class: 'modal-trigger', data: { target: 'document-notes-modal' } do %>
              <i class="material-icons left <%= Document.color %>-text">edit</i>
              Open document notes
            <% end %>
          </li>
          <li>
            <%=
              link_to '#', class: 'share' do
            %>
              <i class="material-icons purple-text left">share</i>
              Share this document
            <% end %>
          </li>
          <% if current_user.can_delete?(@document) %>
            <li>
              <%= link_to @document,
                method: :delete,
                data: {
                  confirm: "Are you sure? This will permanently delete this entire document!"
                } do
              %>
                <i class="material-icons left red-text">delete</i>
                Delete this document
              <% end %>
            </li>
          <% end %>
        </ul>
        <li class="right">
          <%=
            link_to '#', class: 'tooltipped dropdown-trigger', data: {
              position: 'bottom',
              tooltip: 'About this document',
              target: 'about-this-document-dropdown'
            } do
          %>
            <i class="material-icons white-text left"><%= Document.icon %></i>
            <span class="hide-on-med-and-down">About</span>
            <i class="material-icons right">arrow_drop_down</i>
          <% end %>
        </li>
        <li class="right">
          <%= link_to analysis_document_path(@document), class: "tooltipped", data: { tooltip: 'Analyze this document', position: 'bottom' } do %>
            <i class="material-icons left">bar_chart</i>
            <span class="hide-on-med-and-down">Analyze</span>
          <% end %>
        </li>
        <li class="left" style="margin-left: 20px">
          <%= yield :navbar_left_content %>
        </li>
        <li class="right">
          <%= yield :navbar_right_content %>
        </li>
      </ul>
    </div>
  </nav>
</div>

<%# Modals %>
<%= render partial: 'content/share', locals: { shared_content: @document } %>
<div id="universe-picker-modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Set document universe</h4>
    <p>
      What universe does this document exist in? You can change this at any time.
    </p>
    <div class="row">
      <%= form_for @document, method: :put, remote: true do |f| %>
        <div class="col s12 m12 l4">
          <p class="grey-text">No universe</p>
          <p>
            <label class="js-autosave-trigger">
              <%= f.radio_button :universe_id, "nil", class: 'with-gap', checked: @document.universe_id.nil? %>
              <span>No universe</span>
            </label>
          </p>
        </div>
        <% if @linked_entities.any? %>
          <% linked_entity_universes = @linked_entities.map { |de| de.entity.try(:universe) }.uniq.compact %>
          <% if linked_entity_universes.any? %>
            <div class="col s12 m12 l4">
              <p class="grey-text"><%= pluralize linked_entity_universes.count, 'suggested universe' %></p>
              <% linked_entity_universes.each do |universe| %>
                <p>
                  <label>
                    <%= f.radio_button :universe_id, universe.id, class: 'with-gap', checked: @document.universe_id == universe.try(:id) %>
                    <span><%= universe.name %></span>
                  </label>
                </p>
              <% end %>
            </div>
          <% end %>
        <% end %>
        <% if @linkables_cache.fetch('Universe', []).any? %>
          <div class="col s12 m12 l4">
            <p class="grey-text">Your universes</p>
            <%# we can't use linkables_cache here since it can be scoped to @current_universe and therefore only return that universe %>
            <% current_user.universes.each do |universe| %>
              <p>
                <label class="js-autosave-trigger">
                  <%= f.radio_button :universe_id, universe.id, class: 'with-gap', checked: @document.universe_id == universe.id %>
                  <span><%= universe.name %></span>
                </label>
              </p>
            <% end %>
          </div>
        <% end %>
        <div class="col s12">
          <p class="grey-text">
            Changes are saved automatically.
          </p>
        </div>
      <% end %>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

<%= content_for :javascript do %>
  $(document).ready(function () {
    var universe_picker_form = $('#universe-picker-modal').find('form');

    universe_picker_form.find('.js-autosave-trigger').click(function () {
      var selected_universe_name = $(this).text().trim();

      console.log('name is now ' + selected_universe_name);

      $('.js-content-universe-name').text(selected_universe_name);
      $('#universe-picker-modal').find('form').submit();
    });
  });
<% end %>