{"id":253,"date":"2019-10-04T05:44:55","date_gmt":"2019-10-04T05:44:55","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=253"},"modified":"2019-10-10T08:21:16","modified_gmt":"2019-10-10T08:21:16","slug":"app-bar","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/app-bar\/","title":{"rendered":"App Bar"},"content":{"rendered":"\n

You can add the component on any page in the template. You need to follow the steps given below: \u200c<\/p>\n\n\n\n

Step 1:<\/strong> Please add the code given below in the page where you want to add the component.<\/p>\n\n\n\n

<AppBar position=\"static\" color=\"default\">
  <Toolbar>
     <IconButton color=\"inherit\" aria-label=\"Menu\">
        <MenuIcon \/>
     <\/IconButton>
     <h5 className=\"mb-0\">
        Project Name
     <\/h5>
  <\/Toolbar>
<\/AppBar><\/pre>\n\n\n\n
Step 2:<\/strong> Now Import the component from its parent library.<\/p>\n\n\n\n
import AppBar from '@material-ui\/core\/AppBar';
import Toolbar from '@material-ui\/core\/Toolbar';
import IconButton from '@material-ui\/core\/IconButton';
import MenuIcon from '@material-ui\/icons\/Menu';<\/pre>\n\n\n\n
We have given you an example of adding a simple app bar on the Ecommerce Dashboard.<\/p>\n\n\n\n
\"\"

<\/figcaption><\/figure>\n\n\n\n
You can check some other layouts of app bar below. For adding any of the below layout in the template, please check their relative code in the src->routes->components->app-bar->components<\/code> folder. <\/p>\n\n\n\n
\"\"<\/figure>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
You can add the component on any page in the template. You need to follow the steps given below: \u200c Step 1: Please add the code given below in the page where you want to add the component. <AppBar position=”static” color=”default”> <Toolbar> <IconButton color=”inherit” aria-label=”Menu”> <MenuIcon \/> <\/IconButton> <h5 className=”mb-0″> Project Name <\/h5> <\/Toolbar><\/AppBar> Step […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/253"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":6,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/253\/revisions"}],"predecessor-version":[{"id":441,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/253\/revisions\/441"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}