1. Adding Navbar to Application Layout

This is going to be your first self-directed lesson. The purpose of these lessons is so that you actually start learning how to implement things on your own based on what you've learned throughout these lessons.

In this self-directed lesson, the goal is to implement a navbar using tailwind CSS framework.

What we want is a brand name on the left and 3 links aligned to the right, like this:

image.png

Don't worry about actually implementing the links, just leave the URLs as blank (<a href=""></a>). Also, don't worry about the styling since we'll get to that in the next lesson. Just focus on implementing the tailwind navbar into your web app for now.

Where to insert your Navbar

First, go into your application.html.erb. This file is essentially a template for your entire app. The code that you put here will appear on all of the pages that you create in the app (unless you tell rails otherwise, but we're not going to get into that).

If we look in the file, we see a <%= yield %>. This piece of code is really important. Don't remove this piece of code!

application.html.erb serves as a template for all of your pages by default. This means that in general, anything we put inside application.html.erb will show up for all of our pages.

For example, things like the navigation bar and the footer are elements that we need for every one of our web pages. Putting these elements in application.html.erb is a good idea, since it will show up for all of our web pages.

<%= yield %> on the other hand, will display the information of the specific web page that you are currently on right now.

For example, let's say we have an index.html.erb and inside it, we have this:

<h1>Hello {{current_user_name}}</h1>

When we navigate to index.html.erb, what's going to happen is this:

  • application.html.erb is loaded
  • <%= yield %> is replaced by <h1>Hello {{current_user_name}}</h1>

So if application.html.erb originally looked like this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

since the <%= yield %> gets replaced with <h1>Hello {{current_user_name}}</h1>, it now would look like this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello {{current_user_name}}</h1>
  </body>
</html>

Now let's say we have another file called about.html.erb and inside it, we have <h1>About {{current_user_name}}</h1>. Now, when we navigate to about.html.erb, the <%= yield %> will get replaced by <h1>About {{current_user_name}}</h1>.

This might be a hard concept to grasp at first, so make sure to ask questions until you figure this out.

Now that we've figured out how application.html.erb works, where should we put the navbar?

Since <%= yield %> is where our content is going to be, we want to put our navbar right above it. When you implement your navbar make sure you don't accidently delete <%= yield %>. If you delete it, your content won't be shown!

Good luck on your first self-directed lesson!

Lesson list