Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 The `Menu` Component

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI framework and JavaScript projects course with Tuts+. In this video, we will set up the menu that will appear at the top of the page. The first thing we need to do is create a file named menu.js in the SRC folder of our project. The first thing we will do in this file is add our imports. First we import Component from React, because it is what we need to configure react components. Then we import Input, Icon, Menu, Grid and Image from semantic-ui-react. As I said before, we have to import any Semantic components that we want to use. After that we can add our class. Then after that we add a state object. We will use this to track which menu item is clicked. Then after that, we add the handleItemClick method. Now, I took this method directly from the documentation for Semantic UI React. This method uses the state object to assign the activeItem class to the selected menu item. Then we add a const to order our activeItem,. Then we add our return statement. Inside we will add a row for our grid. As opposed to how we constructed the last project, we'll construct the individual pieces of the user interface in the respective components. We will assemble them in the app.js file. Then inside of our row we add a menu. Here we have supplied it with the fluid property. This makes the menu bar spend the full width of its container. And speaking of containers, remember the grid we added to the at.js file as a container that wraps it, that means our menu bar will not spend the full width of our viewport. Then we add a header to menu. Instead of text however, we used an icon. Since we have building a GitHub clone, I just use the GitHub icon that comes to Semantic. As you can see, configuring the Semantic components with React, is as simple as passing the appropriate properties. If you are uncertain as the web properties you can use, refer to the documentation. The semantic react project has its own separate documentation. And I will include a link in the course notes. Next we will add a search bar to our menu. Here we just add an input with the search icon. Then after that we add a menu item for pull requests. The active property will set this menu item to have the active class when it is clicked. This provides a visual cue that the button has been clicked. When the activeItem matches the name of this item, it will be set to active. And of course the onClick event handler is what is setting the activeItem in the first place. And then we add another menu item for any issues. Then we add another header with the alarm icon. This time, however, we have added the position property set to the right. This of course will push the menu item to the right of the menu bar. Then we add another header with the add icon. Then we add an avatar image as the last item in our menu. Create a folder in the public folder named IMG. After that, copy your avatar image to the IMG folder. The last thing we need to do is go over to the at.js file. First we have to import our menu. Then the last thing we have to do is add the menu to the grid. This is all we have to do to add the component to the grid. After that, save your project. Then navigate to your project folder and run npm start. Now when the app starts, you should see the menu bar that we added. Also note that the menu bar is not the full width of the viewport as expected. Now this is not a perfect recreation of GitHub, but it is close. Now in the next video, we will create a submenu to work with our main menu.

Back to the top