Learn React & CSS by reverse-engineering Facebook's new multi-level dropdown UI in this beginner-friendly tutorial https://github.com/fireship-io/229-multi-level-dropdown

React https://reactjs.org/
CSS Transitions https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:15:03.051Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
044cdd76-71c1-42fe-917e-50de40b59396
b1163e3690f40bf3ac15ebd432b0a6a13cf3cd41657eaa895ce219c519ea8ad4
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
I don't log in to Facebook often, but the last time I did, I was super impressed by its simple, intuitive, and fast new UI.
In today's video, I'll show you how to reverse engineer some of its UI features, specifically the top navigation bar, its icon buttons, and this multi level animated drop down.
We'll do it using HTML, CSS, and because I mentioned the word Facebook, I'm legally obligated to use React in this demo.
In the following code tutorial, you'll learn how to create icon buttons with flexbox, features.
You'll learn how to use CSS transforms to create sliding animations, and fundamental concepts in React, like component composition, hooks, and how to create CSS functions based on the state of your React application, and I'll throw in a bunch of other cool tips along the way.
If you're new here, like and subscribe, and let me know if you want to see more beginner friendly UI tutorials like this in components.
Before we get started, let's take a closer look at what we're building today.
By the end of this video, you'll have several reusable React components that you can use for for navigation and drop downs.
At the top, we have a nav bar component where the children are nav items represented as icon buttons.
Feet.
These buttons have children that you can toggle on or off by clicking them.
When we click the carrot, it renders our drop down component.
It contains multiple drop down items, and the ones with a chevron can toggle to a secondary drop down menu.
Notice how the old menu slides out to the left and the new one comes in from the right.
And because the height of the two menus won't be the same, we'll animate that as well.
Now before we get started, feed.
I'd just like to say this is a beginner friendly video, but we move at a very fast pace on this channel.
So feel free to pause the video or slow down the playback speed as you follow along.
The first thing we'll need is a React app.
Assuming you have Node.
Js installed, open up the command line and run npx create react app, and of course, the name of our app is Facebook.
To keep this demo simple, people.
I'm going to delete everything that's not the index.
Js, app.
Js, or index.
Css files.
The index.
Js file is your initial entry point.
I'll go ahead and remove the service worker stuff here, then you can ignore this file for the rest of the video.
From there, I'm removing all the boilerplate code from the app JS file.
Feed.
We'll be using functional React components in this video.
When you see a function whose name starts with a capital letter, you can think of that as a component.
The return value of a functional component is your UI or HTML or more specifically, JSX.
JSX is not actually HTML, but it's a syntax extension for JavaScript that allows you to write HTML like templates in your components.
But before we get too deep into React, let's open up the index CSS file.
The CSS in this video is pretty generic, feed, so feel free to use it with your favorite framework.
I'm starting by defining some global CSS variables that we can think of as our theme.
And I'm also defining a speed variable that represents the animation speed, which will come into play later in the video.
Then below that, I'm overriding the default unordered list style.
And then for our link elements, I'll match them to the text color variable in our color scheme.
That takes care of our initial setup.
Now we're ready to start building the top navigation bar.
Feed.
React and especially functional components make it really easy to break your application down into a lot of small reusable pieces.
And this is a practice that we call component composition.
Feed.
In our app JS file, we'll define a new component named navbar, and it returns JSX inside these parentheses.
We'll go ahead and add an HTML nav element with an unordered list inside of it.
We can apply a CSS class to these elements using class name.
Notice how this is different than regular HTML, which is normally just class.
Feed, and we'll apply class 4 navbar and navbar nav to make these elements easy to style.
Now if we go up to the JSX for the app component, we can declare this navbar there.
And notice how we declare it almost like a regular HTML element.
Now I'm going to open up the CSS here on the right side, and we'll apply some styles to the navbar.
Feed.
The nav bar is basically just a rectangle that sits at the top.
We'll give it a fixed height based on our nav size variable and then some coloring and padding.
Feed.
The unordered list that sits inside the nav is the container for the children, which we'll set up as a flexible row.
We want it to take up 100% of the width and the height of the parent, and then we'll set the display property to flex.
And we can have all the children start on the right hand side instead of the default left side by saying justify content flex end.
Feed.
Now at this point, we have some actual UI that we can take a look at.
Go ahead and run npm start from the command line to serve your app.
It should open in the browser automatically, and you should see this horizontal gray bar up at the top.
And now the question becomes, how do we add items or children inside the navbar?
In React, Components can pass data and UI elements to each other using props.
Add props as an argument to your function, and then you can reference it in your template.
Feed.
Props has a built in property named children, and it will project or reference any UI elements that you pass in inside of the actual tags of that component.
Feed.
For example, if we go up to our navbar and add a list item inside of its tags, it will be rendered in the location that we called props dot children.
So if we open up the browser, you should see the letter x here up in the top left corner.
But this gives us a great opportunity to create a new component called a nav item.
Our nav item component will also take props and will set up a list item as its main element, and then we'll nest an a or link element inside of it.
Feed.
The a element represents the icon button, so we'll give it a CSS class accordingly.
Now this time, instead of referencing props dot children, we're going to pass our own custom prop called an icon.
Instead of adding UI elements inside of the tags, we reference our icon prop as we would with a regular HTML attribute.
So props to allow you to pass data from the parent to the child, similar to how you might pass an argument to a JavaScript function.
Because remember, your React component is just a JavaScript function.
For now, I'm just going to pass some emoji icons so we can focus on the CSS.
Each nav item is a box that is slightly smaller than the nav bar itself.
An easy way to manage its width is to calculate it dynamically.
So we'll take our nav size variable, which is 60 pixels, and then we'll multiply it by 0.08 or 80% with the calc function.
Now each of these nav items should display their children directly in the center.
We can easily do that with Flexbox by aligning items to the center and justifying the content to the center.
Feed.
So that gives us a box with its children in the middle.
But now we want an icon button with a circular shape.
I'm going to scope a new CSS variable to this class called button size.
Feed.
It also uses the calc function to give us a size that is exactly 50% of the original navbar size.
And now we can apply that value to the width and the height of this class.
Feed.
And then to make the shape circular, we can apply a border radius of 50%, which creates a perfect circle.
Now inside of this circle, we also want to center the children directly in the middle.
So, again, we'll set up a flex container and align and justify everything to the center.
If you open your app in the browser, you should now see these 3 icon buttons here at the top.
Feed.
As an added touch, we might want to change the color slightly when these items are hovered over.
An easy way to handle that is with a CSS transition.
Feed.
We'll apply it to the filter property and set it to a duration of 300 milliseconds.
Then we'll target the hover pseudo selector on the icon button, and we'll filter its brightness to 1.2 to make it slightly brighter as we hover over it.
However, in the full demo and on Facebook, you'll notice that it's using SVG icons.
You can find all the SVGs I used in the source code on GitHub.
They live in this icons directory, but how do we use these SVG icons in React?
It's actually very easy to use an SVG icon as a React component directly in your code.
Add an import statement to the top of the file that references the path to your SVG icon.
View.
You import a React component and then name it whatever you want using the as keyword.
And then you can do the same thing for all of the other SVGs that you want to use in your code.
Feed.
From there, we can go back down to our navbar, and instead of using an emoji, we'll use braces to pass in one of our SVG components directly.
And now your icon buttons can handle both SVG graphics and emoji strings equally.
But your SVGs don't inherit a size by default, so we'll want to go ahead and set a fixed width and height for them.
Feed.
And now if we preview things in the browser, we should have an icon now that is very similar to the actual Facebook UI.
And now we're ready for the fun part, feed, building an animated multilevel drop down menu.
Now the reason we're not passing the icon as a direct child of a nav item is because some of our nav items might have a drop down menu, and we want that to serve as the children.
We'll add a 4th nav item here with a caret icon, and our drop down will go inside of it.
Now in order to open and close a drop down, our nav item will need to have some state, or in other words, some data that changes throughout the life cycle of the app.
We can manage state in React using a hook called use state.
In our nav item component, we call the use state function, and it returns us with 2 values.
The values are returned in an array, so we can destructure them as variables here using brackets.
Features.
The first value is the state, which in our case is called opened and is a Boolean value that tells us whether or not the drop down menu is open.
Feed.
The second value is a function that you can use to change the state.
We can also set a default value as the argument to use state, and, of course, we want the drop down to be closed by default.
Feed.
That sets up the initial state.
But now we want the user to be able to change the state when they click on the nav item button.
We can do that by going down to our link element, and we'll add an on click event handler.
When the user clicks a button, it will use the set open function that we got from useState, and it will flip the open value to the opposite of whatever it currently is.
Feed.
Putting a bang in front of a Boolean gives you its opposite value, and that can be useful for toggling things on and off.
Okay.
So now the user has a way to toggle the state, but now we need to do something useful with the state.
In our case, we want to show the drop down when the open state is set to true.
Below the link, we'll add braces.
Feed, and if the open property is true, then we'll show the props dot children.
If the open state is false, then nothing will be shown here.
We can test things out by going to our nav item component, feed, adding a hello world, and you should see that appear when you click on the button.
Obviously, it looks terrible, so let's make a drop down component to fix that.
Feed.
We'll add another function for a drop down menu, and we'll have it return a div with a class of drop down.
Then we'll add our drop down menu as the child of the nav item.
Now similar to our navbar, a drop down has multiple drop down items.
But in this example, I'm going to nest that component directly in the drop down menu.
Feed.
The drop down item will simply be a link with a class name of menu item, and then we'll pass in props dot children to control the text of that link.
Feed.
Now you may have noticed in the demo that some of these links have an icon on the left and some have an icon on the right.
We can handle that logic in way by adding slots for a left icon and a right icon.
When you pass in a left icon or right icon prop, it'll be rendered.
But if you leave it blank, then it just won't render anything at all.
We can see it in use down here in the drop down.
A basic drop down item will just take some text as a child, feed.
But if you want to show an icon on the left or right, you can also pass in the icon prop and pass it a component or emoji string.
Now in order to get things looking right, let's go back to our CSS.
The drop down menu on Facebook overlaps just slightly with the top nav bar, and we can achieve that effect by using absolute positioning.
It It allows us to explicitly offset an element based on its container.
From the top of the parent navbar, we'll move the drop down down by 58 pixels.
That means it'll overlap by 2 pixels with the top navbar which has a height of 60.
We can give it a fixed width of 300 pixels and then we'll move it over to the left by translating it over the x axis by 45%.
We'll give it some colors and padding, and we'll want to make sure the overflow property is set to hidden.
Feed.
What this will do is hide any child elements if they overlap this container.
That's important because in a minute here, we'll be sliding in multiple menus through this container.
Feed.
Now the drop down has multiple menu items.
We'll set these up as flex containers that align their items to the center.
In the context of a row, that means vertical alignment.
Now when a user hovers over a menu item, we want to animate the background color.
So we'll go ahead and set up a transition for the background.
Then we can target the menu items hover pseudo selector and change the background color to something a little bit lighter.
As a final touch, we want the right icon in the row to be pushed all the way to the right side.
With Flexbox, you can set the left margin of the last item to auto and that will push it all the way to the right and everything else to the left.
And now our drop down menu is starting to take shape.
Feet.
At this point, we have a fully functional single level drop down, but we require an animated multi level drop down.
To help us along the way, we'll install a very popular package called react transition group.
It will help us control the conditional logic for rendering multiple menus and transitioning between them when they're added or removed from the application.
Once installed, go ahead and import the CSS transition component from the package.
Then we need to give our drop down menu some state to specify which menu is currently visible.
We'll set the main menu as the default and then we'll also show a settings and animals menu as well.
Now our active menu is the state or the name of the menu and set active menu is how we change it.
Now that we have state, we can animate elements in or out using CSS transition.
We can go ahead and wrap our current drop down elements in the CSS transition component.
Feed.
It's looking for a prop of n, which when truthy, will render and animate its children into the UI.
In other words, when the active menu equals feeds main, and we want to show the children inside of this component.
I'm also adding a second property called unmount on exit, which completely removes these children when they're not active.
Feed.
Next, we'll set a time out, which defines the duration of the animation.
And the last prop we need to add here is class names, which we'll set to menu primary for this primary main menu.
Now Now here's how the CSS transition actually works.
It looks for the first child element which we'll set up here as a div.
Then when its in prop changes, it will add or remove CSS classes to this element based on the state of the animation, and it uses the class names prop to prefix those classes.
CSS transition doesn't actually animate anything directly.
Instead, it adds and removes classes based on the state of the animation, so you can handle the animations in your CSS.
Notice how I'm setting up 4 different classes here.
Feed.
Menu primary enter, enter active, exit, and exit active.
When the in prop first becomes true, it will add the menu primary enter class to the div.
Feed.
After a time out of 500 milliseconds, it then adds the menu primary interactive class.
Now when the in prop becomes false, it does the exact opposite.
It adds the exit class, then the exit active class.
This means you can easily create an animation using CSS transitions.
We want our main menu to slide in from left to right.
So initially, we'll translate it to the left by a 110%, so it'll be completely invisible off to the left.
After 500 milliseconds, We'll bring the translate back to 0, so it'll be in its normal position.
Then we can animate it using the transition property, using our speed variable, and a timing function of ease.
Feed.
As you can see here, CSS is doing the animation while React is toggling the classes for you.
Now to animate out, we'll do basically the same thing just in the opposite direction.
We'll translate from 0 to a negative 110%.
Now at this point, everything should be exactly the same.
That's because we need a secondary menu to toggle to.
Let's get started with that second menu by copying our CSS transition and pasting it directly under the existing one.
Instead of checking the active menu feed.
For main, we'll check the active menu for settings.
For class names, we'll use menu secondary because we want to set up different classes for this menu to slide from right to left.
Now the classes work in exactly the same way.
The only difference is that we're translating to positive a 110% versus negative a 110%.
Feed.
The effect is that the secondary menu will be offset to the right and then it will slide in to the left.
And that's all it takes to build the basic slide in slide out animation.
Fee, but we are missing one piece of the puzzle, and that's a way for the user to activate or deactivate a menu.
We have our set active menu function from use state.
So we'll go ahead and bind that to the click event on the drop down item button.
But instead of hard coding a value here, we're going to look for a prop that's passed down from the parent component, feed, and we'll want to make sure that prop exists before we call the set active menu function.
Now to get our demo working, we can go down to any drop down item and set the go to menu prop to whatever menu we wanna navigate to, which in our case will either be settings or main.
And now if you open up your demo, you should have a functional multilevel drop down, feet, but we're not done quite yet.
There's still some additional polish that we have to take care of.
Go back to your demo and add a bunch of drop down items to one of the menus.
Feed.
Notice how the height is not animated.
It just snaps into place and totally ruins the entire animation.
This happens because the old menu hasn't been completely removed from the DOM by the time the new menu is visible.
What we need is a more dynamic way to manage the height.
Let's create some state for the height of the menu.
Then we'll create a function called calculate height, feed, and this function takes a DOM element as its argument.
That's because a DOM element has a property called offset height, which contains the actual height and pixels of that element.
And now you might be wondering, where do we get this element and when do we call this function?
Well, the CSS transition has life cycle hooks that we can tap into.
Fee.
One of these hooks is on enter.
It calls a callback as soon as the enter class is first added to the element, and it also provides the element as an argument, which means we can simply pass in our calc height function here as the prop value.
That will recalculate the height of the menu.
Now we just need to apply it as a style to the drop down itself.
We can go up to the style attribute and dynamically pass in the height from our state.
And that leaves us with one final step to animate it.
Go to the drop down class in your CSS and add a transition for the height.
Now, when you go back to the demo, your drop down should magically shrink and grow based on the size of the current menu.
And with that, I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and let me know what you wanna see next in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: I don't log in to Facebook often, but the last time I did, I was super impressed by its simple, intuitive, and fast new UI. In today's video, I'll show you how to reverse engineer some of its UI features, specifically the top navigation bar, its icon buttons, and this multi level animated drop down. We'll do it using HTML, CSS, and because I mentioned the word Facebook, I'm legally obligated to use React in this demo. In the following code tutorial, you'll learn how to create icon buttons with flexbox, features. You'll learn how to use CSS transforms to create sliding animations, and fundamental concepts in React, like component composition, hooks, and how to create CSS functions based on the state of your React application, and I'll throw in a bunch of other cool tips along the way.

If you're new here, like and subscribe, and let me know if you want to see more beginner friendly UI tutorials like this in components. Before we get started, let's take a closer look at what we're building today. By the end of this video, you'll have several reusable React components that you can use for for navigation and drop downs. At the top, we have a nav bar component where the children are nav items represented as icon buttons. Feet.

These buttons have children that you can toggle on or off by clicking them. When we click the carrot, it renders our drop down component. It contains multiple drop down items, and the ones with a chevron can toggle to a secondary drop down menu. Notice how the old menu slides out to the left and the new one comes in from the right. And because the height of the two menus won't be the same, we'll animate that as well.

Now before we get started, feed. I'd just like to say this is a beginner friendly video, but we move at a very fast pace on this channel. So feel free to pause the video or slow down the playback speed as you follow along. The first thing we'll need is a React app. Assuming you have Node.

