Copy the Master screen
Your HTML admin template should have a blank.html or named similary, HTML page that is just blank and has the side menu.
Open that html file, and copy all the content from inside the body tag.
Then head over to HTMLtoJSX to convert the plain HTML to format suitable for react. Uncheck Create class. Paste your copied HTML inside Live HTML Editor tab.
Copy the generated ouput.
In src\ui\tempate\Master.js look for the render function.
Replace the returned <div >...</div> with the ouput you got from HTMLtoJSX
Add the childrens to the view
The html that you copied over, it should have the content are somewhere. There add this
{this.props.children}Remove the demo menus and add system
Find the <ul>...</ul> list that containst the menu. remove her content and add
{Config.navigation.map(this.props.printMenuItem)}Remove unnececery HTML admin demo elements
Lot of admin templates will come with extra things that you will not need like search box, notification pop up etc.. Remove them from the master screen.
Set user related data
The master screen has access to few user related props. Put them in your new master screen. Use them like this ex. {this.props.userPhoto} {this.props.user.DisplayName}
On the logout button, add onClick to call the logout function ex.
<a onClick={this.props.logout}>Logour</a>Available props
- {String} userPhoto - the user image
- {Object} user - the current logged in user in firebase - Firebase User
- {Function} logout - the logout function, no paramas
- {Function} printMenuItem - function for priting the menu. Param 1 menu items
Remove any content that appear in the content area
Remove any additional data such as breadcrumbs or titles in the template, since in our case they are comming from the childer element that we had incuded.