This is gonna be a relatively short guide where we take care of the sidebar lists. We're gonna add some wrapper styles, we're gonna add some image styles so that all of this data fits inside the confines of that sidebar list component.

So opening up Visual Studio Code, in the portfolio sidebar list component, let's first create a class name for that sidebar list. So right here we can simply create something like portfolio and then dash item thumb. Something like that 'cause that's gonna represent this specific thumbnail.

And I'm just gonna copy this code because right below it in that line that wraps up the image, right here I'm gonna say portfolio, let's just call it thumb image, and that'll be the name for that class. And then we can also add some titles here, so let's say that for the, not in the id, we're gonna use that later, we're actually gonna render that on the screen, we're actually gonna use that in the slug when we start building the edit feature, and also the link to feature, but for right now I'm gonna keep it in place, and then I will style though the title.

So the className for that name is just gonna be title. And then lastly, down here in the wrapper for the entire sidebar list, here let's give it a className of portfolio-sidebar-list-wrapper. I know that's a little bit of a long name, but that represents exactly what it is.

So, now that we have all of those things in place, let's first open up our main file. And I'm gonna create a style file dedicated just to this sidebar list just in case we want to use it anywhere else, and also to keep our styles nice and segmented.

So let's call this portfolio sidebar, and I'm not gonna save it quite yet, 'cause we still need to create that file. So inside of your style directory, create a new file, called portfolio-sidebar-list, and then you can save that main file, close it, and now let's create the styles for the portfolio sidebar. Remember that we created a wrapper div here, called portfolio-sidebar-list-wrapper.

I'm going to first add that and then the next class that we have is this portfolio-item-thumb. So we're going to nest this inside of it for the selector, and so the first thing is to add some padding. So I'm gonna give some padding of 21 pixels, and then let's also update the styling for the image. So we have this portfolio-thumb-img class here, so I'm gonna select that inside of the thumb, and then also select the image itself, and let's just make sure the width is 100%, hit save, and let's go check this out in the browser.

Look at that, you now have a much better-looking sidebar. Each one of those elements and those images are fitting perfectly. So now with all of this in place, let's also update the styling for the title. For the most part, it looks pretty good, but let's just update the color. So we'll select the title, give the color of, let's go, let's try out what off white looks like.

portfolio-sidebar.scss

.portfolio-sidebar-list-wrapper {
  .portfolio-item-thumb {
    padding: 21px;

    .portfolio-thumb-img img {
      width: 100%;
    }

    .title {
      color: $offwhite;
    }
  }
}

Go and check it out, and there we go, that looks really good.

As I said, we do not have to worry about styling the id, because the id is not gonna actually gonna be there for much longer, right now we're just using it as a point of reference. When we start building out the edit feature, and to link to the portfolio detail page, those kinds of things, and we're gonna bring that id in.

But for right now, I think that's looking really good. I think we are ready to start building out the portfolio form, so I will see you in the next guide where we start doing that.

Resources

• Source Code