- Read Tutorial
- Watch Guide Video
As I mentioned in the last guide, now that we have our layout implemented we can come and we can start customizing the navbar.
I'm going to open up Sublime and close out of the index and right here we have the navigation. First, let's convert this into a partial just to save a little bit of time later on. I'm going to cut everything out there and say <%= render 'shared/portfolio_nav' %> Then we can create this portfolio_nav inside of our shared directory. So new file _portfolio_nav.html.erb, paste all of this in. Select at the top and unindent. Just in case you're curious about how to un-indent because tab gives us the ability to indent. If you hit shift tab that's how you can un-indent just in case you are relatively new to Sublime and you've never done that before.
With all of this, I can get rid of these comments coming back, hit refresh. Everything is still working. That is good, that refactor worked.
Let's come back here and let's actually make this functional. I'm going to take our nav_items. I'm going to cut this out, we don't need these anymore. If I come back here you can see that we have a number of items.
Now, this is not a traditional navbar as you probably already noticed this is more of just kind of a cool animated header. This is going to be different. Our blog and our home page, our main application layout followed a pretty similar pattern where they simply had a traditional navbar with links and that was really everything that was needed. This is a little bit different because it actually hides items, you'll also notice that the classes here are all different. That's important to know.
But let's open up our nav and I'm just going to grab each one of these items, now we can close it out. In case you're curious we talked about the ability to share a nav partial because if you look at our application_nav you can see that it has some similar kinds of functionality to our blog_nav and our portfolio_nav you may think "Oh, we couldn't duplicate this because each one of these are unique". Yes they are unique in a way but I'm going to show you how we actually are going to be able to share behavior at least in terms of the list. The wrapper is going to have to be unique for all of them because they all have their own kinds of special classes like collapse and these various navbar items. But there is some shared functionality and we'll get into that during one of our refactor guides. I'm going to come here and delete each one of these and here we can come and delete each one of these divs. This is where it's a little bit different.
Notice how this is an unstyled list with list items whereas with the blog navs these are just links. I believe with the application nav, yes, these are just links. That's definitely one difference. But, what we're going to have to do here is paste these inside and then put our special tags around it.
First, let's grab this class because we're going to need this and it's for the link. If I come and select each one of these items, hit comma class: 'text-white'. The other thing, just so we can do all of our work down here, before moving it up. Let's come and add those tags. Here I'm going to select each one of those and end the . If I hit command left that's going to take my cursors all the way to the left here. Then I can do . Now, this is this whole component is formatted. If I come here paste all of this in. Now, this should all work. Also, this says album, this should probably say your name because that is that little logo area on the left-hand side, hit save. Let's come back and see what this looks like. Ok, that's much better. It has my name here if I click this now it has our nav and these items all work.
This is coming along nicely and I'm going to not say contact. I'm just going to say 'explore' because I think that's a little bit better name for the for the navigation menu and then for the about section. Some homework for you is, add some content here that's specific to your portfolio or about yourself, the type of work you do that kind of thing.
Now that we have that, the next thing we're going to do is we need to call our login_helper. If you look at the portfolio you can see that we have the login_helper here. I'm going to cut that name out, hit save there. Now that we have this I can get rid of everything here. I don't need to get rid of the erb tags everything inside of this. Now I can simply pass in the class that we want for our view_helper. This should give us what we need. These tags may add a level of complexity that may cause an issue but we will find out. Let's hit refresh that fixed that little area and then if I click this it says logout. You may think that this is fine. I don't know. We need to click logout and see what happens. Now if I go back to the portfolio. Ok, that's fine. I'm fine with them being side by side. I wasn't sure if we were going to have any kind of conflict with this tag because essentially this is being wrapped inside of the same list item. I'm totally fine with this and having those two options to register or login. Ok, that is looking really good, I'm happy with that.
Let's go back and I think we can close out our navbar and now let's take care of this masthead. I'm going to get rid of this. In fact, I'm going to, if you notice how a lot of times where I'll copy something and then paste it in the indentation is off but it's not off for the first one. That is because whenever I select the items and I select like this. Notice how there's still some room here that's not selected?
That is the reason why. Then all of these items have the 4 spaces. One way around that just so they're all lined up is to actually cut all the way over to the left. I'm going to now, call this partial, I'm going to say <%= render 'shared/portfolio_masthead' %> Then close off the erb and we can get rid of our comments. Coming down to shared/new file, save _portfolio_masthead.html.erb. Now you see when I paste them in they're all lined up. We can just select all of it and then do shift-tab to un-indent it. That is all we're going to need there. Before we do any other work let's hit refresh, make sure everything's still working and it is. Here we can simply say something like my portfolio. Then you can add something about your portfolio right there. Then we have these 2 'call to action' buttons and I think these are cool and very helpful. Let's actually use them and make them functional. The first one I think would be a good one which would be a link to just the Home page or to the About Me section or something like that so I can come down and say <%= link_to 'Find Out More About Me' %>. You can type anything you want in there that's simply what I'm going to put in.
Now, what is our routes? This is something that we haven't done in a little while so we haven't really looked up our routes and I'm pretty sure it's just about_me_path. But as a matter of practice let's say rake routes | grep about. This is going to look up our routes and tell us which route path our about me section is at. There you go, it's going to be about_me_path, Rails s. Coming back and now we can say about_me_path, class='btn btn-primary', close it off. Then we can close that off. This other one I think I want to link to our blog. I do a lot of blogging. This will be something that I definitely want to showcase. Here I can say blogs_path. This should be btn-secondary. If we're going to match the site. Coming back, let's see if this works. Ok, we say find out more about me. Click on that, it goes to the about me section coming back if I click on my blog, this goes to our blog. That is working nicely.
Last thing we're going to do in this guide is going to be our footer. Let's come down and let's take care of this footer, close out our masthead. Coming down here, we can see your footer and notice how I'm doing things a little bit backwards compared with how we did it with the blog and that's perfectly fine there is no right or wrong way in how to implement a design. There are many times where I go kind of backwards where I build out the layout just like this and then implement my partials along the way and do that. Then there are other times where I focus more on each one of the components and eventually get to the layout. Either way is fine usually for me it depends on the level of complexity of the design and things like that.
Let me select all this. I'm going to select all the way here and now I can call our partial that we're going to create. Say <%= render 'shared/portfolio/_footer' %> Get rid of these comments. Now coming down to 'shared/_portfolio_footer.html.erb', paste it in, select and fix the indentation right there. Now we can simply call our cool helper method. If I select all of this. Now we can put in our call to our copyright generator. I will get the name right this time, hit save.
Now let's come back and see if that took care of it. There you go. Copyright generator has our date, name, everything like that has back to top which will take us to the top of our portfolio by adding that little hash in there. This is looking very nice. I think you should be very happy with how it's coming along. Let's put this one to bed. I'm clear, git status. Did a decent amount of work in this commit. So git add . git commit -m "Implemented partials for navigation, footer, and masthead for the portfolio layout.", git push origin design. We are good, now that we have this in place. I think we are ready to start building out the show page for our portfolio. I will see you in the next guide.