4.3 The `Submenu` Component

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI framework and JavaScript projects course with Tuts+. Now that we have our menu set up, next we need to build a submenu. Now if we look at GitHub, we see there's a tabular submenu beneath the regular menu. Recreating this menu is possible with the default components in Semantic UI React. Now again, this won't be an exact clone, but it would be enough to fool the average user. The first thing we need to do is add a file named submenu.js. The first thing we do, of course, is import the React component. After that we grab the Grid, Icon, Header, Button, and Menu components from semantic-ui-react. Then we will add our class as a whole chunk since we already know what the parts do. Every component will start off the same with the imports, a class that we export and the render method. The only difference will be the JSX that is in our render method. After that we add a grid row to wrap our content. Then we add a column with the width property added, this specifies the width and columns for this particular column. Incidentally, we still have a default of 16 columns to a row. In this column we add the archive icon that's supposed to represent the repository that we are looking at. Then we add a 6 wide column with the header element. The as property serves to render this header as an h2 tag. This is how we can alter the size of our header by passing the heading element that you wanna use. Then we have the color property that is setting our text to blue. Then we add a column set to a width of 3. This empty column is just creating some space between the rest of the content that we will add to this row. Then we add a 2 wide column that holds a button. The content property is what will appear on the left hand side of the button. The icon will be to the left of the content and the label will be what the value is of the button. This will be a split button that the user can click to watch the repository. You will understand better how they're styled once we preview the project. Then we add two more buttons just like the one we just added. Now if we add up all the column widths we have 16. So anything we add next will be in a new row. Then we add a 16 wide column to hold a tabular menu. By adding the tabular property it is now a tabular style menu. After that our sub menu is finished. Let's go over to App.js so we can add this component to our project. The first thing we will do is import the sub menu component. Incidentally, if you're wondering why we have been adding default to our classes, it is making it the default export. This is why we don't have to wrap our component imports in curly brackets. Then finally, we add the sub menu to our grid. Save everything, and then navigate to your project in a command line and run npm start. Now when the project starts it is beginning to look like GitHub. The tabs may not be apparent til we click on one. But they are tabs. Also notice the styling of the buttons. I actually think they look better than the GitHub buttons. Now, in the next video, we will finish up this project by adding our file listing.