Agile Web Development Using Rails 6/

...

/

Adding more Administration Using a Sidebar

Adding more Administration Using a Sidebar

Learn to improve the styling of the sidebar using CSS stylesheets.

We'll cover the following...

Let’s start with adding links to various administration functions to the sidebar in the layout. We will have them show up only if a :user_id is in the session in line 33:

Press + to interact
<!DOCTYPE html>
<html>
  <head>
    <title>Pragprog Books Online Store</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all',
                            'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                            'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <header class="main">
      <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
      <h1><%= @page_title %></h1>
    </header>
    <section class="content">
      <nav class="side_nav">
        <div id="cart" class="carts">
          <%= render_if @cart && @cart.line_items.any?, @cart %>
        </div>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/questions">Questions</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
        <% if session[:user_id] %>
          <nav class="logged_in_nav">
            <ul>
              <li><%= link_to 'Orders',   orders_path   %></li>
              <li><%= link_to 'Products', products_path %></li>
              <li><%= link_to 'Users',    users_path    %></li>
              <li><%= button_to 'Logout', logout_path, method: :delete   %></li>
            </ul>
          </nav>
        <% end %>
      </nav>
      <main class='<%= controller.controller_name %>'>
        <%= yield %>
      </main>
    </section>
  </body>
</html>

We should also add some light styling. Let’s add this to the end of app/assets/stylesheets/application.scss:

Press + to interact
nav.logged_in_nav {
  border-top: solid thin #bfb;
  padding: 0.354em 0;
  margin-top: 0.354em;
  input[type="submit"] {
    // Make the logout button look like a
    // link, so it matches the nav style
    background: none;
    border: none;
    color: #bfb;
    font-size: 1em;
    letter-spacing: 0.354em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
  }
  input[type="submit"]:hover {
    color: white;
  }
}

Now it’s all starting to come together. We can log in and, by clicking a link in the sidebar, we can see a list of users. Let’s see if we can break something.

Would the last admin leave

If we bring up the user list screen, it should look something like the following application. Let’s click the “Destroy” link for dave to delete that user. Sure enough, our user is removed. To our surprise, we’re then presented with the login screen instead. We just deleted the only administrative user from the system. When the next request came in, the authentication failed and the application refused to let us in. We have to log in again before using any administrative functions.

Note: You can login by using the application provided below.

...