Build Youtube in React 04: Building a sticky sidebar
Now that we have finished our header navigation, let’s directly move on to the side navigation. This will be one of the tutorials where we’ll make much use of
Semantic UI's pre-made components.
Once the header navigation and the side bar is completed, we will build pretty much all of the components from scratch.
1 Sidebar Mockups
Let’s look at our mockup again. Click on the image to see it in high resolution.
Let’s zoom in a little bit to see how the sidebar is supposed to look. Click on the image to see it in high resolution.
2 Adding Youtube Sidebar markup
2.1. Create the SideBar files
As we can see in the mock, the sidebar displays a list of the subscriptions. Therefore, we can assume that the sidebar will be connected to our
Redux state later which is why we are going to put it into the
- Create a new directory inside
src/containersand name it
2.2 SideBar skeleton
We’re going to use a vertical Menu component provided by
We want a
borderless component that is fixed to the left of the screen. For additional styling, we add the SCSS class
.side-nav which we’ll fill out later.
Let’s quickly add our new
SideBar component to our
App.js file so that we see how it evolves as we are building it out.
Remember that we already placed the
HeaderNav component inside our
App component. Because our
render function always need to return one top level element, we wrap the two components inside a
React.Fragment does pretty much nothing except being a container that renders its children.
Like so, we have one top level element in our
function. We could have also put an empty
div here, but I just wanted to show you
React.Fragment so you know what it does in case you see it again.
2.3 Adding the SideBarItem component
The SideBar component represents will hold the markup for the entire menu. For encapsulation reasons, it makes sense to further break the sidebar down into smaller components. When we look at our mock carefully, we realise that there is one recurring pattern: There are menu items which have an icon and a text next to it. For simplicity, we will put this into a separate component called
SideBarItem. Since the
SideBarItem component will only be used inside of
SideBar, we will place it directly in the
- Create another directory inside
- Inside the SideBarItem directory, create a
We’ve created a functional component that will render a
Menu.Item element to the
DOM. It accepts three props:
icon and label. The
highlight prop is a flag that determines whether the item should be highlighted (i.e. be rendered in red). In our mockup, the
Home SideBarItem (the first item in the left sidebar) is highlighted and is rendered in red.
props.icon is supposed to be the name of the
icon that should be drawn on the left, e.g. a
clock. You can find more information on how Semantic UI handles icons here. The
label prop is the text that is put right to the
Note that we did a little bit of
CSS tweaking. We use the
.sidebar-item-alignment-container div to center the icon and the text vertically by making it a
flexbox element and by setting
align-items: center. If the item is highlighted, the text will be bold and the icon colour will be red. If the icon is not highlighted, we apply a light grey coulor to it.
2.4 Tweaking SideBar styling
Awesome let’s try this out. Let’s add a the
SideBarItem elements to our
Aaaaand our browser shows this (Click on the image to see it in high resolution):
Hm, not quite what we wanted, right?
Ok, so what happened? When you create a fixed sidebar,
Semantic UI will make its height 100% and “glue” it to the position we have specified. Since the sidebar uses the
position: fixed attribute it kind of falls out of the document flow and therefore hides our logo. Let’s fix this, by adapting the styling of our
To override Semantic UI’s default styling, we need to provide a more specific rule. Therefore we use
.ui.menu.fixed.side-nav in line
We set the menu’s background to a light grey color and give it a margin of
HeaderNav component has a height of
64px as well, so we are basically pushing the side nav down a little bit. Because
Semantic UI still thinks that we have the full height available, we add a padding-bottom rule with a value of
64px. We also add some cosmetic improvements such as a nice styling when the user hovers a side bar element. We also force the menu to have a width of
17rem is also the same width that our logo
Menu.Item component has available so everything should look pretty aligned.
Note that we we are adding the
.ui.vertical.menu classes because
Semantic UI provides a default width for its side bar out of the box and we must provide a more specific rule to override that. If you ask yourself how I know what classes to override, simply open up the developer console in your favourite browser and inspect the element. Then you’ll see what classes Semantic UI automatically adds.
2.5. Refactoring Styling
Hm, we got quite a few magic numbers in our
SCSS. Let’s outsource common numbers to a
shared.scss file so we can replace the magic numbers with variables.
srccreate a directory named
stylescreate a file named
Let’s update the
HeaderNav.scss and the
For brevity reasons, the listing above only shows the
SCSS that we changed. Leave the rest as it was. The app should now look the same as before but we now have more maintainable stylesheets.
3 Wrap Up
This looks quite decent (high resolution link here). Let’s continue our ride in the next tutorial otherwise this one gets way too long.
As always, you can find this projects code on our youtube-react Github repository.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.