Build Youtube in React 05: polishing sticky side bar

1 Youtube Sidebar Intermediate Result

Back in the sattle again… Our sidebar is supposed to look like this:

Click on the image to see it in high resolution.

Our current application looks like this:

So let’s get to work and close the gap.

2 Improving side bar

2.1. Adding horizontal dividers

You have certainly already noticed that the mockup contains horizontal divider lines. Implementing them is easy as pie. Let’s use Semantic UI’s divider component for that. It’s dead simple, I promise.

Change the src/SideBar/SideBar.js file like so:

Note that we have added the <Divider/> component two times. Please don’t forget to import it from Semantic UI.

Ok, that one was really easy.

2.3. Headings for side bar

In addition to dividers, we also need headers so that the sections in the sidebar are easy to distinguish.

Let’s create a simple component for that.

1. create a new directory within src/containers/SideBar called SideBarHeader
2. create SideBarHeader.js and SideBarHeader.scss inside the src/containers/SideBar directory

Since the SideBarHeader will live inside a Semantic UI Menu component, it is basically just a Menu.Item component that contains a Menu.Header component.

This component expects to receive a prop called title and will display it in caps only (because that’s how Youtube does it).

We’ve added the .side-bar-header SCSS class to specify the text’s color.

Let’s make use of it.

We now have the a heading in our side bar. Nice 😁

2.4. Subscriptions component for side bar

As far as the sidebar is concerned, there are two more things missing: The subscriptions section and the footer.

1. Create a new directory inside src/containers/SideBar and name it Subscriptions
2. Create a Subscriptions.js file inside src/containers/SideBar/Subscriptions

The Subscriptions (notice the plural) component will display a list of the channels the user has subscribed to. To display a single Subscription (notice singular), let’s create a Subscription component.

1. Inside src/containers/SideBar/Subscriptions create a new directory called Subscription
2. Inside src/containers/SideBar/Subscriptions/Subscription create a Subscription.js and a Subscription.scss file

We need a circular image, the channel’s title and the amount of new videos next to it. In case the channel is just live, we want to display a special broadcasting icon:

Ok, so let’s talk about it. Since the right element varies depending on whether the channel is currently live, we create a rightElement variable at the beginning. If we are broadcasting then we display the respective icon using the Semantic UI Icon component. If the channel is currently not live and has published new videos, our right element is just a span element that displays a number.

For layout purposes we wrap the content on the left into a .subscription div element that serves as a flex container. We force the flex container to maximise the space between its elements by setting justify-content: space-between. The align-items: center property centers the div’s content vertically. Since we only have two elements in our flex container, both elements are 'glued' to the left and right because of our SCSS magic. For now, we just use a placeholder image for the channel’s icon because we haven’t connected our app to the Youtube backend yet.

2.5. Wiring up subscriptions component to side bar

Now that we have designed and implemented the Subscription component, let’s also use it.

Add the following code to your src/SideBar/Subscription.js

For now, we are just adding a few subscription elements to our sidebar. Notice that the channel with the label MusicChannel is broadcasting and will therefore be displayed with a respective icon. We use a React.Fragment element so that we don’t need a wrapper div.

3 Side bar footer

Oh man, that was a lot of work for a side bar. Let’s finish it off by creating a footer so our application looks more similar to the original Youtube app.

1. Create a new directory inside src/containers/SideBar and name it SideBarFooter
2. Create a a SideBarFooter.js and a SideBarFooter.scss file in the SideBarFooter directory you have just created.

This component is super easy, it’s basically just a little bit of text.

Now, I don’t think it needs much explanation here, we’re just creating a little bit of text.

I’ve just included this example for the the sake of completeness.

As a last step, add the SideBarFooter component to the end of the SideBar component.

And here’s how our footer looks like (click on the image to see it in high resolution):

4 Wrap Up

That looks good. In the previous tutorials we’ve been dealing with a lot of Semantic UI's components. This was the last episode where we’ll make extensive use of it. All the other components are pretty much built from scratch. So in case you don’t like Semantic UI, congrats, you’re pretty much through 😁. However, we will make use of Semantic UI's Loader component later down the road.

Don’t forget to commit your changes.

As always the code is available at our Github repo.

Follow @productioncoder

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.