What we're going to do

• Add top-level navigation
• Learn about CSS organization techniques
• Add some really, really ugly CSS to our app

Application layout

We'll start with the application layout, which you can find in the views directory, at app/views/layouts/application.html.erb.

Add the markup

Copying and pasting a nav bar onto every. single. page. of our application would be the worst. So instead of putting it into our individual pages, we'll add the nav bar HTML to this file!

Add the following code above the line <%= yield %>

<header class='clearfix'>
  <div class="left-nav">
    <ul>
      <li><%= link_to "Home", jobs_path %></li>
    </ul>
  </div>
  <div class="right-nav">
    <ul>
      <li><%= link_to "Add Job", new_job_path %></li>
    </ul>
  </div>
</header>

Additionally, wrap the <%= yield %> in a containing wrapper div so it looks like this:

<div class='content'>
  <%= yield %>
</div>

Things to note:

• We use Rails link helpers instead of typing in <a href="/jobs/new">Add Job</a>. The reason is that if the url of a page changes in the future, without the link helpers, we’d have to update every single place we link to that page. The link helpers abstract the actual url for us, so if we change a specific url, we update the address in only one place, in the routes file; and all the places we link to it stay the same.
• The <header> tag is HTML5. Aren't we cool!?

So let's take a look at it. Refresh, and ... isn't that horrifying looking? Let's make it look like a nav, albeit a very ugly one.

Add the styles

Open up the assets directory, and you should have a file here: app/assets/stylesheets/jobs.scss. This is a Rails-default created stylesheet, and isn't the best. Smart CSS people have taught us that CSS should be organized into reusable components, not organized based on where it is used.

So let's delete that file and make a new one.

Actually, we're going to make two new ones. Under app/assets/stylesheets, add global.scss:

body {
  margin: 0;
}

.content {
  margin: 10px auto;
  width: 70%;
}

.clearfix {
  overflow: hidden;
}

This is where we put styles that affect the whole app.

Now, under app/assets/stylesheets, add nav.scss:

header {
  background: grey;
  padding: 10px;
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  a {
    text-decoration: none;
    font-weight: bold;
    color: white;
  }
}

.left-nav {
  float: left;
}

.right-nav {
  float: right;
}

Refresh the page, and ... it's still totally horrific. This CSS is not going to win any awards.

But it's usable, and we can keep working on that later. It turns out sometimes job descriptions have typos, and need to be updated. Let's make that possible!