Locked lesson.
About this lesson
Change how the Navbar looks based on whether a user is logged in or out.
Exercise files
Download this lesson’s related exercise files.
Styling the Navbar by Login Status.docx58.8 KB Styling the Navbar by Login Status - Solution.docx
58.9 KB
Quick reference
Styling the Navbar by Login Status
In this video, we'll modify the Navbar to show links based on whether or not a user is signed in.
When to use
It makes sense to show different links to users if they are logged in or out. For instance, if a user is logged in already, they shouldn't see a link to log in.
Instructions
Modify your Navbar to show different links if a user is logged in or out. Use embedded Ruby with an If/Else statement:
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Login", new_user_session_path %> </li>
<% end %>
Be sure to pay attention to the , method: :delete code on the logout link!
Hints & tips
- A Ruby If/Else statement can show different links based on whether a user is logged in or out
- Don't forget the method: :delete code on the log out button
- 00:05 Okay, so we've got Devise installed now.
- 00:06 And now we need to play around with our nav bar a little bit.
- 00:07 The last video we added a sign up and a login link.
- 00:10 But we also need a logout and an edit profile link so that people can edit
- 00:15 their profile if they're logged in and they can also log out.
- 00:20 So I found those by running our rake routes command in the terminal and
- 00:24 let's look at the log out one first.
- 00:26 When somebody logs in they're creating a user session, so
- 00:30 whenever they log out we need to destroy that user session.
- 00:33 So that's this route right here, but you see I've also added a comma and
- 00:38 then method delete and that just a Rails thing you will have to do, so
- 00:43 be sure and do that.
- 00:44 And then for the next one the edit profile,
- 00:47 using this edit user registration path which is just right here.
- 00:51 And there is a bunch of routes here, you can kinda look through them,
- 00:55 you usually want the ones that are listed as GET.
- 00:59 Because GET is getting a web page, for post you're usually sending
- 01:02 information behind the scenes and you don't usually do that.
- 01:05 That's something that happens automatically so
- 01:07 we usually want these GET things.
- 01:09 So add these links, I'll go ahead and save it and check out your app.
- 01:13 And if you haven't signed up yet, go ahead and sign up.
- 01:15 I signed up earlier.
- 01:17 If you have signed up, go ahead and log in.
- 01:21 And you see we have this flash alert, little button on it so we can close it.
- 01:25 So that's cool, we did that two videos ago.
- 01:27 Well, now let's look at this nav bar.
- 01:28 This is kind of weird, right?
- 01:30 It still says sign up.
- 01:31 It still says log in.
- 01:33 If we click log in, we get a message that says you are already signed in.
- 01:35 If we click sign up, we get a message that says you are already signed in.
- 01:39 We can log out, and we can edit our profile.
- 01:42 We've got a problem here 'cause we don't want these things to show all the time.
- 01:46 So let's log out.
- 01:47 Check out this Edit Profile.
- 01:49 Well, we haven't logged in so,
- 01:51 we get this message that says you need to sign in before continuing.
- 01:54 Well, that doesn't work for me, I don't like that at all.
- 01:57 What I want, let's go ahead and log back in real quick, is for
- 02:01 this nav bar to change depending on whether or not we're logged in.
- 02:05 So that's pretty easy to do, if we go back to our Devise instructions, and
- 02:09 here is the last one we did.
- 02:11 If we look down a little bit we see there is this feature called User Signed In and
- 02:15 it allows you to verify if a user is signed in or not.
- 02:17 So we can use that pretty easily.
- 02:20 Let's look at our nav bar, which of this do we wanna keep always?
- 02:23 We always want the Home Page and the About Us to show.
- 02:26 The rest of them we only want to show if the user is logged in.
- 02:29 So how do we do this?
- 02:31 Well, we need something called an if-else statement.
- 02:33 And that's Ruby, basically, so we're gonna use embedded Ruby.
- 02:37 And so how do we do that?
- 02:38 Pretty easy, we use our embedded Ruby tag, but you'll notice, look at this,
- 02:42 our embedded Ruby usually has an equal to sign, now, it does not.
- 02:47 We use an equal-to sign when we wanna output something onto the screen.
- 02:50 This, we don't wanna output anything.
- 02:51 We just wanna run some logic, so we take that out.
- 02:53 So if a user is signed in, we want them to be able to,
- 02:58 I'm just gonna copy this.
- 03:05 If a user is signed in, we want them to be able to log out or edit their profile.
- 03:09 We do, else, this is an if-else statement.
- 03:14 Else, if they're not logged in, allow them to sign up or log in.
- 03:20 And then finally, end.
- 03:25 And that's the structure of an if-else statement,
- 03:28 it's if something do something, else do something else.
- 03:33 And then finally end.
- 03:35 So let's save this come back here and click Reload and
- 03:39 boom Home Page and About Us.
- 03:41 Actually, let's change that from Home Page to just Home.
- 03:48 So Home, About Us, Logout, Edit Profile.
- 03:53 So we can edit our profile.
- 03:57 If we log out.
- 03:59 Now, it's Home, Sign Up, Login.
- 04:02 So if we login.
- 04:04 We can log out or edit our profile.
- 04:06 So, pretty cool.
- 04:06 We created some dynamic function ability in our nav bar just by adding,
- 04:11 what's that?
- 04:12 Three lines of code.
- 04:13 And you don't really need to know this Ruby code, this is just basic Ruby.
- 04:17 If you're interested in learning Ruby, I suggest you do that,
- 04:20 but this is a very basic sort of Ruby thing, an if-else statement.
- 04:23 So yeah, that's all for this video.
Lesson notes are only available for subscribers.