Creating the common layout
In this section, we’ll create a common layout component that will be used across the different application pages as a wrapper to provide a consistent look and feel. Our layout will include a top bar that contains the application’s title, a home link, and an icon with a drop-down menu to perform user-specific actions. We’ll also include a drawer with a menu containing entries to navigate to each of the application’s pages.
We’ll start by creating a layout
directory beneath the src
folder that will hold the components and code related to the layout. The application layout will consist of two basic components: a drawer and a top bar. Let’s start by creating the TopBar
component.
Note on the React component exports
When implementing the React components, we’ll create specific JavaScript files for each of them. We’ll also group the files and components into modules/directories based on the features...