{"id":189,"date":"2020-04-10T03:31:11","date_gmt":"2020-04-10T03:31:11","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=189"},"modified":"2020-04-13T11:45:06","modified_gmt":"2020-04-13T11:45:06","slug":"app-bar","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/app-bar\/","title":{"rendered":"App Bar"},"content":{"rendered":"\n<p>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<p><strong>Step 1:<\/strong>\u00a0Please add the code given below in the page where you want to add the component.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;AppBar position=\"static\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Toolbar>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;IconButton edge=\"start\" className={`menu-icon ${classes.menuButton}`} color=\"inherit\" aria-label=\"menu\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;MenuIcon \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/IconButton>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Typography variant=\"h6\" className={classes.title}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0News\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Typography>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button color=\"inherit\">Login&lt;\/Button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Toolbar>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/AppBar><\/pre>\n\n\n\n<p><strong>Step 2:<\/strong>\u00a0Now Import the component from its parent library.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { AppBar, Toolbar, Typography, IconButton, Button } from '@material-ui\/core';\nimport MenuIcon from '@material-ui\/icons\/Menu';<\/pre>\n\n\n\n<p>We have given you an example of adding a simple app bar .<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"202\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139-1024x202.png\" alt=\"\" class=\"wp-image-271\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139-1024x202.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139-300x59.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139-768x151.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139-1536x303.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139-1568x309.png 1568w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_139.png 1857w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>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\u00a0<code>src->routes->UiComponents->AppBar->components<\/code>\u00a0folder. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"535\" src=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141-1024x535.png\" alt=\"\" class=\"wp-image-273\" srcset=\"https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141-1024x535.png 1024w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141-300x157.png 300w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141-768x401.png 768w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141-1536x803.png 1536w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141-1568x819.png 1568w, https:\/\/docs.theironnetwork.org\/hulk\/wp-content\/uploads\/sites\/13\/2020\/04\/Selection_141.png 1598w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can add the component on any page in the template. You need to follow the steps given below: \u200c Step 1:\u00a0Please add the code given below in the page where you want to add the component. &lt;AppBar position=&#8221;static&#8221;> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Toolbar> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;IconButton edge=&#8221;start&#8221; className={`menu-icon ${classes.menuButton}`} color=&#8221;inherit&#8221; aria-label=&#8221;menu&#8221;> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;MenuIcon \/> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/IconButton> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Typography variant=&#8221;h6&#8243; className={classes.title}> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0News \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Typography> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Button [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/189"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":3,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/189\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}