Js installed, open up the command line and run npx create react app, and of course, the name of our app is Facebook. To keep this demo simple, people. I'm going to delete everything that's not the index. Js, app. Js, or index.

Css files. The index. Js file is your initial entry point. I'll go ahead and remove the service worker stuff here, then you can ignore this file for the rest of the video. From there, I'm removing all the boilerplate code from the app JS file.

Feed. We'll be using functional React components in this video. When you see a function whose name starts with a capital letter, you can think of that as a component. The return value of a functional component is your UI or HTML or more specifically, JSX. JSX is not actually HTML, but it's a syntax extension for JavaScript that allows you to write HTML like templates in your components.

But before we get too deep into React, let's open up the index CSS file. The CSS in this video is pretty generic, feed, so feel free to use it with your favorite framework. I'm starting by defining some global CSS variables that we can think of as our theme. And I'm also defining a speed variable that represents the animation speed, which will come into play later in the video. Then below that, I'm overriding the default unordered list style.

And then for our link elements, I'll match them to the text color variable in our color scheme. That takes care of our initial setup. Now we're ready to start building the top navigation bar. Feed. React and especially functional components make it really easy to break your application down into a lot of small reusable pieces.

And this is a practice that we call component composition. Feed. In our app JS file, we'll define a new component named navbar, and it returns JSX inside these parentheses. We'll go ahead and add an HTML nav element with an unordered list inside of it. We can apply a CSS class to these elements using class name.

Notice how this is different than regular HTML, which is normally just class. Feed, and we'll apply class 4 navbar and navbar nav to make these elements easy to style. Now if we go up to the JSX for the app component, we can declare this navbar there. And notice how we declare it almost like a regular HTML element. Now I'm going to open up the CSS here on the right side, and we'll apply some styles to the navbar.

Feed. The nav bar is basically just a rectangle that sits at the top. We'll give it a fixed height based on our nav size variable and then some coloring and padding. Feed. The unordered list that sits inside the nav is the container for the children, which we'll set up as a flexible row.

We want it to take up 100% of the width and the height of the parent, and then we'll set the display property to flex. And we can have all the children start on the right hand side instead of the default left side by saying justify content flex end. Feed. Now at this point, we have some actual UI that we can take a look at. Go ahead and run npm start from the command line to serve your app.

It should open in the browser automatically, and you should see this horizontal gray bar up at the top. And now the question becomes, how do we add items or children inside the navbar? In React, Components can pass data and UI elements to each other using props. Add props as an argument to your function, and then you can reference it in your template. Feed.

Props has a built in property named children, and it will project or reference any UI elements that you pass in inside of the actual tags of that component. Feed. For example, if we go up to our navbar and add a list item inside of its tags, it will be rendered in the location that we called props dot children. So if we open up the browser, you should see the letter x here up in the top left corner. But this gives us a great opportunity to create a new component called a nav item.

Our nav item component will also take props and will set up a list item as its main element, and then we'll nest an a or link element inside of it. Feed. The a element represents the icon button, so we'll give it a CSS class accordingly. Now this time, instead of referencing props dot children, we're going to pass our own custom prop called an icon. Instead of adding UI elements inside of the tags, we reference our icon prop as we would with a regular HTML attribute.

So props to allow you to pass data from the parent to the child, similar to how you might pass an argument to a JavaScript function. Because remember, your React component is just a JavaScript function. For now, I'm just going to pass some emoji icons so we can focus on the CSS. Each nav item is a box that is slightly smaller than the nav bar itself. An easy way to manage its width is to calculate it dynamically.

So we'll take our nav size variable, which is 60 pixels, and then we'll multiply it by 0.08 or 80% with the calc function. Now each of these nav items should display their children directly in the center. We can easily do that with Flexbox by aligning items to the center and justifying the content to the center. Feed. So that gives us a box with its children in the middle.

But now we want an icon button with a circular shape. I'm going to scope a new CSS variable to this class called button size. Feed. It also uses the calc function to give us a size that is exactly 50% of the original navbar size. And now we can apply that value to the width and the height of this class.

Feed. And then to make the shape circular, we can apply a border radius of 50%, which creates a perfect circle. Now inside of this circle, we also want to center the children directly in the middle. So, again, we'll set up a flex container and align and justify everything to the center. If you open your app in the browser, you should now see these 3 icon buttons here at the top.

Feed. As an added touch, we might want to change the color slightly when these items are hovered over. An easy way to handle that is with a CSS transition. Feed. We'll apply it to the filter property and set it to a duration of 300 milliseconds.

Then we'll target the hover pseudo selector on the icon button, and we'll filter its brightness to 1.2 to make it slightly brighter as we hover over it. However, in the full demo and on Facebook, you'll notice that it's using SVG icons. You can find all the SVGs I used in the source code on GitHub. They live in this icons directory, but how do we use these SVG icons in React? It's actually very easy to use an SVG icon as a React component directly in your code.

Add an import statement to the top of the file that references the path to your SVG icon. View. You import a React component and then name it whatever you want using the as keyword. And then you can do the same thing for all of the other SVGs that you want to use in your code. Feed.

From there, we can go back down to our navbar, and instead of using an emoji, we'll use braces to pass in one of our SVG components directly. And now your icon buttons can handle both SVG graphics and emoji strings equally. But your SVGs don't inherit a size by default, so we'll want to go ahead and set a fixed width and height for them. Feed. And now if we preview things in the browser, we should have an icon now that is very similar to the actual Facebook UI.

And now we're ready for the fun part, feed, building an animated multilevel drop down menu. Now the reason we're not passing the icon as a direct child of a nav item is because some of our nav items might have a drop down menu, and we want that to serve as the children. We'll add a 4th nav item here with a caret icon, and our drop down will go inside of it. Now in order to open and close a drop down, our nav item will need to have some state, or in other words, some data that changes throughout the life cycle of the app. We can manage state in React using a hook called use state.

In our nav item component, we call the use state function, and it returns us with 2 values. The values are returned in an array, so we can destructure them as variables here using brackets. Features. The first value is the state, which in our case is called opened and is a Boolean value that tells us whether or not the drop down menu is open. Feed.

The second value is a function that you can use to change the state. We can also set a default value as the argument to use state, and, of course, we want the drop down to be closed by default. Feed. That sets up the initial state. But now we want the user to be able to change the state when they click on the nav item button.

We can do that by going down to our link element, and we'll add an on click event handler. When the user clicks a button, it will use the set open function that we got from useState, and it will flip the open value to the opposite of whatever it currently is. Feed. Putting a bang in front of a Boolean gives you its opposite value, and that can be useful for toggling things on and off. Okay.

So now the user has a way to toggle the state, but now we need to do something useful with the state. In our case, we want to show the drop down when the open state is set to true. Below the link, we'll add braces. Feed, and if the open property is true, then we'll show the props dot children. If the open state is false, then nothing will be shown here.

We can test things out by going to our nav item component, feed, adding a hello world, and you should see that appear when you click on the button. Obviously, it looks terrible, so let's make a drop down component to fix that. Feed. We'll add another function for a drop down menu, and we'll have it return a div with a class of drop down. Then we'll add our drop down menu as the child of the nav item.

Now similar to our navbar, a drop down has multiple drop down items. But in this example, I'm going to nest that component directly in the drop down menu. Feed. The drop down item will simply be a link with a class name of menu item, and then we'll pass in props dot children to control the text of that link. Feed.

Now you may have noticed in the demo that some of these links have an icon on the left and some have an icon on the right. We can handle that logic in way by adding slots for a left icon and a right icon. When you pass in a left icon or right icon prop, it'll be rendered. But if you leave it blank, then it just won't render anything at all. We can see it in use down here in the drop down.

A basic drop down item will just take some text as a child, feed. But if you want to show an icon on the left or right, you can also pass in the icon prop and pass it a component or emoji string. Now in order to get things looking right, let's go back to our CSS. The drop down menu on Facebook overlaps just slightly with the top nav bar, and we can achieve that effect by using absolute positioning. It It allows us to explicitly offset an element based on its container.

From the top of the parent navbar, we'll move the drop down down by 58 pixels. That means it'll overlap by 2 pixels with the top navbar which has a height of 60. We can give it a fixed width of 300 pixels and then we'll move it over to the left by translating it over the x axis by 45%. We'll give it some colors and padding, and we'll want to make sure the overflow property is set to hidden. Feed.

What this will do is hide any child elements if they overlap this container. That's important because in a minute here, we'll be sliding in multiple menus through this container. Feed. Now the drop down has multiple menu items. We'll set these up as flex containers that align their items to the center.

In the context of a row, that means vertical alignment. Now when a user hovers over a menu item, we want to animate the background color. So we'll go ahead and set up a transition for the background. Then we can target the menu items hover pseudo selector and change the background color to something a little bit lighter. As a final touch, we want the right icon in the row to be pushed all the way to the right side.

With Flexbox, you can set the left margin of the last item to auto and that will push it all the way to the right and everything else to the left. And now our drop down menu is starting to take shape. Feet. At this point, we have a fully functional single level drop down, but we require an animated multi level drop down. To help us along the way, we'll install a very popular package called react transition group.

It will help us control the conditional logic for rendering multiple menus and transitioning between them when they're added or removed from the application. Once installed, go ahead and import the CSS transition component from the package. Then we need to give our drop down menu some state to specify which menu is currently visible. We'll set the main menu as the default and then we'll also show a settings and animals menu as well. Now our active menu is the state or the name of the menu and set active menu is how we change it.

Now that we have state, we can animate elements in or out using CSS transition. We can go ahead and wrap our current drop down elements in the CSS transition component. Feed. It's looking for a prop of n, which when truthy, will render and animate its children into the UI. In other words, when the active menu equals feeds main, and we want to show the children inside of this component.

I'm also adding a second property called unmount on exit, which completely removes these children when they're not active. Feed. Next, we'll set a time out, which defines the duration of the animation. And the last prop we need to add here is class names, which we'll set to menu primary for this primary main menu. Now Now here's how the CSS transition actually works.

It looks for the first child element which we'll set up here as a div. Then when its in prop changes, it will add or remove CSS classes to this element based on the state of the animation, and it uses the class names prop to prefix those classes. CSS transition doesn't actually animate anything directly. Instead, it adds and removes classes based on the state of the animation, so you can handle the animations in your CSS. Notice how I'm setting up 4 different classes here.

Feed. Menu primary enter, enter active, exit, and exit active. When the in prop first becomes true, it will add the menu primary enter class to the div. Feed. After a time out of 500 milliseconds, it then adds the menu primary interactive class.

Now when the in prop becomes false, it does the exact opposite. It adds the exit class, then the exit active class. This means you can easily create an animation using CSS transitions. We want our main menu to slide in from left to right. So initially, we'll translate it to the left by a 110%, so it'll be completely invisible off to the left.

After 500 milliseconds, We'll bring the translate back to 0, so it'll be in its normal position. Then we can animate it using the transition property, using our speed variable, and a timing function of ease. Feed. As you can see here, CSS is doing the animation while React is toggling the classes for you. Now to animate out, we'll do basically the same thing just in the opposite direction.

We'll translate from 0 to a negative 110%. Now at this point, everything should be exactly the same. That's because we need a secondary menu to toggle to. Let's get started with that second menu by copying our CSS transition and pasting it directly under the existing one. Instead of checking the active menu feed.

For main, we'll check the active menu for settings. For class names, we'll use menu secondary because we want to set up different classes for this menu to slide from right to left. Now the classes work in exactly the same way. The only difference is that we're translating to positive a 110% versus negative a 110%. Feed.

The effect is that the secondary menu will be offset to the right and then it will slide in to the left. And that's all it takes to build the basic slide in slide out animation. Fee, but we are missing one piece of the puzzle, and that's a way for the user to activate or deactivate a menu. We have our set active menu function from use state. So we'll go ahead and bind that to the click event on the drop down item button.

But instead of hard coding a value here, we're going to look for a prop that's passed down from the parent component, feed, and we'll want to make sure that prop exists before we call the set active menu function. Now to get our demo working, we can go down to any drop down item and set the go to menu prop to whatever menu we wanna navigate to, which in our case will either be settings or main. And now if you open up your demo, you should have a functional multilevel drop down, feet, but we're not done quite yet. There's still some additional polish that we have to take care of. Go back to your demo and add a bunch of drop down items to one of the menus.

Feed. Notice how the height is not animated. It just snaps into place and totally ruins the entire animation. This happens because the old menu hasn't been completely removed from the DOM by the time the new menu is visible. What we need is a more dynamic way to manage the height.

Let's create some state for the height of the menu. Then we'll create a function called calculate height, feed, and this function takes a DOM element as its argument. That's because a DOM element has a property called offset height, which contains the actual height and pixels of that element. And now you might be wondering, where do we get this element and when do we call this function? Well, the CSS transition has life cycle hooks that we can tap into.

Fee. One of these hooks is on enter. It calls a callback as soon as the enter class is first added to the element, and it also provides the element as an argument, which means we can simply pass in our calc height function here as the prop value. That will recalculate the height of the menu. Now we just need to apply it as a style to the drop down itself.

We can go up to the style attribute and dynamically pass in the height from our state. And that leaves us with one final step to animate it. Go to the drop down class in your CSS and add a transition for the height. Now, when you go back to the demo, your drop down should magically shrink and grow based on the size of the current menu. And with that, I'm gonna go ahead and wrap things up there.

