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.
- create a new directory within
src/containers/SideBar
calledSideBarHeader
- create
SideBarHeader.js
andSideBarHeader.scss
inside thesrc/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.
- Create a new directory inside
src/containers/SideBar
and name itSubscriptions
- Create a
Subscriptions.js
file insidesrc/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.
- Inside
src/containers/SideBar/Subscriptions
create a new directory calledSubscription
- Inside
src/containers/SideBar/Subscriptions/Subscription
create aSubscription.js
and aSubscription.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.
- Create a new directory inside
src/containers/SideBar
and name itSideBarFooter
- Create a a
SideBarFooter.js
and aSideBarFooter.scss
file in theSideBarFooter
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 @productioncoderPlease 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.
Recent Comments