If this video helped you, please like and subscribe, and let me know what you wanna see next in the comments. Thanks for watching, and I will see you in the next one.
I don't log in to Facebook often, but the last time I did, I was super impressed by its simple, intuitive, and fast new UI.
In today's video, I'll show you how to reverse engineer some of its UI features, specifically the top navigation bar, its icon buttons, and this multi level animated drop down. We'll do it using HTML, CSS, and because I mentioned the word Facebook, I'm legally obligated to use React in this demo. In the following code tutorial, you'll learn how to create icon buttons with flexbox, features. You'll learn how to use CSS transforms to create sliding animations, and fundamental concepts in React, like component composition, hooks, and how to create CSS functions based on the state of your React application, and I'll throw in a bunch of other cool tips along the way. If you're new here, like and subscribe, and let me know if you want to see more beginner friendly UI tutorials like this in components. Before we get started, let's take a closer look at what we're building today. By the end of this video, you'll have several reusable React components that you can use for for navigation and drop downs.
animation
visualization
graphic design
At the top, we have a nav bar component where the children are nav items represented as icon buttons. Feet. These buttons have children that you can toggle on or off by clicking them. When we click the carrot, it renders our drop down component. It contains multiple drop down items, and the ones with a chevron can toggle to a secondary drop down menu.
children
Notice how the old menu slides out to the left and the new one comes in from the right. And because the height of the two menus won't be the same, we'll animate that as well. Now before we get started, feed. I'd just like to say this is a beginner friendly video, but we move at a very fast pace on this channel. So feel free to pause the video or slow down the playback speed as you follow along. The first thing we'll need is a React app.
multimedia
television
streaming
video gaming
media
entertainment
Assuming you have Node. Js installed, open up the command line and run npx create react app, and of course, the name of our app is Facebook. To keep this demo simple, people. I'm going to delete everything that's not the index. Js, app. Js, or index. Css files. The index. Js file is your initial entry point. I'll go ahead and remove the service worker stuff here, then you can ignore this file for the rest of the video. From there, I'm removing all the boilerplate code from the app JS file. Feed. We'll be using functional React components in this video. When you see a function whose name starts with a capital letter, you can think of that as a component. The return value of a functional component is your UI or HTML or more specifically, JSX. JSX is not actually HTML, but it's a syntax extension for JavaScript that allows you to write HTML like templates in your components. But before we get too deep into React, let's open up the index CSS file. The CSS in this video is pretty generic, feed, so feel free to use it with your favorite framework. I'm starting by defining some global CSS variables that we can think of as our theme. And I'm also defining a speed variable that represents the animation speed, which will come into play later in the video. Then below that, I'm overriding the default unordered list style. And then for our link elements, I'll match them to the text color variable in our color scheme.
That takes care of our initial setup. Now we're ready to start building the top navigation bar. Feed. React and especially functional components make it really easy to break your application down into a lot of small reusable pieces. And this is a practice that we call component composition. Feed.
software
In our app JS file, we'll define a new component named navbar, and it returns JSX inside these parentheses. We'll go ahead and add an HTML nav element with an unordered list inside of it. We can apply a CSS class to these elements using class name. Notice how this is different than regular HTML, which is normally just class. Feed, and we'll apply class 4 navbar and navbar nav to make these elements easy to style. Now if we go up to the JSX for the app component, we can declare this navbar there. And notice how we declare it almost like a regular HTML element. Now I'm going to open up the CSS here on the right side, and we'll apply some styles to the navbar. Feed. The nav bar is basically just a rectangle that sits at the top.
We'll give it a fixed height based on our nav size variable and then some coloring and padding. Feed. The unordered list that sits inside the nav is the container for the children, which we'll set up as a flexible row. We want it to take up 100% of the width and the height of the parent, and then we'll set the display property to flex.
children
And we can have all the children start on the right hand side instead of the default left side by saying justify content flex end. Feed. Now at this point, we have some actual UI that we can take a look at. Go ahead and run npm start from the command line to serve your app. It should open in the browser automatically, and you should see this horizontal gray bar up at the top. And now the question becomes, how do we add items or children inside the navbar? In React, Components can pass data and UI elements to each other using props. Add props as an argument to your function, and then you can reference it in your template.
Feed. Props has a built in property named children, and it will project or reference any UI elements that you pass in inside of the actual tags of that component. Feed. For example, if we go up to our navbar and add a list item inside of its tags, it will be rendered in the location that we called props dot children.
toys
children
So if we open up the browser, you should see the letter x here up in the top left corner. But this gives us a great opportunity to create a new component called a nav item.
Our nav item component will also take props and will set up a list item as its main element, and then we'll nest an a or link element inside of it. Feed. The a element represents the icon button, so we'll give it a CSS class accordingly. Now this time, instead of referencing props dot children, we're going to pass our own custom prop called an icon.
toys
Instead of adding UI elements inside of the tags, we reference our icon prop as we would with a regular HTML attribute. So props to allow you to pass data from the parent to the child, similar to how you might pass an argument to a JavaScript function. Because remember, your React component is just a JavaScript function. For now, I'm just going to pass some emoji icons so we can focus on the CSS. Each nav item is a box that is slightly smaller than the nav bar itself. An easy way to manage its width is to calculate it dynamically. So we'll take our nav size variable, which is 60 pixels, and then we'll multiply it by 0.08 or 80% with the calc function. Now each of these nav items should display their children directly in the center. We can easily do that with Flexbox by aligning items to the center and justifying the content to the center. Feed. So that gives us a box with its children in the middle. But now we want an icon button with a circular shape. I'm going to scope a new CSS variable to this class called button size. Feed. It also uses the calc function to give us a size that is exactly 50% of the original navbar size. And now we can apply that value to the width and the height of this class.
Feed. And then to make the shape circular, we can apply a border radius of 50%, which creates a perfect circle. Now inside of this circle, we also want to center the children directly in the middle. So, again, we'll set up a flex container and align and justify everything to the center.
geometry
If you open your app in the browser, you should now see these 3 icon buttons here at the top. Feed. As an added touch, we might want to change the color slightly when these items are hovered over. An easy way to handle that is with a CSS transition. Feed. We'll apply it to the filter property and set it to a duration of 300 milliseconds. Then we'll target the hover pseudo selector on the icon button, and we'll filter its brightness to 1.2 to make it slightly brighter as we hover over it. However, in the full demo and on Facebook, you'll notice that it's using SVG icons. You can find all the SVGs I used in the source code on GitHub. They live in this icons directory, but how do we use these SVG icons in React? It's actually very easy to use an SVG icon as a React component directly in your code. Add an import statement to the top of the file that references the path to your SVG icon. View. You import a React component and then name it whatever you want using the as keyword.
And then you can do the same thing for all of the other SVGs that you want to use in your code. Feed. From there, we can go back down to our navbar, and instead of using an emoji, we'll use braces to pass in one of our SVG components directly.
neural networks
And now your icon buttons can handle both SVG graphics and emoji strings equally. But your SVGs don't inherit a size by default, so we'll want to go ahead and set a fixed width and height for them. Feed. And now if we preview things in the browser, we should have an icon now that is very similar to the actual Facebook UI.
And now we're ready for the fun part, feed, building an animated multilevel drop down menu. Now the reason we're not passing the icon as a direct child of a nav item is because some of our nav items might have a drop down menu, and we want that to serve as the children.
toys
children
We'll add a 4th nav item here with a caret icon, and our drop down will go inside of it. Now in order to open and close a drop down, our nav item will need to have some state, or in other words, some data that changes throughout the life cycle of the app. We can manage state in React using a hook called use state. In our nav item component, we call the use state function, and it returns us with 2 values. The values are returned in an array, so we can destructure them as variables here using brackets. Features. The first value is the state, which in our case is called opened and is a Boolean value that tells us whether or not the drop down menu is open.
Feed. The second value is a function that you can use to change the state. We can also set a default value as the argument to use state, and, of course, we want the drop down to be closed by default. Feed. That sets up the initial state. But now we want the user to be able to change the state when they click on the nav item button.
systems
We can do that by going down to our link element, and we'll add an on click event handler. When the user clicks a button, it will use the set open function that we got from useState, and it will flip the open value to the opposite of whatever it currently is. Feed. Putting a bang in front of a Boolean gives you its opposite value, and that can be useful for toggling things on and off. Okay. So now the user has a way to toggle the state, but now we need to do something useful with the state. In our case, we want to show the drop down when the open state is set to true. Below the link, we'll add braces. Feed, and if the open property is true, then we'll show the props dot children. If the open state is false, then nothing will be shown here. We can test things out by going to our nav item component, feed, adding a hello world, and you should see that appear when you click on the button. Obviously, it looks terrible, so let's make a drop down component to fix that. Feed. We'll add another function for a drop down menu, and we'll have it return a div with a class of drop down. Then we'll add our drop down menu as the child of the nav item. Now similar to our navbar, a drop down has multiple drop down items. But in this example, I'm going to nest that component directly in the drop down menu. Feed. The drop down item will simply be a link with a class name of menu item, and then we'll pass in props dot children to control the text of that link. Feed. Now you may have noticed in the demo that some of these links have an icon on the left and some have an icon on the right. We can handle that logic in way by adding slots for a left icon and a right icon. When you pass in a left icon or right icon prop, it'll be rendered. But if you leave it blank, then it just won't render anything at all. We can see it in use down here in the drop down.
A basic drop down item will just take some text as a child, feed. But if you want to show an icon on the left or right, you can also pass in the icon prop and pass it a component or emoji string. Now in order to get things looking right, let's go back to our CSS.
children
The drop down menu on Facebook overlaps just slightly with the top nav bar, and we can achieve that effect by using absolute positioning. It It allows us to explicitly offset an element based on its container. From the top of the parent navbar, we'll move the drop down down by 58 pixels.
That means it'll overlap by 2 pixels with the top navbar which has a height of 60. We can give it a fixed width of 300 pixels and then we'll move it over to the left by translating it over the x axis by 45%. We'll give it some colors and padding, and we'll want to make sure the overflow property is set to hidden.
geometry
Feed. What this will do is hide any child elements if they overlap this container. That's important because in a minute here, we'll be sliding in multiple menus through this container. Feed. Now the drop down has multiple menu items.
We'll set these up as flex containers that align their items to the center. In the context of a row, that means vertical alignment. Now when a user hovers over a menu item, we want to animate the background color. So we'll go ahead and set up a transition for the background.
animation
Then we can target the menu items hover pseudo selector and change the background color to something a little bit lighter. As a final touch, we want the right icon in the row to be pushed all the way to the right side. With Flexbox, you can set the left margin of the last item to auto and that will push it all the way to the right and everything else to the left.
And now our drop down menu is starting to take shape. Feet. At this point, we have a fully functional single level drop down, but we require an animated multi level drop down. To help us along the way, we'll install a very popular package called react transition group. It will help us control the conditional logic for rendering multiple menus and transitioning between them when they're added or removed from the application.
animation
Once installed, go ahead and import the CSS transition component from the package. Then we need to give our drop down menu some state to specify which menu is currently visible. We'll set the main menu as the default and then we'll also show a settings and animals menu as well. Now our active menu is the state or the name of the menu and set active menu is how we change it.
Now that we have state, we can animate elements in or out using CSS transition. We can go ahead and wrap our current drop down elements in the CSS transition component. Feed. It's looking for a prop of n, which when truthy, will render and animate its children into the UI. In other words, when the active menu equals feeds main, and we want to show the children inside of this component. I'm also adding a second property called unmount on exit, which completely removes these children when they're not active. Feed. Next, we'll set a time out, which defines the duration of the animation. And the last prop we need to add here is class names, which we'll set to menu primary for this primary main menu.
animation
children
Now Now here's how the CSS transition actually works.
It looks for the first child element which we'll set up here as a div. Then when its in prop changes, it will add or remove CSS classes to this element based on the state of the animation, and it uses the class names prop to prefix those classes. CSS transition doesn't actually animate anything directly. Instead, it adds and removes classes based on the state of the animation, so you can handle the animations in your CSS. Notice how I'm setting up 4 different classes here. Feed. Menu primary enter, enter active, exit, and exit active. When the in prop first becomes true, it will add the menu primary enter class to the div.
animation
Feed. After a time out of 500 milliseconds, it then adds the menu primary interactive class. Now when the in prop becomes false, it does the exact opposite. It adds the exit class, then the exit active class. This means you can easily create an animation using CSS transitions. We want our main menu to slide in from left to right. So initially, we'll translate it to the left by a 110%, so it'll be completely invisible off to the left.
animation
After 500 milliseconds, We'll bring the translate back to 0, so it'll be in its normal position.
Then we can animate it using the transition property, using our speed variable, and a timing function of ease. Feed. As you can see here, CSS is doing the animation while React is toggling the classes for you. Now to animate out, we'll do basically the same thing just in the opposite direction.
animation
We'll translate from 0 to a negative 110%. Now at this point, everything should be exactly the same. That's because we need a secondary menu to toggle to. Let's get started with that second menu by copying our CSS transition and pasting it directly under the existing one. Instead of checking the active menu feed. For main, we'll check the active menu for settings. For class names, we'll use menu secondary because we want to set up different classes for this menu to slide from right to left. Now the classes work in exactly the same way. The only difference is that we're translating to positive a 110% versus negative a 110%. Feed. The effect is that the secondary menu will be offset to the right and then it will slide in to the left. And that's all it takes to build the basic slide in slide out animation. Fee, but we are missing one piece of the puzzle, and that's a way for the user to activate or deactivate a menu. We have our set active menu function from use state. So we'll go ahead and bind that to the click event on the drop down item button. But instead of hard coding a value here, we're going to look for a prop that's passed down from the parent component, feed, and we'll want to make sure that prop exists before we call the set active menu function. Now to get our demo working, we can go down to any drop down item and set the go to menu prop to whatever menu we wanna navigate to, which in our case will either be settings or main. And now if you open up your demo, you should have a functional multilevel drop down, feet, but we're not done quite yet. There's still some additional polish that we have to take care of.
Go back to your demo and add a bunch of drop down items to one of the menus. Feed. Notice how the height is not animated. It just snaps into place and totally ruins the entire animation. This happens because the old menu hasn't been completely removed from the DOM by the time the new menu is visible. What we need is a more dynamic way to manage the height. Let's create some state for the height of the menu.
animation
Then we'll create a function called calculate height, feed, and this function takes a DOM element as its argument. That's because a DOM element has a property called offset height, which contains the actual height and pixels of that element. And now you might be wondering, where do we get this element and when do we call this function? Well, the CSS transition has life cycle hooks that we can tap into. Fee. One of these hooks is on enter. It calls a callback as soon as the enter class is first added to the element, and it also provides the element as an argument, which means we can simply pass in our calc height function here as the prop value.
That will recalculate the height of the menu. Now we just need to apply it as a style to the drop down itself. We can go up to the style attribute and dynamically pass in the height from our state. And that leaves us with one final step to animate it. Go to the drop down class in your CSS and add a transition for the height. Now, when you go back to the demo, your drop down should magically shrink and grow based on the size of the current menu.
fashion
animation
And with that, I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and let me know what you wanna see next in the comments. Thanks for watching, and I will see you in the next one.
youtube
I don't log in to Facebook often, but the last time I did, I was super impressed by its simple, intuitive, and fast new UI. In today's video, I'll show you how to reverse engineer some of its UI features, specifically the top navigation bar, its icon buttons, and this multi level animated drop down. We'll do it using HTML, CSS, and because I mentioned the word Facebook, I'm legally obligated to use React in this demo. In the following code tutorial, you'll learn how to create icon buttons with flexbox, features. You'll learn how to use CSS transforms to create sliding animations, and fundamental concepts in React, like component composition, hooks, and how to create CSS functions based on the state of your React application, and I'll throw in a bunch of other cool tips along the way. If you're new here, like and subscribe, and let me know if you want to see more beginner friendly UI tutorials like this in components. Before we get started, let's take a closer look at what we're building today. By the end of this video, you'll have several reusable React components that you can use for for navigation and drop downs. At the top, we have a nav bar component where the children are nav items represented as icon buttons. Feet. These buttons have children that you can toggle on or off by clicking them. When we click the carrot, it renders our drop down component. It contains multiple drop down items, and the ones with a chevron can toggle to a secondary drop down menu. Notice how the old menu slides out to the left and the new one comes in from the right. And because the height of the two menus won't be the same, we'll animate that as well. Now before we get started, feed. I'd just like to say this is a beginner friendly video, but we move at a very fast pace on this channel. So feel free to pause the video or slow down the playback speed as you follow along. The first thing we'll need is a React app. Assuming you have Node. Js installed, open up the command line and run npx create react app, and of course, the name of our app is Facebook. To keep this demo simple, people. I'm going to delete everything that's not the index. Js, app. Js, or index. Css files. The index. Js file is your initial entry point. I'll go ahead and remove the service worker stuff here, then you can ignore this file for the rest of the video. From there, I'm removing all the boilerplate code from the app JS file. Feed. We'll be using functional React components in this video. When you see a function whose name starts with a capital letter, you can think of that as a component. The return value of a functional component is your UI or HTML or more specifically, JSX. JSX is not actually HTML, but it's a syntax extension for JavaScript that allows you to write HTML like templates in your components. But before we get too deep into React, let's open up the index CSS file. The CSS in this video is pretty generic, feed, so feel free to use it with your favorite framework. I'm starting by defining some global CSS variables that we can think of as our theme. And I'm also defining a speed variable that represents the animation speed, which will come into play later in the video. Then below that, I'm overriding the default unordered list style. And then for our link elements, I'll match them to the text color variable in our color scheme. That takes care of our initial setup. Now we're ready to start building the top navigation bar. Feed. React and especially functional components make it really easy to break your application down into a lot of small reusable pieces. And this is a practice that we call component composition. Feed. In our app JS file, we'll define a new component named navbar, and it returns JSX inside these parentheses. We'll go ahead and add an HTML nav element with an unordered list inside of it. We can apply a CSS class to these elements using class name. Notice how this is different than regular HTML, which is normally just class. Feed, and we'll apply class 4 navbar and navbar nav to make these elements easy to style. Now if we go up to the JSX for the app component, we can declare this navbar there. And notice how we declare it almost like a regular HTML element. Now I'm going to open up the CSS here on the right side, and we'll apply some styles to the navbar. Feed. The nav bar is basically just a rectangle that sits at the top. We'll give it a fixed height based on our nav size variable and then some coloring and padding. Feed. The unordered list that sits inside the nav is the container for the children, which we'll set up as a flexible row. We want it to take up 100% of the width and the height of the parent, and then we'll set the display property to flex. And we can have all the children start on the right hand side instead of the default left side by saying justify content flex end. Feed. Now at this point, we have some actual UI that we can take a look at. Go ahead and run npm start from the command line to serve your app. It should open in the browser automatically, and you should see this horizontal gray bar up at the top. And now the question becomes, how do we add items or children inside the navbar? In React, Components can pass data and UI elements to each other using props. Add props as an argument to your function, and then you can reference it in your template. Feed. Props has a built in property named children, and it will project or reference any UI elements that you pass in inside of the actual tags of that component. Feed. For example, if we go up to our navbar and add a list item inside of its tags, it will be rendered in the location that we called props dot children. So if we open up the browser, you should see the letter x here up in the top left corner. But this gives us a great opportunity to create a new component called a nav item. Our nav item component will also take props and will set up a list item as its main element, and then we'll nest an a or link element inside of it. Feed. The a element represents the icon button, so we'll give it a CSS class accordingly. Now this time, instead of referencing props dot children, we're going to pass our own custom prop called an icon. Instead of adding UI elements inside of the tags, we reference our icon prop as we would with a regular HTML attribute. So props to allow you to pass data from the parent to the child, similar to how you might pass an argument to a JavaScript function. Because remember, your React component is just a JavaScript function. For now, I'm just going to pass some emoji icons so we can focus on the CSS. Each nav item is a box that is slightly smaller than the nav bar itself. An easy way to manage its width is to calculate it dynamically. So we'll take our nav size variable, which is 60 pixels, and then we'll multiply it by 0.08 or 80% with the calc function. Now each of these nav items should display their children directly in the center. We can easily do that with Flexbox by aligning items to the center and justifying the content to the center. Feed. So that gives us a box with its children in the middle. But now we want an icon button with a circular shape. I'm going to scope a new CSS variable to this class called button size. Feed. It also uses the calc function to give us a size that is exactly 50% of the original navbar size. And now we can apply that value to the width and the height of this class. Feed. And then to make the shape circular, we can apply a border radius of 50%, which creates a perfect circle. Now inside of this circle, we also want to center the children directly in the middle. So, again, we'll set up a flex container and align and justify everything to the center. If you open your app in the browser, you should now see these 3 icon buttons here at the top. Feed. As an added touch, we might want to change the color slightly when these items are hovered over. An easy way to handle that is with a CSS transition. Feed. We'll apply it to the filter property and set it to a duration of 300 milliseconds. Then we'll target the hover pseudo selector on the icon button, and we'll filter its brightness to 1.2 to make it slightly brighter as we hover over it. However, in the full demo and on Facebook, you'll notice that it's using SVG icons. You can find all the SVGs I used in the source code on GitHub. They live in this icons directory, but how do we use these SVG icons in React? It's actually very easy to use an SVG icon as a React component directly in your code. Add an import statement to the top of the file that references the path to your SVG icon. View. You import a React component and then name it whatever you want using the as keyword. And then you can do the same thing for all of the other SVGs that you want to use in your code. Feed. From there, we can go back down to our navbar, and instead of using an emoji, we'll use braces to pass in one of our SVG components directly. And now your icon buttons can handle both SVG graphics and emoji strings equally. But your SVGs don't inherit a size by default, so we'll want to go ahead and set a fixed width and height for them. Feed. And now if we preview things in the browser, we should have an icon now that is very similar to the actual Facebook UI. And now we're ready for the fun part, feed, building an animated multilevel drop down menu. Now the reason we're not passing the icon as a direct child of a nav item is because some of our nav items might have a drop down menu, and we want that to serve as the children. We'll add a 4th nav item here with a caret icon, and our drop down will go inside of it. Now in order to open and close a drop down, our nav item will need to have some state, or in other words, some data that changes throughout the life cycle of the app. We can manage state in React using a hook called use state. In our nav item component, we call the use state function, and it returns us with 2 values. The values are returned in an array, so we can destructure them as variables here using brackets. Features. The first value is the state, which in our case is called opened and is a Boolean value that tells us whether or not the drop down menu is open. Feed. The second value is a function that you can use to change the state. We can also set a default value as the argument to use state, and, of course, we want the drop down to be closed by default. Feed. That sets up the initial state. But now we want the user to be able to change the state when they click on the nav item button. We can do that by going down to our link element, and we'll add an on click event handler. When the user clicks a button, it will use the set open function that we got from useState, and it will flip the open value to the opposite of whatever it currently is. Feed. Putting a bang in front of a Boolean gives you its opposite value, and that can be useful for toggling things on and off. Okay. So now the user has a way to toggle the state, but now we need to do something useful with the state. In our case, we want to show the drop down when the open state is set to true. Below the link, we'll add braces. Feed, and if the open property is true, then we'll show the props dot children. If the open state is false, then nothing will be shown here. We can test things out by going to our nav item component, feed, adding a hello world, and you should see that appear when you click on the button. Obviously, it looks terrible, so let's make a drop down component to fix that. Feed. We'll add another function for a drop down menu, and we'll have it return a div with a class of drop down. Then we'll add our drop down menu as the child of the nav item. Now similar to our navbar, a drop down has multiple drop down items. But in this example, I'm going to nest that component directly in the drop down menu. Feed. The drop down item will simply be a link with a class name of menu item, and then we'll pass in props dot children to control the text of that link. Feed. Now you may have noticed in the demo that some of these links have an icon on the left and some have an icon on the right. We can handle that logic in way by adding slots for a left icon and a right icon. When you pass in a left icon or right icon prop, it'll be rendered. But if you leave it blank, then it just won't render anything at all. We can see it in use down here in the drop down. A basic drop down item will just take some text as a child, feed. But if you want to show an icon on the left or right, you can also pass in the icon prop and pass it a component or emoji string. Now in order to get things looking right, let's go back to our CSS. The drop down menu on Facebook overlaps just slightly with the top nav bar, and we can achieve that effect by using absolute positioning. It It allows us to explicitly offset an element based on its container. From the top of the parent navbar, we'll move the drop down down by 58 pixels. That means it'll overlap by 2 pixels with the top navbar which has a height of 60. We can give it a fixed width of 300 pixels and then we'll move it over to the left by translating it over the x axis by 45%. We'll give it some colors and padding, and we'll want to make sure the overflow property is set to hidden. Feed. What this will do is hide any child elements if they overlap this container. That's important because in a minute here, we'll be sliding in multiple menus through this container. Feed. Now the drop down has multiple menu items. We'll set these up as flex containers that align their items to the center. In the context of a row, that means vertical alignment. Now when a user hovers over a menu item, we want to animate the background color. So we'll go ahead and set up a transition for the background. Then we can target the menu items hover pseudo selector and change the background color to something a little bit lighter. As a final touch, we want the right icon in the row to be pushed all the way to the right side. With Flexbox, you can set the left margin of the last item to auto and that will push it all the way to the right and everything else to the left. And now our drop down menu is starting to take shape. Feet. At this point, we have a fully functional single level drop down, but we require an animated multi level drop down. To help us along the way, we'll install a very popular package called react transition group. It will help us control the conditional logic for rendering multiple menus and transitioning between them when they're added or removed from the application. Once installed, go ahead and import the CSS transition component from the package. Then we need to give our drop down menu some state to specify which menu is currently visible. We'll set the main menu as the default and then we'll also show a settings and animals menu as well. Now our active menu is the state or the name of the menu and set active menu is how we change it. Now that we have state, we can animate elements in or out using CSS transition. We can go ahead and wrap our current drop down elements in the CSS transition component. Feed. It's looking for a prop of n, which when truthy, will render and animate its children into the UI. In other words, when the active menu equals feeds main, and we want to show the children inside of this component. I'm also adding a second property called unmount on exit, which completely removes these children when they're not active. Feed. Next, we'll set a time out, which defines the duration of the animation. And the last prop we need to add here is class names, which we'll set to menu primary for this primary main menu. Now Now here's how the CSS transition actually works. It looks for the first child element which we'll set up here as a div. Then when its in prop changes, it will add or remove CSS classes to this element based on the state of the animation, and it uses the class names prop to prefix those classes. CSS transition doesn't actually animate anything directly. Instead, it adds and removes classes based on the state of the animation, so you can handle the animations in your CSS. Notice how I'm setting up 4 different classes here. Feed. Menu primary enter, enter active, exit, and exit active. When the in prop first becomes true, it will add the menu primary enter class to the div. Feed. After a time out of 500 milliseconds, it then adds the menu primary interactive class. Now when the in prop becomes false, it does the exact opposite. It adds the exit class, then the exit active class. This means you can easily create an animation using CSS transitions. We want our main menu to slide in from left to right. So initially, we'll translate it to the left by a 110%, so it'll be completely invisible off to the left. After 500 milliseconds, We'll bring the translate back to 0, so it'll be in its normal position. Then we can animate it using the transition property, using our speed variable, and a timing function of ease. Feed. As you can see here, CSS is doing the animation while React is toggling the classes for you. Now to animate out, we'll do basically the same thing just in the opposite direction. We'll translate from 0 to a negative 110%. Now at this point, everything should be exactly the same. That's because we need a secondary menu to toggle to. Let's get started with that second menu by copying our CSS transition and pasting it directly under the existing one. Instead of checking the active menu feed. For main, we'll check the active menu for settings. For class names, we'll use menu secondary because we want to set up different classes for this menu to slide from right to left. Now the classes work in exactly the same way. The only difference is that we're translating to positive a 110% versus negative a 110%. Feed. The effect is that the secondary menu will be offset to the right and then it will slide in to the left. And that's all it takes to build the basic slide in slide out animation. Fee, but we are missing one piece of the puzzle, and that's a way for the user to activate or deactivate a menu. We have our set active menu function from use state. So we'll go ahead and bind that to the click event on the drop down item button. But instead of hard coding a value here, we're going to look for a prop that's passed down from the parent component, feed, and we'll want to make sure that prop exists before we call the set active menu function. Now to get our demo working, we can go down to any drop down item and set the go to menu prop to whatever menu we wanna navigate to, which in our case will either be settings or main. And now if you open up your demo, you should have a functional multilevel drop down, feet, but we're not done quite yet. There's still some additional polish that we have to take care of. Go back to your demo and add a bunch of drop down items to one of the menus. Feed. Notice how the height is not animated. It just snaps into place and totally ruins the entire animation. This happens because the old menu hasn't been completely removed from the DOM by the time the new menu is visible. What we need is a more dynamic way to manage the height. Let's create some state for the height of the menu. Then we'll create a function called calculate height, feed, and this function takes a DOM element as its argument. That's because a DOM element has a property called offset height, which contains the actual height and pixels of that element. And now you might be wondering, where do we get this element and when do we call this function? Well, the CSS transition has life cycle hooks that we can tap into. Fee. One of these hooks is on enter. It calls a callback as soon as the enter class is first added to the element, and it also provides the element as an argument, which means we can simply pass in our calc height function here as the prop value. That will recalculate the height of the menu. Now we just need to apply it as a style to the drop down itself. We can go up to the style attribute and dynamically pass in the height from our state. And that leaves us with one final step to animate it. Go to the drop down class in your CSS and add a transition for the height. Now, when you go back to the demo, your drop down should magically shrink and grow based on the size of the current menu. And with that, I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and let me know what you wanna see next in the comments. Thanks for watching, and I will see you in the next one.
I
i
don't
don't
log
log
in
in
to
to
Facebook
facebook
often,
often
but
but
the
the
last
last
time
time
I
i
did,
did
I
i
was
was
super
super
impressed
impressed
by
by
its
its
simple,
simple
intuitive,
intuitive
and
and
fast
fast
new
new
UI.
ui
In
in
today's
today's
video,
video
I'll
i'll
show
show
you
you
how
how
to
to
reverse
reverse
engineer
engineer
some
some
of
of
its
its
UI
ui
features,
features
specifically
specifically
the
the
top
top
navigation
navigation
bar,
bar
its
its
icon
icon
buttons,
buttons
and
and
this
this
multi
multi
level
level
animated
animated
drop
drop
down.
down
We'll
we'll
do
do
it
it
using
using
HTML,
html
CSS,
css
and
and
because
because
I
i
mentioned
mentioned
the
the
word
word
Facebook,
facebook
I'm
i'm
legally
legally
obligated
obligated
to
to
use
use
React
react
in
in
this
this
demo.
demo
In
in
the
the
following
following
code
code
tutorial,
tutorial
you'll
you'll
learn
learn
how
how
to
to
create
create
icon
icon
buttons
buttons
with
with
flexbox,
flexbox
features.
features
You'll
you'll
learn
learn
how
how
to
to
use
use
CSS
css
transforms
transforms
to
to
create
create
sliding
sliding
animations,
animations
and
and
fundamental
fundamental
concepts
concepts
in
in
React,
react
like
like
component
component
composition,
composition
hooks,
hooks
and
and
how
how
to
to
create
create
CSS
css
functions
functions
based
based
on
on
the
the
state
state
of
of
your
your
React
react
application,
application
and
and
I'll
i'll
throw
throw
in
in
a
a
bunch
bunch
of
of
other
other
cool
cool
tips
tips
along
along
the
the
way.
way
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
let
let
me
me
know
know
if
if
you
you
want
want
to
to
see
see
more
more
beginner
beginner
friendly
friendly
UI
ui
tutorials
tutorials
like
like
this
this
in
in
components.
components
Before
before
we
we
get
get
started,
started
let's
let's
take
take
a
a
closer
closer
look
look
at
at
what
what
we're
we're
building
building
today.
today
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
have
have
several
several
reusable
reusable
React
react
components
components
that
that
you
you
can
can
use
use
for
for
for
for
navigation
navigation
and
and
drop
drop
downs.
downs
At
at
the
the
top,
top
we
we
have
have
a
a
nav
nav
bar
bar
component
component
where
where
the
the
children
children
are
are
nav
nav
items
items
represented
represented
as
as
icon
icon
buttons.
buttons
Feet.
feet
These
these
buttons
buttons
have
have
children
children
that
that
you
you
can
can
toggle
toggle
on
on
or
or
off
off
by
by
clicking
clicking
them.
them
When
when
we
we
click
click
the
the
carrot,
carrot
it
it
renders
renders
our
our
drop
drop
down
down
component.
component
It
it
contains
contains
multiple
multiple
drop
drop
down
down
items,
items
and
and
the
the
ones
ones
with
with
a
a
chevron
chevron
can
can
toggle
toggle
to
to
a
a
secondary
secondary
drop
drop
down
down
menu.
menu
Notice
notice
how
how
the
the
old
old
menu
menu
slides
slides
out
out
to
to
the
the
left
left
and
and
the
the
new
new
one
one
comes
comes
in
in
from
from
the
the
right.
right
And
and
because
because
the
the
height
height
of
of
the
the
two
two
menus
menus
won't
won't
be
be
the
the
same,
same
we'll
we'll
animate
animate
that
that
as
as
well.
well
Now
now
before
before
we
we
get
get
started,
started
feed.
feed
I'd
i'd
just
just
like
like
to
to
say
say
this
this
is
is
a
a
beginner
beginner
friendly
friendly
video,
video
but
but
we
we
move
move
at
at
a
a
very
very
fast
fast
pace
pace
on
on
this
this
channel.
channel
So
so
feel
feel
free
free
to
to
pause
pause
the
the
video
video
or
or
slow
slow
down
down
the
the
playback
playback
speed
speed
as
as
you
you
follow
follow
along.
along
The
the
first
first
thing
thing
we'll
we'll
need
need
is
is
a
a
React
react
app.
app
Assuming
assuming
you
you
have
have
Node.
node
Js
js
installed,
installed
open
open
up
up
the
the
command
command
line
line
and
and
run
run
npx
npx
create
create
react
react
app,
app
and
and
of
of
course,
course
the
the
name
name
of
of
our
our
app
app
is
is
Facebook.
facebook
To
to
keep
keep
this
this
demo
demo
simple,
simple
people.
people
I'm
i'm
going
going
to
to
delete
delete
everything
everything
that's
that's
not
not
the
the
index.
index
Js,
js
app.
app
Js,
js
or
or
index.
index
Css
css
files.
files
The
the
index.
index
Js
js
file
file
is
is
your
your
initial
initial
entry
entry
point.
point
I'll
i'll
go
go
ahead
ahead
and
and
remove
remove
the
the
service
service
worker
worker
stuff
stuff
here,
here
then
then
you
you
can
can
ignore
ignore
this
this
file
file
for
for
the
the
rest
rest
of
of
the
the
video.
video
From
from
there,
there
I'm
i'm
removing
removing
all
all
the
the
boilerplate
boilerplate
code
code
from
from
the
the
app
app
JS
js
file.
file
Feed.
feed
We'll
we'll
be
be
using
using
functional
functional
React
react
components
components
in
in
this
this
video.
video
When
when
you
you
see
see
a
a
function
function
whose
whose
name
name
starts
starts
with
with
a
a
capital
capital
letter,
letter
you
you
can
can
think
think
of
of
that
that
as
as
a
a
component.
component
The
the
return
return
value
value
of
of
a
a
functional
functional
component
component
is
is
your
your
UI
ui
or
or
HTML
html
or
or
more
more
specifically,
specifically
JSX.
jsx
JSX
jsx
is
is
not
not
actually
actually
HTML,
html
but
but
it's
it's
a
a
syntax
syntax
extension
extension
for
for
JavaScript
javascript
that
that
allows
allows
you
you
to
to
write
write
HTML
html
like
like
templates
templates
in
in
your
your
components.
components
But
but
before
before
we
we
get
get
too
too
deep
deep
into
into
React,
react
let's
let's
open
open
up
up
the
the
index
index
CSS
css
file.
file
The
the
CSS
css
in
in
this
this
video
video
is
is
pretty
pretty
generic,
generic
feed,
feed
so
so
feel
feel
free
free
to
to
use
use
it
it
with
with
your
your
favorite
favorite
framework.
framework
I'm
i'm
starting
starting
by
by
defining
defining
some
some
global
global
CSS
css
variables
variables
that
that
we
we
can
can
think
think
of
of
as
as
our
our
theme.
theme
And
and
I'm
i'm
also
also
defining
defining
a
a
speed
speed
variable
variable
that
that
represents
represents
the
the
animation
animation
speed,
speed
which
which
will
will
come
come
into
into
play
play
later
later
in
in
the
the
video.
video
Then
then
below
below
that,
that
I'm
i'm
overriding
overriding
the
the
default
default
unordered
unordered
list
list
style.
style
And
and
then
then
for
for
our
our
link
link
elements,
elements
I'll
i'll
match
match
them
them
to
to
the
the
text
text
color
color
variable
variable
in
in
our
our
color
color
scheme.
scheme
That
that
takes
takes
care
care
of
of
our
our
initial
initial
setup.
setup
Now
now
we're
we're
ready
ready
to
to
start
start
building
building
the
the
top
top
navigation
navigation
bar.
bar
Feed.
feed
React
react
and
and
especially
especially
functional
functional
components
components
make
make
it
it
really
really
easy
easy
to
to
break
break
your
your
application
application
down
down
into
into
a
a
lot
lot
of
of
small
small
reusable
reusable
pieces.
pieces
And
and
this
this
is
is
a
a
practice
practice
that
that
we
we
call
call
component
component
composition.
composition
Feed.
feed
In
in
our
our
app
app
JS
js
file,
file
we'll
we'll
define
define
a
a
new
new
component
component
named
named
navbar,
navbar
and
and
it
it
returns
returns
JSX
jsx
inside
inside
these
these
parentheses.
parentheses
We'll
we'll
go
go
ahead
ahead
and
and
add
add
an
an
HTML
html
nav
nav
element
element
with
with
an
an
unordered
unordered
list
list
inside
inside
of
of
it.
it
We
we
can
can
apply
apply
a
a
CSS
css
class
class
to
to
these
these
elements
elements
using
using
class
class
name.
name
Notice
notice
how
how
this
this
is
is
different
different
than
than
regular
regular
HTML,
html
which
which
is
is
normally
normally
just
just
class.
class
Feed,
feed
and
and
we'll
we'll
apply
apply
class
class
4
4
navbar
navbar
and
and
navbar
navbar
nav
nav
to
to
make
make
these
these
elements
elements
easy
easy
to
to
style.
style
Now
now
if
if
we
we
go
go
up
up
to
to
the
the
JSX
jsx
for
for
the
the
app
app
component,
component
we
we
can
can
declare
declare
this
this
navbar
navbar
there.
there
And
and
notice
notice
how
how
we
we
declare
declare
it
it
almost
almost
like
like
a
a
regular
regular
HTML
html
element.
element
Now
now
I'm
i'm
going
going
to
to
open
open
up
up
the
the
CSS
css
here
here
on
on
the
the
right
right
side,
side
and
and
we'll
we'll
apply
apply
some
some
styles
styles
to
to
the
the
navbar.
navbar
Feed.
feed
The
the
nav
nav
bar
bar
is
is
basically
basically
just
just
a
a
rectangle
rectangle
that
that
sits
sits
at
at
the
the
top.
top
We'll
we'll
give
give
it
it
a
a
fixed
fixed
height
height
based
based
on
on
our
our
nav
nav
size
size
variable
variable
and
and
then
then
some
some
coloring
coloring
and
and
padding.
padding
Feed.
feed
The
the
unordered
unordered
list
list
that
that
sits
sits
inside
inside
the
the
nav
nav
is
is
the
the
container
container
for
for
the
the
children,
children
which
which
we'll
we'll
set
set
up
up
as
as
a
a
flexible
flexible
row.
row
We
we
want
want
it
it
to
to
take
take
up
up
100%
100%
of
of
the
the
width
width
and
and
the
the
height
height
of
of
the
the
parent,
parent
and
and
then
then
we'll
we'll
set
set
the
the
display
display
property
property
to
to
flex.
flex
And
and
we
we
can
can
have
have
all
all
the
the
children
children
start
start
on
on
the
the
right
right
hand
hand
side
side
instead
instead
of
of
the
the
default
default
left
left
side
side
by
by
saying
saying
justify
justify
content
content
flex
flex
end.
end
Feed.
feed
Now
now
at
at
this
this
point,
point
we
we
have
have
some
some
actual
actual
UI
ui
that
that
we
we
can
can
take
take
a
a
look
look
at.
at
Go
go
ahead
ahead
and
and
run
run
npm
npm
start
start
from
from
the
the
command
command
line
line
to
to
serve
serve
your
your
app.
app
It
it
should
should
open
open
in
in
the
the
browser
browser
automatically,
automatically
and
and
you
you
should
should
see
see
this
this
horizontal
horizontal
gray
gray
bar
bar
up
up
at
at
the
the
top.
top
And
and
now
now
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
add
add
items
items
or
or
children
children
inside
inside
the
the
navbar?
navbar
In
in
React,
react
Components
components
can
can
pass
pass
data
data
and
and
UI
ui
elements
elements
to
to
each
each
other
other
using
using
props.
props
Add
add
props
props
as
as
an
an
argument
argument
to
to
your
your
function,
function
and
and
then
then
you
you
can
can
reference
reference
it
it
in
in
your
your
template.
template
Feed.
feed
Props
props
has
has
a
a
built
built
in
in
property
property
named
named
children,
children
and
and
it
it
will
will
project
project
or
or
reference
reference
any
any
UI
ui
elements
elements
that
that
you
you
pass
pass
in
in
inside
inside
of
of
the
the
actual
actual
tags
tags
of
of
that
that
component.
component
Feed.
feed
For
for
example,
example
if
if
we
we
go
go
up
up
to
to
our
our
navbar
navbar
and
and
add
add
a
a
list
list
item
item
inside
inside
of
of
its
its
tags,
tags
it
it
will
will
be
be
rendered
rendered
in
in
the
the
location
location
that
that
we
we
called
called
props
props
dot
dot
children.
children
So
so
if
if
we
we
open
open
up
up
the
the
browser,
browser
you
you
should
should
see
see
the
the
letter
letter
x
x
here
here
up
up
in
in
the
the
top
top
left
left
corner.
corner
But
but
this
this
gives
gives
us
us
a
a
great
great
opportunity
opportunity
to
to
create
create
a
a
new
new
component
component
called
called
a
a
nav
nav
item.
item
Our
our
nav
nav
item
item
component
component
will
will
also
also
take
take
props
props
and
and
will
will
set
set
up
up
a
a
list
list
item
item
as
as
its
its
main
main
element,
element
and
and
then
then
we'll
we'll
nest
nest
an
an
a
a
or
or
link
link
element
element
inside
inside
of
of
it.
it
Feed.
feed
The
the
a
a
element
element
represents
represents
the
the
icon
icon
button,
button
so
so
we'll
we'll
give
give
it
it
a
a
CSS
css
class
class
accordingly.
accordingly
Now
now
this
this
time,
time
instead
instead
of
of
referencing
referencing
props
props
dot
dot
children,
children
we're
we're
going
going
to
to
pass
pass
our
our
own
own
custom
custom
prop
prop
called
called
an
an
icon.
icon
Instead
instead
of
of
adding
adding
UI
ui
elements
elements
inside
inside
of
of
the
the
tags,
tags
we
we
reference
reference
our
our
icon
icon
prop
prop
as
as
we
we
would
would
with
with
a
a
regular
regular
HTML
html
attribute.
attribute
So
so
props
props
to
to
allow
allow
you
you
to
to
pass
pass
data
data
from
from
the
the
parent
parent
to
to
the
the
child,
child
similar
similar
to
to
how
how
you
you
might
might
pass
pass
an
an
argument
argument
to
to
a
a
JavaScript
javascript
function.
function
Because
because
remember,
remember
your
your
React
react
component
component
is
is
just
just
a
a
JavaScript
javascript
function.
function
For
for
now,
now
I'm
i'm
just
just
going
going
to
to
pass
pass
some
some
emoji
emoji
icons
icons
so
so
we
we
can
can
focus
focus
on
on
the
the
CSS.
css
Each
each
nav
nav
item
item
is
is
a
a
box
box
that
that
is
is
slightly
slightly
smaller
smaller
than
than
the
the
nav
nav
bar
bar
itself.
itself
An
an
easy
easy
way
way
to
to
manage
manage
its
its
width
width
is
is
to
to
calculate
calculate
it
it
dynamically.
dynamically
So
so
we'll
we'll
take
take
our
our
nav
nav
size
size
variable,
variable
which
which
is
is
60
60
pixels,
pixels
and
and
then
then
we'll
we'll
multiply
multiply
it
it
by
by
0.08
0.08
or
or
80%
80%
with
with
the
the
calc
calc
function.
function
Now
now
each
each
of
of
these
these
nav
nav
items
items
should
should
display
display
their
their
children
children
directly
directly
in
in
the
the
center.
center
We
we
can
can
easily
easily
do
do
that
that
with
with
Flexbox
flexbox
by
by
aligning
aligning
items
items
to
to
the
the
center
center
and
and
justifying
justifying
the
the
content
content
to
to
the
the
center.
center
Feed.
feed
So
so
that
that
gives
gives
us
us
a
a
box
box
with
with
its
its
children
children
in
in
the
the
middle.
middle
But
but
now
now
we
we
want
want
an
an
icon
icon
button
button
with
with
a
a
circular
circular
shape.
shape
I'm
i'm
going
going
to
to
scope
scope
a
a
new
new
CSS
css
variable
variable
to
to
this
this
class
class
called
called
button
button
size.
size
Feed.
feed
It
it
also
also
uses
uses
the
the
calc
calc
function
function
to
to
give
give
us
us
a
a
size
size
that
that
is
is
exactly
exactly
50%
50%
of
of
the
the
original
original
navbar
navbar
size.
size
And
and
now
now
we
we
can
can
apply
apply
that
that
value
value
to
to
the
the
width
width
and
and
the
the
height
height
of
of
this
this
class.
class
Feed.
feed
And
and
then
then
to
to
make
make
the
the
shape
shape
circular,
circular
we
we
can
can
apply
apply
a
a
border
border
radius
radius
of
of
50%,
50%
which
which
creates
creates
a
a
perfect
perfect
circle.
circle
Now
now
inside
inside
of
of
this
this
circle,
circle
we
we
also
also
want
want
to
to
center
center
the
the
children
children
directly
directly
in
in
the
the
middle.
middle
So,
so
again,
again
we'll
we'll
set
set
up
up
a
a
flex
flex
container
container
and
and
align
align
and
and
justify
justify
everything
everything
to
to
the
the
center.
center
If
if
you
you
open
open
your
your
app
app
in
in
the
the
browser,
browser
you
you
should
should
now
now
see
see
these
these
3
3
icon
icon
buttons
buttons
here
here
at
at
the
the
top.
top
Feed.
feed
As
as
an
an
added
added
touch,
touch
we
we
might
might
want
want
to
to
change
change
the
the
color
color
slightly
slightly
when
when
these
these
items
items
are
are
hovered
hovered
over.
over
An
an
easy
easy
way
way
to
to
handle
handle
that
that
is
is
with
with
a
a
CSS
css
transition.
transition
Feed.
feed
We'll
we'll
apply
apply
it
it
to
to
the
the
filter
filter
property
property
and
and
set
set
it
it
to
to
a
a
duration
duration
of
of
300
300
milliseconds.
milliseconds
Then
then
we'll
we'll
target
target
the
the
hover
hover
pseudo
pseudo
selector
selector
on
on
the
the
icon
icon
button,
button
and
and
we'll
we'll
filter
filter
its
its
brightness
brightness
to
to
1.2
1.2
to
to
make
make
it
it
slightly
slightly
brighter
brighter
as
as
we
we
hover
hover
over
over
it.
it
However,
however
in
in
the
the
full
full
demo
demo
and
and
on
on
Facebook,
facebook
you'll
you'll
notice
notice
that
that
it's
it's
using
using
SVG
svg
icons.
icons
You
you
can
can
find
find
all
all
the
the
SVGs
svgs
I
i
used
used
in
in
the
the
source
source
code
code
on
on
GitHub.
github
They
they
live
live
in
in
this
this
icons
icons
directory,
directory
but
but
how
how
do
do
we
we
use
use
these
these
SVG
svg
icons
icons
in
in
React?
react
It's
it's
actually
actually
very
very
easy
easy
to
to
use
use
an
an
SVG
svg
icon
icon
as
as
a
a
React
react
component
component
directly
directly
in
in
your
your
code.
code
Add
add
an
an
import
import
statement
statement
to
to
the
the
top
top
of
of
the
the
file
file
that
that
references
references
the
the
path
path
to
to
your
your
SVG
svg
icon.
icon
View.
view
You
you
import
import
a
a
React
react
component
component
and
and
then
then
name
name
it
it
whatever
whatever
you
you
want
want
using
using
the
the
as
as
keyword.
keyword
And
and
then
then
you
you
can
can
do
do
the
the
same
same
thing
thing
for
for
all
all
of
of
the
the
other
other
SVGs
svgs
that
that
you
you
want
want
to
to
use
use
in
in
your
your
code.
code
Feed.
feed
From
from
there,
there
we
we
can
can
go
go
back
back
down
down
to
to
our
our
navbar,
navbar
and
and
instead
instead
of
of
using
using
an
an
emoji,
emoji
we'll
we'll
use
use
braces
braces
to
to
pass
pass
in
in
one
one
of
of
our
our
SVG
svg
components
components
directly.
directly
And
and
now
now
your
your
icon
icon
buttons
buttons
can
can
handle
handle
both
both
SVG
svg
graphics
graphics
and
and
emoji
emoji
strings
strings
equally.
equally
But
but
your
your
SVGs
svgs
don't
don't
inherit
inherit
a
a
size
size
by
by
default,
default
so
so
we'll
we'll
want
want
to
to
go
go
ahead
ahead
and
and
set
set
a
a
fixed
fixed
width
width
and
and
height
height
for
for
them.
them
Feed.
feed
And
and
now
now
if
if
we
we
preview
preview
things
things
in
in
the
the
browser,
browser
we
we
should
should
have
have
an
an
icon
icon
now
now
that
that
is
is
very
very
similar
similar
to
to
the
the
actual
actual
Facebook
facebook
UI.
ui
And
and
now
now
we're
we're
ready
ready
for
for
the
the
fun
fun
part,
part
feed,
feed
building
building
an
an
animated
animated
multilevel
multilevel
drop
drop
down
down
menu.
menu
Now
now
the
the
reason
reason
we're
we're
not
not
passing
passing
the
the
icon
icon
as
as
a
a
direct
direct
child
child
of
of
a
a
nav
nav
item
item
is
is
because
because
some
some
of
of
our
our
nav
nav
items
items
might
might
have
have
a
a
drop
drop
down
down
menu,
menu
and
and
we
we
want
want
that
that
to
to
serve
serve
as
as
the
the
children.
children
We'll
we'll
add
add
a
a
4th
4th
nav
nav
item
item
here
here
with
with
a
a
caret
caret
icon,
icon
and
and
our
our
drop
drop
down
down
will
will
go
go
inside
inside
of
of
it.
it
Now
now
in
in
order
order
to
to
open
open
and
and
close
close
a
a
drop
drop
down,
down
our
our
nav
nav
item
item
will
will
need
need
to
to
have
have
some
some
state,
state
or
or
in
in
other
other
words,
words
some
some
data
data
that
that
changes
changes
throughout
throughout
the
the
life
life
cycle
cycle
of
of
the
the
app.
app
We
we
can
can
manage
manage
state
state
in
in
React
react
using
using
a
a
hook
hook
called
called
use
use
state.
state
In
in
our
our
nav
nav
item
item
component,
component
we
we
call
call
the
the
use
use
state
state
function,
function
and
and
it
it
returns
returns
us
us
with
with
2
2
values.
values
The
the
values
values
are
are
returned
returned
in
in
an
an
array,
array
so
so
we
we
can
can
destructure
destructure
them
them
as
as
variables
variables
here
here
using
using
brackets.
brackets
Features.
features
The
the
first
first
value
value
is
is
the
the
state,
state
which
which
in
in
our
our
case
case
is
is
called
called
opened
opened
and
and
is
is
a
a
Boolean
boolean
value
value
that
that
tells
tells
us
us
whether
whether
or
or
not
not
the
the
drop
drop
down
down
menu
menu
is
is
open.
open
Feed.
feed
The
the
second
second
value
value
is
is
a
a
function
function
that
that
you
you
can
can
use
use
to
to
change
change
the
the
state.
state
We
we
can
can
also
also
set
set
a
a
default
default
value
value
as
as
the
the
argument
argument
to
to
use
use
state,
state
and,
and
of
of
course,
course
we
we
want
want
the
the
drop
drop
down
down
to
to
be
be
closed
closed
by
by
default.
default
Feed.
feed
That
that
sets
sets
up
up
the
the
initial
initial
state.
state
But
but
now
now
we
we
want
want
the
the
user
user
to
to
be
be
able
able
to
to
change
change
the
the
state
state
when
when
they
they
click
click
on
on
the
the
nav
nav
item
item
button.
button
We
we
can
can
do
do
that
that
by
by
going
going
down
down
to
to
our
our
link
link
element,
element
and
and
we'll
we'll
add
add
an
an
on
on
click
click
event
event
handler.
handler
When
when
the
the
user
user
clicks
clicks
a
a
button,
button
it
it
will
will
use
use
the
the
set
set
open
open
function
function
that
that
we
we
got
got
from
from
useState,
usestate
and
and
it
it
will
will
flip
flip
the
the
open
open
value
value
to
to
the
the
opposite
opposite
of
of
whatever
whatever
it
it
currently
currently
is.
is
Feed.
feed
Putting
putting
a
a
bang
bang
in
in
front
front
of
of
a
a
Boolean
boolean
gives
gives
you
you
its
its
opposite
opposite
value,
value
and
and
that
that
can
can
be
be
useful
useful
for
for
toggling
toggling
things
things
on
on
and
and
off.
off
Okay.
okay
So
so
now
now
the
the
user
user
has
has
a
a
way
way
to
to
toggle
toggle
the
the
state,
state
but
but
now
now
we
we
need
need
to
to
do
do
something
something
useful
useful
with
with
the
the
state.
state
In
in
our
our
case,
case
we
we
want
want
to
to
show
show
the
the
drop
drop
down
down
when
when
the
the
open
open
state
state
is
is
set
set
to
to
true.
true
Below
below
the
the
link,
link
we'll
we'll
add
add
braces.
braces
Feed,
feed
and
and
if
if
the
the
open
open
property
property
is
is
true,
true
then
then
we'll
we'll
show
show
the
the
props
props
dot
dot
children.
children
If
if
the
the
open
open
state
state
is
is
false,
false
then
then
nothing
nothing
will
will
be
be
shown
shown
here.
here
We
we
can
can
test
test
things
things
out
out
by
by
going
going
to
to
our
our
nav
nav
item
item
component,
component
feed,
feed
adding
adding
a
a
hello
hello
world,
world
and
and
you
you
should
should
see
see
that
that
appear
appear
when
when
you
you
click
click
on
on
the
the
button.
button
Obviously,
obviously
it
it
looks
looks
terrible,
terrible
so
so
let's
let's
make
make
a
a
drop
drop
down
down
component
component
to
to
fix
fix
that.
that
Feed.
feed
We'll
we'll
add
add
another
another
function
function
for
for
a
a
drop
drop
down
down
menu,
menu
and
and
we'll
we'll
have
have
it
it
return
return
a
a
div
div
with
with
a
a
class
class
of
of
drop
drop
down.
down
Then
then
we'll
we'll
add
add
our
our
drop
drop
down
down
menu
menu
as
as
the
the
child
child
of
of
the
the
nav
nav
item.
item
Now
now
similar
similar
to
to
our
our
navbar,
navbar
a
a
drop
drop
down
down
has
has
multiple
multiple
drop
drop
down
down
items.
items
But
but
in
in
this
this
example,
example
I'm
i'm
going
going
to
to
nest
nest
that
that
component
component
directly
directly
in
in
the
the
drop
drop
down
down
menu.
menu
Feed.
feed
The
the
drop
drop
down
down
item
item
will
will
simply
simply
be
be
a
a
link
link
with
with
a
a
class
class
name
name
of
of
menu
menu
item,
item
and
and
then
then
we'll
we'll
pass
pass
in
in
props
props
dot
dot
children
children
to
to
control
control
the
the
text
text
of
of
that
that
link.
link
Feed.
feed
Now
now
you
you
may
may
have
have
noticed
noticed
in
in
the
the
demo
demo
that
that
some
some
of
of
these
these
links
links
have
have
an
an
icon
icon
on
on
the
the
left
left
and
and
some
some
have
have
an
an
icon
icon
on
on
the
the
right.
right
We
we
can
can
handle
handle
that
that
logic
logic
in
in
way
way
by
by
adding
adding
slots
slots
for
for
a
a
left
left
icon
icon
and
and
a
a
right
right
icon.
icon
When
when
you
you
pass
pass
in
in
a
a
left
left
icon
icon
or
or
right
right
icon
icon
prop,
prop
it'll
it'll
be
be
rendered.
rendered
But
but
if
if
you
you
leave
leave
it
it
blank,
blank
then
then
it
it
just
just
won't
won't
render
render
anything
anything
at
at
all.
all
We
we
can
can
see
see
it
it
in
in
use
use
down
down
here
here
in
in
the
the
drop
drop
down.
down
A
a
basic
basic
drop
drop
down
down
item
item
will
will
just
just
take
take
some
some
text
text
as
as
a
a
child,
child
feed.
feed
But
but
if
if
you
you
want
want
to
to
show
show
an
an
icon
icon
on
on
the
the
left
left
or
or
right,
right
you
you
can
can
also
also
pass
pass
in
in
the
the
icon
icon
prop
prop
and
and
pass
pass
it
it
a
a
component
component
or
or
emoji
emoji
string.
string
Now
now
in
in
order
order
to
to
get
get
things
things
looking
looking
right,
right
let's
let's
go
go
back
back
to
to
our
our
CSS.
css
The
the
drop
drop
down
down
menu
menu
on
on
Facebook
facebook
overlaps
overlaps
just
just
slightly
slightly
with
with
the
the
top
top
nav
nav
bar,
bar
and
and
we
we
can
can
achieve
achieve
that
that
effect
effect
by
by
using
using
absolute
absolute
positioning.
positioning
It
it
It
it
allows
allows
us
us
to
to
explicitly
explicitly
offset
offset
an
an
element
element
based
based
on
on
its
its
container.
container
From
from
the
the
top
top
of
of
the
the
parent
parent
navbar,
navbar
we'll
we'll
move
move
the
the
drop
drop
down
down
down
down
by
by
58
58
pixels.
pixels
That
that
means
means
it'll
it'll
overlap
overlap
by
by
2
2
pixels
pixels
with
with
the
the
top
top
navbar
navbar
which
which
has
has
a
a
height
height
of
of
60.
60
We
we
can
can
give
give
it
it
a
a
fixed
fixed
width
width
of
of
300
300
pixels
pixels
and
and
then
then
we'll
we'll
move
move
it
it
over
over
to
to
the
the
left
left
by
by
translating
translating
it
it
over
over
the
the
x
x
axis
axis
by
by
45%.
45%
We'll
we'll
give
give
it
it
some
some
colors
colors
and
and
padding,
padding
and
and
we'll
we'll
want
want
to
to
make
make
sure
sure
the
the
overflow
overflow
property
property
is
is
set
set
to
to
hidden.
hidden
Feed.
feed
What
what
this
this
will
will
do
do
is
is
hide
hide
any
any
child
child
elements
elements
if
if
they
they
overlap
overlap
this
this
container.
container
That's
that's
important
important
because
because
in
in
a
a
minute
minute
here,
here
we'll
we'll
be
be
sliding
sliding
in
in
multiple
multiple
menus
menus
through
through
this
this
container.
container
Feed.
feed
Now
now
the
the
drop
drop
down
down
has
has
multiple
multiple
menu
menu
items.
items
We'll
we'll
set
set
these
these
up
up
as
as
flex
flex
containers
containers
that
that
align
align
their
their
items
items
to
to
the
the
center.
center
In
in
the
the
context
context
of
of
a
a
row,
row
that
that
means
means
vertical
vertical
alignment.
alignment
Now
now
when
when
a
a
user
user
hovers
hovers
over
over
a
a
menu
menu
item,
item
we
we
want
want
to
to
animate
animate
the
the
background
background
color.
color
So
so
we'll
we'll
go
go
ahead
ahead
and
and
set
set
up
up
a
a
transition
transition
for
for
the
the
background.
background
Then
then
we
we
can
can
target
target
the
the
menu
menu
items
items
hover
hover
pseudo
pseudo
selector
selector
and
and
change
change
the
the
background
background
color
color
to
to
something
something
a
a
little
little
bit
bit
lighter.
lighter
As
as
a
a
final
final
touch,
touch
we
we
want
want
the
the
right
right
icon
icon
in
in
the
the
row
row
to
to
be
be
pushed
pushed
all
all
the
the
way
way
to
to
the
the
right
right
side.
side
With
with
Flexbox,
flexbox
you
you
can
can
set
set
the
the
left
left
margin
margin
of
of
the
the
last
last
item
item
to
to
auto
auto
and
and
that
that
will
will
push
push
it
it
all
all
the
the
way
way
to
to
the
the
right
right
and
and
everything
everything
else
else
to
to
the
the
left.
left
And
and
now
now
our
our
drop
drop
down
down
menu
menu
is
is
starting
starting
to
to
take
take
shape.
shape
Feet.
feet
At
at
this
this
point,
point
we
we
have
have
a
a
fully
fully
functional
functional
single
single
level
level
drop
drop
down,
down
but
but
we
we
require
require
an
an
animated
animated
multi
multi
level
level
drop
drop
down.
down
To
to
help
help
us
us
along
along
the
the
way,
way
we'll
we'll
install
install
a
a
very
very
popular
popular
package
package
called
called
react
react
transition
transition
group.
group
It
it
will
will
help
help
us
us
control
control
the
the
conditional
conditional
logic
logic
for
for
rendering
rendering
multiple
multiple
menus
menus
and
and
transitioning
transitioning
between
between
them
them
when
when
they're
they're
added
added
or
or
removed
removed
from
from
the
the
application.
application
Once
once
installed,
installed
go
go
ahead
ahead
and
and
import
import
the
the
CSS
css
transition
transition
component
component
from
from
the
the
package.
package
Then
then
we
we
need
need
to
to
give
give
our
our
drop
drop
down
down
menu
menu
some
some
state
state
to
to
specify
specify
which
which
menu
menu
is
is
currently
currently
visible.
visible
We'll
we'll
set
set
the
the
main
main
menu
menu
as
as
the
the
default
default
and
and
then
then
we'll
we'll
also
also
show
show
a
a
settings
settings
and
and
animals
animals
menu
menu
as
as
well.
well
Now
now
our
our
active
active
menu
menu
is
is
the
the
state
state
or
or
the
the
name
name
of
of
the
the
menu
menu
and
and
set
set
active
active
menu
menu
is
is
how
how
we
we
change
change
it.
it
Now
now
that
that
we
we
have
have
state,
state
we
we
can
can
animate
animate
elements
elements
in
in
or
or
out
out
using
using
CSS
css
transition.
transition
We
we
can
can
go
go
ahead
ahead
and
and
wrap
wrap
our
our
current
current
drop
drop
down
down
elements
elements
in
in
the
the
CSS
css
transition
transition
component.
component
Feed.
feed
It's
it's
looking
looking
for
for
a
a
prop
prop
of
of
n,
n
which
which
when
when
truthy,
truthy
will
will
render
render
and
and
animate
animate
its
its
children
children
into
into
the
the
UI.
ui
In
in
other
other
words,
words
when
when
the
the
active
active
menu
menu
equals
equals
feeds
feeds
main,
main
and
and
we
we
want
want
to
to
show
show
the
the
children
children
inside
inside
of
of
this
this
component.
component
I'm
i'm
also
also
adding
adding
a
a
second
second
property
property
called
called
unmount
unmount
on
on
exit,
exit
which
which
completely
completely
removes
removes
these
these
children
children
when
when
they're
they're
not
not
active.
active
Feed.
feed
Next,
next
we'll
we'll
set
set
a
a
time
time
out,
out
which
which
defines
defines
the
the
duration
duration
of
of
the
the
animation.
animation
And
and
the
the
last
last
prop
prop
we
we
need
need
to
to
add
add
here
here
is
is
class
class
names,
names
which
which
we'll
we'll
set
set
to
to
menu
menu
primary
primary
for
for
this
this
primary
primary
main
main
menu.
menu
Now
now
Now
now
here's
here's
how
how
the
the
CSS
css
transition
transition
actually
actually
works.
works
It
it
looks
looks
for
for
the
the
first
first
child
child
element
element
which
which
we'll
we'll
set
set
up
up
here
here
as
as
a
a
div.
div
Then
then
when
when
its
its
in
in
prop
prop
changes,
changes
it
it
will
will
add
add
or
or
remove
remove
CSS
css
classes
classes
to
to
this
this
element
element
based
based
on
on
the
the
state
state
of
of
the
the
animation,
animation
and
and
it
it
uses
uses
the
the
class
class
names
names
prop
prop
to
to
prefix
prefix
those
those
classes.
classes
CSS
css
transition
transition
doesn't
doesn't
actually
actually
animate
animate
anything
anything
directly.
directly
Instead,
instead
it
it
adds
adds
and
and
removes
removes
classes
classes
based
based
on
on
the
the
state
state
of
of
the
the
animation,
animation
so
so
you
you
can
can
handle
handle
the
the
animations
animations
in
in
your
your
CSS.
css
Notice
notice
how
how
I'm
i'm
setting
setting
up
up
4
4
different
different
classes
classes
here.
here
Feed.
feed
Menu
menu
primary
primary
enter,
enter
enter
enter
active,
active
exit,
exit
and
and
exit
exit
active.
active
When
when
the
the
in
in
prop
prop
first
first
becomes
becomes
true,
true
it
it
will
will
add
add
the
the
menu
menu
primary
primary
enter
enter
class
class
to
to
the
the
div.
div
Feed.
feed
After
after
a
a
time
time
out
out
of
of
500
500
milliseconds,
milliseconds
it
it
then
then
adds
adds
the
the
menu
menu
primary
primary
interactive
interactive
class.
class
Now
now
when
when
the
the
in
in
prop
prop
becomes
becomes
false,
false
it
it
does
does
the
the
exact
exact
opposite.
opposite
It
it
adds
adds
the
the
exit
exit
class,
class
then
then
the
the
exit
exit
active
active
class.
class
This
this
means
means
you
you
can
can
easily
easily
create
create
an
an
animation
animation
using
using
CSS
css
transitions.
transitions
We
we
want
want
our
our
main
main
menu
menu
to
to
slide
slide
in
in
from
from
left
left
to
to
right.
right
So
so
initially,
initially
we'll
we'll
translate
translate
it
it
to
to
the
the
left
left
by
by
a
a
110%,
110%
so
so
it'll
it'll
be
be
completely
completely
invisible
invisible
off
off
to
to
the
the
left.
left
After
after
500
500
milliseconds,
milliseconds
We'll
we'll
bring
bring
the
the
translate
translate
back
back
to
to
0,
0
so
so
it'll
it'll
be
be
in
in
its
its
normal
normal
position.
position
Then
then
we
we
can
can
animate
animate
it
it
using
using
the
the
transition
transition
property,
property
using
using
our
our
speed
speed
variable,
variable
and
and
a
a
timing
timing
function
function
of
of
ease.
ease
Feed.
feed
As
as
you
you
can
can
see
see
here,
here
CSS
css
is
is
doing
doing
the
the
animation
animation
while
while
React
react
is
is
toggling
toggling
the
the
classes
classes
for
for
you.
you
Now
now
to
to
animate
animate
out,
out
we'll
we'll
do
do
basically
basically
the
the
same
same
thing
thing
just
just
in
in
the
the
opposite
opposite
direction.
direction
We'll
we'll
translate
translate
from
from
0
0
to
to
a
a
negative
negative
110%.
110%
Now
now
at
at
this
this
point,
point
everything
everything
should
should
be
be
exactly
exactly
the
the
same.
same
That's
that's
because
because
we
we
need
need
a
a
secondary
secondary
menu
menu
to
to
toggle
toggle
to.
to
Let's
let's
get
get
started
started
with
with
that
that
second
second
menu
menu
by
by
copying
copying
our
our
CSS
css
transition
transition
and
and
pasting
pasting
it
it
directly
directly
under
under
the
the
existing
existing
one.
one
Instead
instead
of
of
checking
checking
the
the
active
active
menu
menu
feed.
feed
For
for
main,
main
we'll
we'll
check
check
the
the
active
active
menu
menu
for
for
settings.
settings
For
for
class
class
names,
names
we'll
we'll
use
use
menu
menu
secondary
secondary
because
because
we
we
want
want
to
to
set
set
up
up
different
different
classes
classes
for
for
this
this
menu
menu
to
to
slide
slide
from
from
right
right
to
to
left.
left
Now
now
the
the
classes
classes
work
work
in
in
exactly
exactly
the
the
same
same
way.
way
The
the
only
only
difference
difference
is
is
that
that
we're
we're
translating
translating
to
to
positive
positive
a
a
110%
110%
versus
versus
negative
negative
a
a
110%.
110%
Feed.
feed
The
the
effect
effect
is
is
that
that
the
the
secondary
secondary
menu
menu
will
will
be
be
offset
offset
to
to
the
the
right
right
and
and
then
then
it
it
will
will
slide
slide
in
in
to
to
the
the
left.
left
And
and
that's
that's
all
all
it
it
takes
takes
to
to
build
build
the
the
basic
basic
slide
slide
in
in
slide
slide
out
out
animation.
animation
Fee,
fee
but
but
we
we
are
are
missing
missing
one
one
piece
piece
of
of
the
the
puzzle,
puzzle
and
and
that's
that's
a
a
way
way
for
for
the
the
user
user
to
to
activate
activate
or
or
deactivate
deactivate
a
a
menu.
menu
We
we
have
have
our
our
set
set
active
active
menu
menu
function
function
from
from
use
use
state.
state
So
so
we'll
we'll
go
go
ahead
ahead
and
and
bind
bind
that
that
to
to
the
the
click
click
event
event
on
on
the
the
drop
drop
down
down
item
item
button.
button
But
but
instead
instead
of
of
hard
hard
coding
coding
a
a
value
value
here,
here
we're
we're
going
going
to
to
look
look
for
for
a
a
prop
prop
that's
that's
passed
passed
down
down
from
from
the
the
parent
parent
component,
component
feed,
feed
and
and
we'll
we'll
want
want
to
to
make
make
sure
sure
that
that
prop
prop
exists
exists
before
before
we
we
call
call
the
the
set
set
active
active
menu
menu
function.
function
Now
now
to
to
get
get
our
our
demo
demo
working,
working
we
we
can
can
go
go
down
down
to
to
any
any
drop
drop
down
down
item
item
and
and
set
set
the
the
go
go
to
to
menu
menu
prop
prop
to
to
whatever
whatever
menu
menu
we
we
wanna
wanna
navigate
navigate
to,
to
which
which
in
in
our
our
case
case
will
will
either
either
be
be
settings
settings
or
or
main.
main
And
and
now
now
if
if
you
you
open
open
up
up
your
your
demo,
demo
you
you
should
should
have
have
a
a
functional
functional
multilevel
multilevel
drop
drop
down,
down
feet,
feet
but
but
we're
we're
not
not
done
done
quite
quite
yet.
yet
There's
there's
still
still
some
some
additional
additional
polish
polish
that
that
we
we
have
have
to
to
take
take
care
care
of.
of
Go
go
back
back
to
to
your
your
demo
demo
and
and
add
add
a
a
bunch
bunch
of
of
drop
drop
down
down
items
items
to
to
one
one
of
of
the
the
menus.
menus
Feed.
feed
Notice
notice
how
how
the
the
height
height
is
is
not
not
animated.
animated
It
it
just
just
snaps
snaps
into
into
place
place
and
and
totally
totally
ruins
ruins
the
the
entire
entire
animation.
animation
This
this
happens
happens
because
because
the
the
old
old
menu
menu
hasn't
hasn't
been
been
completely
completely
removed
removed
from
from
the
the
DOM
dom
by
by
the
the
time
time
the
the
new
new
menu
menu
is
is
visible.
visible
What
what
we
we
need
need
is
is
a
a
more
more
dynamic
dynamic
way
way
to
to
manage
manage
the
the
height.
height
Let's
let's
create
create
some
some
state
state
for
for
the
the
height
height
of
of
the
the
menu.
menu
Then
then
we'll
we'll
create
create
a
a
function
function
called
called
calculate
calculate
height,
height
feed,
feed
and
and
this
this
function
function
takes
takes
a
a
DOM
dom
element
element
as
as
its
its
argument.
argument
That's
that's
because
because
a
a
DOM
dom
element
element
has
has
a
a
property
property
called
called
offset
offset
height,
height
which
which
contains
contains
the
the
actual
actual
height
height
and
and
pixels
pixels
of
of
that
that
element.
element
And
and
now
now
you
you
might
might
be
be
wondering,
wondering
where
where
do
do
we
we
get
get
this
this
element
element
and
and
when
when
do
do
we
we
call
call
this
this
function?
function
Well,
well
the
the
CSS
css
transition
transition
has
has
life
life
cycle
cycle
hooks
hooks
that
that
we
we
can
can
tap
tap
into.
into
Fee.
fee
One
one
of
of
these
these
hooks
hooks
is
is
on
on
enter.
enter
It
it
calls
calls
a
a
callback
callback
as
as
soon
soon
as
as
the
the
enter
enter
class
class
is
is
first
first
added
added
to
to
the
the
element,
element
and
and
it
it
also
also
provides
provides
the
the
element
element
as
as
an
an
argument,
argument
which
which
means
means
we
we
can
can
simply
simply
pass
pass
in
in
our
our
calc
calc
height
height
function
function
here
here
as
as
the
the
prop
prop
value.
value
That
that
will
will
recalculate
recalculate
the
the
height
height
of
of
the
the
menu.
menu
Now
now
we
we
just
just
need
need
to
to
apply
apply
it
it
as
as
a
a
style
style
to
to
the
the
drop
drop
down
down
itself.
itself
We
we
can
can
go
go
up
up
to
to
the
the
style
style
attribute
attribute
and
and
dynamically
dynamically
pass
pass
in
in
the
the
height
height
from
from
our
our
state.
state
And
and
that
that
leaves
leaves
us
us
with
with
one
one
final
final
step
step
to
to
animate
animate
it.
it
Go
go
to
to
the
the
drop
drop
down
down
class
class
in
in
your
your
CSS
css
and
and
add
add
a
a
transition
transition
for
for
the
the
height.
height
Now,
now
when
when
you
you
go
go
back
back
to
to
the
the
demo,
demo
your
your
drop
drop
down
down
should
should
magically
magically
shrink
shrink
and
and
grow
grow
based
based
on
on
the
the
size
size
of
of
the
the
current
current
menu.
menu
And
and
with
with
that,
that
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
let
let
me
me
know
know
what
what
you
you
wanna
wanna
see
see
next
next
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to reverse engineer the user interface of Facebook's app, creating icons, buttons, and drop downs. They also discuss React components for navigation and drop downs, including creating a new component for the top navigation bar. The speaker explains how to use Flexbox to align items and create a circular icon button, and how to set up a drop down menu. They also discuss how to create a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow.
Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners
I don't log in to Facebook often, but the last time I did, I was super impressed by its simple, intuitive, and fast new UI. In today's video, I'll show you how to reverse engineer some of its UI features, specifically the top navigation bar, its icon buttons, and this multi level animated drop down. We'll do it using HTML, CSS, and because I mentioned the word Facebook, I'm legally obligated to use React in this demo. In the following code tutorial, you'll learn how to create icon buttons with flexbox, features. You'll learn how to use CSS transforms to create sliding animations, and fundamental concepts in React, like component composition, hooks, and how to create CSS functions based on the state of your React application, and I'll throw in a bunch of other cool tips along the way. If you're new here, like and subscribe, and let me know if you want to see more beginner friendly UI tutorials like this in components. Before we get started, let's take a closer look at what we're building today. By the end of this video, you'll have several reusable React components that you can use for for navigation and drop downs. At the top, we have a nav bar component where the children are nav items represented as icon buttons. Feet. These buttons have children that you can toggle on or off by clicking them. When we click the carrot, it renders our drop down component. It contains multiple drop down items, and the ones with a chevron can toggle to a secondary drop down menu. Notice how the old menu slides out to the left and the new one comes in from the right. And because the height of the two menus won't be the same, we'll animate that as well. Now before we get started, feed. I'd just like to say this is a beginner friendly video, but we move at a very fast pace on this channel. So feel free to pause the video or slow down the playback speed as you follow along. The first thing we'll need is a React app. Assuming you have Node. Js installed, open up the command line and run npx create react app, and of course, the name of our app is Facebook. To keep this demo simple, people. I'm going to delete everything that's not the index. Js, app. Js, or index. Css files. The index. Js file is your initial entry point. I'll go ahead and remove the service worker stuff here, then you can ignore this file for the rest of the video. From there, I'm removing all the boilerplate code from the app JS file. Feed. We'll be using functional React components in this video. When you see a function whose name starts with a capital letter, you can think of that as a component. The return value of a functional component is your UI or HTML or more specifically, JSX. JSX is not actually HTML, but it's a syntax extension for JavaScript that allows you to write HTML like templates in your components. But before we get too deep into React, let's open up the index CSS file. The CSS in this video is pretty generic, feed, so feel free to use it with your favorite framework. I'm starting by defining some global CSS variables that we can think of as our theme. And I'm also defining a speed variable that represents the animation speed, which will come into play later in the video. Then below that, I'm overriding the default unordered list style. And then for our link elements, I'll match them to the text color variable in our color scheme. That takes care of our initial setup. Now we're ready to start building the top navigation bar. Feed. React and especially functional components make it really easy to break your application down into a lot of small reusable pieces. And this is a practice that we call component composition. Feed. In our app JS file, we'll define a new component named navbar, and it returns JSX inside these parentheses. We'll go ahead and add an HTML nav element with an unordered list inside of it. We can apply a CSS class to these elements using class name. Notice how this is different than regular HTML, which is normally just class. Feed, and we'll apply class 4 navbar and navbar nav to make these elements easy to style. Now if we go up to the JSX for the app component, we can declare this navbar there. And notice how we declare it almost like a regular HTML element. Now I'm going to open up the CSS here on the right side, and we'll apply some styles to the navbar. Feed. The nav bar is basically just a rectangle that sits at the top. We'll give it a fixed height based on our nav size variable and then some coloring and padding. Feed. The unordered list that sits inside the nav is the container for the children, which we'll set up as a flexible row. We want it to take up 100% of the width and the height of the parent, and then we'll set the display property to flex. And we can have all the children start on the right hand side instead of the default left side by saying justify content flex end. Feed. Now at this point, we have some actual UI that we can take a look at. Go ahead and run npm start from the command line to serve your app. It should open in the browser automatically, and you should see this horizontal gray bar up at the top. And now the question becomes, how do we add items or children inside the navbar? In React, Components can pass data and UI elements to each other using props. Add props as an argument to your function, and then you can reference it in your template. Feed. Props has a built in property named children, and it will project or reference any UI elements that you pass in inside of the actual tags of that component. Feed. For example, if we go up to our navbar and add a list item inside of its tags, it will be rendered in the location that we called props dot children. So if we open up the browser, you should see the letter x here up in the top left corner. But this gives us a great opportunity to create a new component called a nav item. Our nav item component will also take props and will set up a list item as its main element, and then we'll nest an a or link element inside of it. Feed. The a element represents the icon button, so we'll give it a CSS class accordingly. Now this time, instead of referencing props dot children, we're going to pass our own custom prop called an icon. Instead of adding UI elements inside of the tags, we reference our icon prop as we would with a regular HTML attribute. So props to allow you to pass data from the parent to the child, similar to how you might pass an argument to a JavaScript function. Because remember, your React component is just a JavaScript function. For now, I'm just going to pass some emoji icons so we can focus on the CSS. Each nav item is a box that is slightly smaller than the nav bar itself. An easy way to manage its width is to calculate it dynamically. So we'll take our nav size variable, which is 60 pixels, and then we'll multiply it by 0.08 or 80% with the calc function. Now each of these nav items should display their children directly in the center. We can easily do that with Flexbox by aligning items to the center and justifying the content to the center. Feed. So that gives us a box with its children in the middle. But now we want an icon button with a circular shape. I'm going to scope a new CSS variable to this class called button size. Feed. It also uses the calc function to give us a size that is exactly 50% of the original navbar size. And now we can apply that value to the width and the height of this class. Feed. And then to make the shape circular, we can apply a border radius of 50%, which creates a perfect circle. Now inside of this circle, we also want to center the children directly in the middle. So, again, we'll set up a flex container and align and justify everything to the center. If you open your app in the browser, you should now see these 3 icon buttons here at the top. Feed. As an added touch, we might want to change the color slightly when these items are hovered over. An easy way to handle that is with a CSS transition. Feed. We'll apply it to the filter property and set it to a duration of 300 milliseconds. Then we'll target the hover pseudo selector on the icon button, and we'll filter its brightness to 1.2 to make it slightly brighter as we hover over it. However, in the full demo and on Facebook, you'll notice that it's using SVG icons. You can find all the SVGs I used in the source code on GitHub. They live in this icons directory, but how do we use these SVG icons in React? It's actually very easy to use an SVG icon as a React component directly in your code. Add an import statement to the top of the file that references the path to your SVG icon. View. You import a React component and then name it whatever you want using the as keyword. And then you can do the same thing for all of the other SVGs that you want to use in your code. Feed. From there, we can go back down to our navbar, and instead of using an emoji, we'll use braces to pass in one of our SVG components directly. And now your icon buttons can handle both SVG graphics and emoji strings equally. But your SVGs don't inherit a size by default, so we'll want to go ahead and set a fixed width and height for them. Feed. And now if we preview things in the browser, we should have an icon now that is very similar to the actual Facebook UI. And now we're ready for the fun part, feed, building an animated multilevel drop down menu. Now the reason we're not passing the icon as a direct child of a nav item is because some of our nav items might have a drop down menu, and we want that to serve as the children. We'll add a 4th nav item here with a caret icon, and our drop down will go inside of it. Now in order to open and close a drop down, our nav item will need to have some state, or in other words, some data that changes throughout the life cycle of the app. We can manage state in React using a hook called use state. In our nav item component, we call the use state function, and it returns us with 2 values. The values are returned in an array, so we can destructure them as variables here using brackets. Features. The first value is the state, which in our case is called opened and is a Boolean value that tells us whether or not the drop down menu is open. Feed. The second value is a function that you can use to change the state. We can also set a default value as the argument to use state, and, of course, we want the drop down to be closed by default. Feed. That sets up the initial state. But now we want the user to be able to change the state when they click on the nav item button. We can do that by going down to our link element, and we'll add an on click event handler. When the user clicks a button, it will use the set open function that we got from useState, and it will flip the open value to the opposite of whatever it currently is. Feed. Putting a bang in front of a Boolean gives you its opposite value, and that can be useful for toggling things on and off. Okay. So now the user has a way to toggle the state, but now we need to do something useful with the state. In our case, we want to show the drop down when the open state is set to true. Below the link, we'll add braces. Feed, and if the open property is true, then we'll show the props dot children. If the open state is false, then nothing will be shown here. We can test things out by going to our nav item component, feed, adding a hello world, and you should see that appear when you click on the button. Obviously, it looks terrible, so let's make a drop down component to fix that. Feed. We'll add another function for a drop down menu, and we'll have it return a div with a class of drop down. Then we'll add our drop down menu as the child of the nav item. Now similar to our navbar, a drop down has multiple drop down items. But in this example, I'm going to nest that component directly in the drop down menu. Feed. The drop down item will simply be a link with a class name of menu item, and then we'll pass in props dot children to control the text of that link. Feed. Now you may have noticed in the demo that some of these links have an icon on the left and some have an icon on the right. We can handle that logic in way by adding slots for a left icon and a right icon. When you pass in a left icon or right icon prop, it'll be rendered. But if you leave it blank, then it just won't render anything at all. We can see it in use down here in the drop down. A basic drop down item will just take some text as a child, feed. But if you want to show an icon on the left or right, you can also pass in the icon prop and pass it a component or emoji string. Now in order to get things looking right, let's go back to our CSS. The drop down menu on Facebook overlaps just slightly with the top nav bar, and we can achieve that effect by using absolute positioning. It It allows us to explicitly offset an element based on its container. From the top of the parent navbar, we'll move the drop down down by 58 pixels. That means it'll overlap by 2 pixels with the top navbar which has a height of 60. We can give it a fixed width of 300 pixels and then we'll move it over to the left by translating it over the x axis by 45%. We'll give it some colors and padding, and we'll want to make sure the overflow property is set to hidden. Feed. What this will do is hide any child elements if they overlap this container. That's important because in a minute here, we'll be sliding in multiple menus through this container. Feed. Now the drop down has multiple menu items. We'll set these up as flex containers that align their items to the center. In the context of a row, that means vertical alignment. Now when a user hovers over a menu item, we want to animate the background color. So we'll go ahead and set up a transition for the background. Then we can target the menu items hover pseudo selector and change the background color to something a little bit lighter. As a final touch, we want the right icon in the row to be pushed all the way to the right side. With Flexbox, you can set the left margin of the last item to auto and that will push it all the way to the right and everything else to the left. And now our drop down menu is starting to take shape. Feet. At this point, we have a fully functional single level drop down, but we require an animated multi level drop down. To help us along the way, we'll install a very popular package called react transition group. It will help us control the conditional logic for rendering multiple menus and transitioning between them when they're added or removed from the application. Once installed, go ahead and import the CSS transition component from the package. Then we need to give our drop down menu some state to specify which menu is currently visible. We'll set the main menu as the default and then we'll also show a settings and animals menu as well. Now our active menu is the state or the name of the menu and set active menu is how we change it. Now that we have state, we can animate elements in or out using CSS transition. We can go ahead and wrap our current drop down elements in the CSS transition component. Feed. It's looking for a prop of n, which when truthy, will render and animate its children into the UI. In other words, when the active menu equals feeds main, and we want to show the children inside of this component. I'm also adding a second property called unmount on exit, which completely removes these children when they're not active. Feed. Next, we'll set a time out, which defines the duration of the animation. And the last prop we need to add here is class names, which we'll set to menu primary for this primary main menu. Now Now here's how the CSS transition actually works. It looks for the first child element which we'll set up here as a div. Then when its in prop changes, it will add or remove CSS classes to this element based on the state of the animation, and it uses the class names prop to prefix those classes. CSS transition doesn't actually animate anything directly. Instead, it adds and removes classes based on the state of the animation, so you can handle the animations in your CSS. Notice how I'm setting up 4 different classes here. Feed. Menu primary enter, enter active, exit, and exit active. When the in prop first becomes true, it will add the menu primary enter class to the div. Feed. After a time out of 500 milliseconds, it then adds the menu primary interactive class. Now when the in prop becomes false, it does the exact opposite. It adds the exit class, then the exit active class. This means you can easily create an animation using CSS transitions. We want our main menu to slide in from left to right. So initially, we'll translate it to the left by a 110%, so it'll be completely invisible off to the left. After 500 milliseconds, We'll bring the translate back to 0, so it'll be in its normal position. Then we can animate it using the transition property, using our speed variable, and a timing function of ease. Feed. As you can see here, CSS is doing the animation while React is toggling the classes for you. Now to animate out, we'll do basically the same thing just in the opposite direction. We'll translate from 0 to a negative 110%. Now at this point, everything should be exactly the same. That's because we need a secondary menu to toggle to. Let's get started with that second menu by copying our CSS transition and pasting it directly under the existing one. Instead of checking the active menu feed. For main, we'll check the active menu for settings. For class names, we'll use menu secondary because we want to set up different classes for this menu to slide from right to left. Now the classes work in exactly the same way. The only difference is that we're translating to positive a 110% versus negative a 110%. Feed. The effect is that the secondary menu will be offset to the right and then it will slide in to the left. And that's all it takes to build the basic slide in slide out animation. Fee, but we are missing one piece of the puzzle, and that's a way for the user to activate or deactivate a menu. We have our set active menu function from use state. So we'll go ahead and bind that to the click event on the drop down item button. But instead of hard coding a value here, we're going to look for a prop that's passed down from the parent component, feed, and we'll want to make sure that prop exists before we call the set active menu function. Now to get our demo working, we can go down to any drop down item and set the go to menu prop to whatever menu we wanna navigate to, which in our case will either be settings or main. And now if you open up your demo, you should have a functional multilevel drop down, feet, but we're not done quite yet. There's still some additional polish that we have to take care of. Go back to your demo and add a bunch of drop down items to one of the menus. Feed. Notice how the height is not animated. It just snaps into place and totally ruins the entire animation. This happens because the old menu hasn't been completely removed from the DOM by the time the new menu is visible. What we need is a more dynamic way to manage the height. Let's create some state for the height of the menu. Then we'll create a function called calculate height, feed, and this function takes a DOM element as its argument. That's because a DOM element has a property called offset height, which contains the actual height and pixels of that element. And now you might be wondering, where do we get this element and when do we call this function? Well, the CSS transition has life cycle hooks that we can tap into. Fee. One of these hooks is on enter. It calls a callback as soon as the enter class is first added to the element, and it also provides the element as an argument, which means we can simply pass in our calc height function here as the prop value. That will recalculate the height of the menu. Now we just need to apply it as a style to the drop down itself. We can go up to the style attribute and dynamically pass in the height from our state. And that leaves us with one final step to animate it. Go to the drop down class in your CSS and add a transition for the height. Now, when you go back to the demo, your drop down should magically shrink and grow based on the size of the current menu. And with that, I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and let me know what you wanna see next in the comments. Thanks for watching, and I will see you in the next one.
The speaker explains how to reverse engineer the user interface of Facebook's app, creating icons, buttons, and drop downs. They also discuss React components for navigation and drop downs, including creating a new component for the top navigation bar. The speaker explains how to use Flexbox to align items and create a circular icon button, and how to set up a drop down menu. They also discuss how to create a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners 
        and a small summary : The speaker explains how to reverse engineer the user interface of Facebook's app, creating icons, buttons, and drop downs. They also discuss React components for navigation and drop downs, including creating a new component for the top navigation bar. The speaker explains how to use Flexbox to align items and create a circular icon button, and how to set up a drop down menu. They also discuss how to create a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow for creating a step-by-step flow.
        [/INST]
        
        Generate the video : I don't log in to Facebook often, but the last time I did, I was super impressed by its simple, intuitive, and fast new UI. In today's video, I'll show you how to reverse engineer some of its UI features, specifically the top navigation bar, its icon buttons, and this multi level animated drop down. We'll do it using HTML, CSS, and because I mentioned the word Facebook, I'm legally obligated to use React in this demo. In the following code tutorial, you'll learn how to create icon buttons with flexbox, features. You'll learn how to use CSS transforms to create sliding animations, and fundamental concepts in React, like component composition, hooks, and how to create CSS functions based on the state of your React application, and I'll throw in a bunch of other cool tips along the way. If you're new here, like and subscribe, and let me know if you want to see more beginner friendly UI tutorials like this in components. Before we get started, let's take a closer look at what we're building today. By the end of this video, you'll have several reusable React components that you can use for for navigation and drop downs. At the top, we have a nav bar component where the children are nav items represented as icon buttons. Feet. These buttons have children that you can toggle on or off by clicking them. When we click the carrot, it renders our drop down component. It contains multiple drop down items, and the ones with a chevron can toggle to a secondary drop down menu. Notice how the old menu slides out to the left and the new one comes in from the right. And because the height of the two menus won't be the same, we'll animate that as well. Now before we get started, feed. I'd just like to say this is a beginner friendly video, but we move at a very fast pace on this channel. So feel free to pause the video or slow down the playback speed as you follow along. The first thing we'll need is a React app. Assuming you have Node. Js installed, open up the command line and run npx create react app, and of course, the name of our app is Facebook. To keep this demo simple, people. I'm going to delete everything that's not the index. Js, app. Js, or index. Css files. The index. Js file is your initial entry point. I'll go ahead and remove the service worker stuff here, then you can ignore this file for the rest of the video. From there, I'm removing all the boilerplate code from the app JS file. Feed. We'll be using functional React components in this video. When you see a function whose name starts with a capital letter, you can think of that as a component. The return value of a functional component is your UI or HTML or more specifically, JSX. JSX is not actually HTML, but it's a syntax extension for JavaScript that allows you to write HTML like templates in your components. But before we get too deep into React, let's open up the index CSS file. The CSS in this video is pretty generic, feed, so feel free to use it with your favorite framework. I'm starting by defining some global CSS variables that we can think of as our theme. And I'm also defining a speed variable that represents the animation speed, which will come into play later in the video. Then below that, I'm overriding the default unordered list style. And then for our link elements, I'll match them to the text color variable in our color scheme. That takes care of our initial setup. Now we're ready to start building the top navigation bar. Feed. React and especially functional components make it really easy to break your application down into a lot of small reusable pieces. And this is a practice that we call component composition. Feed. In our app JS file, we'll define a new component named navbar, and it returns JSX inside these parentheses. We'll go ahead and add an HTML nav element with an unordered list inside of it. We can apply a CSS class to these elements using class name. Notice how this is different than regular HTML, which is normally just class. Feed, and we'll apply class 4 navbar and navbar nav to make these elements easy to style. Now if we go up to the JSX for the app component, we can declare this navbar there. And notice how we declare it almost like a regular HTML element. Now I'm going to open up the CSS here on the right side, and we'll apply some styles to the navbar. Feed. The nav bar is basically just a rectangle that sits at the top. We'll give it a fixed height based on our nav size variable and then some coloring and padding. Feed. The unordered list that sits inside the nav is the container for the children, which we'll set up as a flexible row. We want it to take up 100% of the width and the height of the parent, and then we'll set the display property to flex. And we can have all the children start on the right hand side instead of the default left side by saying justify content flex end. Feed. Now at this point, we have some actual UI that we can take a look at. Go ahead and run npm start from the command line to serve your app. It should open in the browser automatically, and you should see this horizontal gray bar up at the top. And now the question becomes, how do we add items or children inside the navbar? In React, Components can pass data and UI elements to each other using props. Add props as an argument to your function, and then you can reference it in your template. Feed. Props has a built in property named children, and it will project or reference any UI elements that you pass in inside of the actual tags of that component. Feed. For example, if we go up to our navbar and add a list item inside of its tags, it will be rendered in the location that we called props dot children. So if we open up the browser, you should see the letter x here up in the top left corner. But this gives us a great opportunity to create a new component called a nav item. Our nav item component will also take props and will set up a list item as its main element, and then we'll nest an a or link element inside of it. Feed. The a element represents the icon button, so we'll give it a CSS class accordingly. Now this time, instead of referencing props dot children, we're going to pass our own custom prop called an icon. Instead of adding UI elements inside of the tags, we reference our icon prop as we would with a regular HTML attribute. So props to allow you to pass data from the parent to the child, similar to how you might pass an argument to a JavaScript function. Because remember, your React component is just a JavaScript function. For now, I'm just going to pass some emoji icons so we can focus on the CSS. Each nav item is a box that is slightly smaller than the nav bar itself. An easy way to manage its width is to calculate it dynamically. So we'll take our nav size variable, which is 60 pixels, and then we'll multiply it by 0.08 or 80% with the calc function. Now each of these nav items should display their children directly in the center. We can easily do that with Flexbox by aligning items to the center and justifying the content to the center. Feed. So that gives us a box with its children in the middle. But now we want an icon button with a circular shape. I'm going to scope a new CSS variable to this class called button size. Feed. It also uses the calc function to give us a size that is exactly 50% of the original navbar size. And now we can apply that value to the width and the height of this class. Feed. And then to make the shape circular, we can apply a border radius of 50%, which creates a perfect circle. Now inside of this circle, we also want to center the children directly in the middle. So, again, we'll set up a flex container and align and justify everything to the center. If you open your app in the browser, you should now see these 3 icon buttons here at the top. Feed. As an added touch, we might want to change the color slightly when these items are hovered over. An easy way to handle that is with a CSS transition. Feed. We'll apply it to the filter property and set it to a duration of 300 milliseconds. Then we'll target the hover pseudo selector on the icon button, and we'll filter its brightness to 1.2 to make it slightly brighter as we hover over it. However, in the full demo and on Facebook, you'll notice that it's using SVG icons. You can find all the SVGs I used in the source code on GitHub. They live in this icons directory, but how do we use these SVG icons in React? It's actually very easy to use an SVG icon as a React component directly in your code. Add an import statement to the top of the file that references the path to your SVG icon. View. You import a React component and then name it whatever you want using the as keyword. And then you can do the same thing for all of the other SVGs that you want to use in your code. Feed. From there, we can go back down to our navbar, and instead of using an emoji, we'll use braces to pass in one of our SVG components directly. And now your icon buttons can handle both SVG graphics and emoji strings equally. But your SVGs don't inherit a size by default, so we'll want to go ahead and set a fixed width and height for them. Feed. And now if we preview things in the browser, we should have an icon now that is very similar to the actual Facebook UI. And now we're ready for the fun part, feed, building an animated multilevel drop down menu. Now the reason we're not passing the icon as a direct child of a nav item is because some of our nav items might have a drop down menu, and we want that to serve as the children. We'll add a 4th nav item here with a caret icon, and our drop down will go inside of it. Now in order to open and close a drop down, our nav item will need to have some state, or in other words, some data that changes throughout the life cycle of the app. We can manage state in React using a hook called use state. In our nav item component, we call the use state function, and it returns us with 2 values. The values are returned in an array, so we can destructure them as variables here using brackets. Features. The first value is the state, which in our case is called opened and is a Boolean value that tells us whether or not the drop down menu is open. Feed. The second value is a function that you can use to change the state. We can also set a default value as the argument to use state, and, of course, we want the drop down to be closed by default. Feed. That sets up the initial state. But now we want the user to be able to change the state when they click on the nav item button. We can do that by going down to our link element, and we'll add an on click event handler. When the user clicks a button, it will use the set open function that we got from useState, and it will flip the open value to the opposite of whatever it currently is. Feed. Putting a bang in front of a Boolean gives you its opposite value, and that can be useful for toggling things on and off. Okay. So now the user has a way to toggle the state, but now we need to do something useful with the state. In our case, we want to show the drop down when the open state is set to true. Below the link, we'll add braces. Feed, and if the open property is true, then we'll show the props dot children. If the open state is false, then nothing will be shown here. We can test things out by going to our nav item component, feed, adding a hello world, and you should see that appear when you click on the button. Obviously, it looks terrible, so let's make a drop down component to fix that. Feed. We'll add another function for a drop down menu, and we'll have it return a div with a class of drop down. Then we'll add our drop down menu as the child of the nav item. Now similar to our navbar, a drop down has multiple drop down items. But in this example, I'm going to nest that component directly in the drop down menu. Feed. The drop down item will simply be a link with a class name of menu item, and then we'll pass in props dot children to control the text of that link. Feed. Now you may have noticed in the demo that some of these links have an icon on the left and some have an icon on the right. We can handle that logic in way by adding slots for a left icon and a right icon. When you pass in a left icon or right icon prop, it'll be rendered. But if you leave it blank, then it just won't render anything at all. We can see it in use down here in the drop down. A basic drop down item will just take some text as a child, feed. But if you want to show an icon on the left or right, you can also pass in the icon prop and pass it a component or emoji string. Now in order to get things looking right, let's go back to our CSS. The drop down menu on Facebook overlaps just slightly with the top nav bar, and we can achieve that effect by using absolute positioning. It It allows us to explicitly offset an element based on its container. From the top of the parent navbar, we'll move the drop down down by 58 pixels. That means it'll overlap by 2 pixels with the top navbar which has a height of 60. We can give it a fixed width of 300 pixels and then we'll move it over to the left by translating it over the x axis by 45%. We'll give it some colors and padding, and we'll want to make sure the overflow property is set to hidden. Feed. What this will do is hide any child elements if they overlap this container. That's important because in a minute here, we'll be sliding in multiple menus through this container. Feed. Now the drop down has multiple menu items. We'll set these up as flex containers that align their items to the center. In the context of a row, that means vertical alignment. Now when a user hovers over a menu item, we want to animate the background color. So we'll go ahead and set up a transition for the background. Then we can target the menu items hover pseudo selector and change the background color to something a little bit lighter. As a final touch, we want the right icon in the row to be pushed all the way to the right side. With Flexbox, you can set the left margin of the last item to auto and that will push it all the way to the right and everything else to the left. And now our drop down menu is starting to take shape. Feet. At this point, we have a fully functional single level drop down, but we require an animated multi level drop down. To help us along the way, we'll install a very popular package called react transition group. It will help us control the conditional logic for rendering multiple menus and transitioning between them when they're added or removed from the application. Once installed, go ahead and import the CSS transition component from the package. Then we need to give our drop down menu some state to specify which menu is currently visible. We'll set the main menu as the default and then we'll also show a settings and animals menu as well. Now our active menu is the state or the name of the menu and set active menu is how we change it. Now that we have state, we can animate elements in or out using CSS transition. We can go ahead and wrap our current drop down elements in the CSS transition component. Feed. It's looking for a prop of n, which when truthy, will render and animate its children into the UI. In other words, when the active menu equals feeds main, and we want to show the children inside of this component. I'm also adding a second property called unmount on exit, which completely removes these children when they're not active. Feed. Next, we'll set a time out, which defines the duration of the animation. And the last prop we need to add here is class names, which we'll set to menu primary for this primary main menu. Now Now here's how the CSS transition actually works. It looks for the first child element which we'll set up here as a div. Then when its in prop changes, it will add or remove CSS classes to this element based on the state of the animation, and it uses the class names prop to prefix those classes. CSS transition doesn't actually animate anything directly. Instead, it adds and removes classes based on the state of the animation, so you can handle the animations in your CSS. Notice how I'm setting up 4 different classes here. Feed. Menu primary enter, enter active, exit, and exit active. When the in prop first becomes true, it will add the menu primary enter class to the div. Feed. After a time out of 500 milliseconds, it then adds the menu primary interactive class. Now when the in prop becomes false, it does the exact opposite. It adds the exit class, then the exit active class. This means you can easily create an animation using CSS transitions. We want our main menu to slide in from left to right. So initially, we'll translate it to the left by a 110%, so it'll be completely invisible off to the left. After 500 milliseconds, We'll bring the translate back to 0, so it'll be in its normal position. Then we can animate it using the transition property, using our speed variable, and a timing function of ease. Feed. As you can see here, CSS is doing the animation while React is toggling the classes for you. Now to animate out, we'll do basically the same thing just in the opposite direction. We'll translate from 0 to a negative 110%. Now at this point, everything should be exactly the same. That's because we need a secondary menu to toggle to. Let's get started with that second menu by copying our CSS transition and pasting it directly under the existing one. Instead of checking the active menu feed. For main, we'll check the active menu for settings. For class names, we'll use menu secondary because we want to set up different classes for this menu to slide from right to left. Now the classes work in exactly the same way. The only difference is that we're translating to positive a 110% versus negative a 110%. Feed. The effect is that the secondary menu will be offset to the right and then it will slide in to the left. And that's all it takes to build the basic slide in slide out animation. Fee, but we are missing one piece of the puzzle, and that's a way for the user to activate or deactivate a menu. We have our set active menu function from use state. So we'll go ahead and bind that to the click event on the drop down item button. But instead of hard coding a value here, we're going to look for a prop that's passed down from the parent component, feed, and we'll want to make sure that prop exists before we call the set active menu function. Now to get our demo working, we can go down to any drop down item and set the go to menu prop to whatever menu we wanna navigate to, which in our case will either be settings or main. And now if you open up your demo, you should have a functional multilevel drop down, feet, but we're not done quite yet. There's still some additional polish that we have to take care of. Go back to your demo and add a bunch of drop down items to one of the menus. Feed. Notice how the height is not animated. It just snaps into place and totally ruins the entire animation. This happens because the old menu hasn't been completely removed from the DOM by the time the new menu is visible. What we need is a more dynamic way to manage the height. Let's create some state for the height of the menu. Then we'll create a function called calculate height, feed, and this function takes a DOM element as its argument. That's because a DOM element has a property called offset height, which contains the actual height and pixels of that element. And now you might be wondering, where do we get this element and when do we call this function? Well, the CSS transition has life cycle hooks that we can tap into. Fee. One of these hooks is on enter. It calls a callback as soon as the enter class is first added to the element, and it also provides the element as an argument, which means we can simply pass in our calc height function here as the prop value. That will recalculate the height of the menu. Now we just need to apply it as a style to the drop down itself. We can go up to the style attribute and dynamically pass in the height from our state. And that leaves us with one final step to animate it. Go to the drop down class in your CSS and add a transition for the height. Now, when you go back to the demo, your drop down should magically shrink and grow based on the size of the current menu. And with that, I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and let me know what you wanna see next in the comments. Thanks for watching, and I will see you in the next one.
        