{"id":48,"date":"2019-10-09T04:33:52","date_gmt":"2019-10-09T04:33:52","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/chankya\/?page_id=48"},"modified":"2019-10-15T10:41:21","modified_gmt":"2019-10-15T10:41:21","slug":"layouts","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/chankya\/layouts\/","title":{"rendered":"Layouts"},"content":{"rendered":"\n<p>Chankya comes with four handcrafted layout. Read the documentation carefully to use following layouts in your app.<\/p>\n\n\n\n<h5 id=\"default-layout\">Default Layout<\/h5>\n\n\n\n<p>Chankya by default has icon sidebar menu admin layout but also provides you flexibility to choose your own.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"530\" height=\"360\" src=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya.jpg\" alt=\"\" class=\"wp-image-49\" srcset=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya.jpg 530w, https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya-300x204.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption>Default Layout<br><\/figcaption><\/figure><\/div>\n\n\n\n<h5 id=\"simple-sidebar\">Simple Sidebar<\/h5>\n\n\n\n<p>To enable sidebar go to src&gt;app&gt;main and open main-material.html and remove <strong>icon-sidebar-wrap  <\/strong>from &lt;div class = &#8220;app..   div. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- Main--&gt; <br>&lt;div class=\"app {{headerSkinColor}}\" [dir]=\"layout\" [ngClass]=\"themeSkinColor\" [class.app-dark]=\"dark\" [class.boxed]=\"boxed\" [class.collapsed-sidebar]=\"collapseSidebar\" [class.compact-sidebar]=\"compactSidebar\" [class.customizer-in]=\"customizerIn\" [class.chat-window--open]=\"chatWindowOpen\" [class.sidebar-closed]=\"sidebarClosed\" [class.sidebar-opened]=\"!sidebarClosed\" [class.chat-sidebar]=\"chatSidebar\"&gt;<br><\/pre>\n\n\n\n<p>After removing icon-sidebar-wrap. Now in same file search for <strong>sidebar-panel <\/strong>class and remove<strong> icon-sidebar<\/strong> from that div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"sidebar-panel chankya-sidenav\" id=\"showSidebar\"&gt;<br><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"530\" height=\"360\" src=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya3.jpg\" alt=\"\" class=\"wp-image-54\" srcset=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya3.jpg 530w, https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya3-300x204.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption>Simple Layout<\/figcaption><\/figure><\/div>\n\n\n\n<h5 id=\"mini-sidebar\">Mini Sidebar<\/h5>\n\n\n\n<p>To enable mini sidebar go to src&gt;app&gt;main and open main-material.html and remove <strong>icon-sidebar-wrap  <\/strong>from &lt;div class = &#8220;app..   div. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- Main--&gt; <br>&lt;div class=\"app {{headerSkinColor}}\" [dir]=\"layout\" [ngClass]=\"themeSkinColor\" [class.app-dark]=\"dark\" [class.boxed]=\"boxed\"<br>   [class.collapsed-sidebar]=\"collapseSidebar\" [class.compact-sidebar]=\"compactSidebar\" [class.customizer-in]=\"customizerIn\"<br>   [class.chat-window--open]=\"chatWindowOpen\" [class.sidebar-closed]=\"sidebarClosed\" [class.sidebar-opened]=\"!sidebarClosed\" [class.chat-sidebar]=\"chatSidebar\"&gt;<\/pre>\n\n\n\n<p>After removing icon-sidebar-wrap. Now in same file search for <strong>sidebar-panel <\/strong>classand remove<strong> icon-sidebar<\/strong> from that div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"sidebar-panel chankya-sidenav\" id=\"showSidebar\"&gt;<br><\/pre>\n\n\n\n<p>At last on app class div there is condiotion for collapsed sidebar set it to true in following then you will get your mini sidebar layout.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[class.collapsed-sidebar]=\"true\"<br><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"530\" height=\"360\" src=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya4.jpg\" alt=\"\" class=\"wp-image-55\" srcset=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya4.jpg 530w, https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya4-300x204.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption>Mini Sidebar Layout<\/figcaption><\/figure><\/div>\n\n\n\n<h5 id=\"boxed\">Boxed<\/h5>\n\n\n\n<p>To enable boxed layout go to src&gt;app&gt;main and open main-material.html and remove <strong>icon-sidebar-wrap  <\/strong>from &lt;div class = &#8220;app..   div. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- Main--&gt; <br>&lt;div class=\"app {{headerSkinColor}}\" [dir]=\"layout\" [ngClass]=\"themeSkinColor\" [class.app-dark]=\"dark\" [class.boxed]=\"boxed\"<br>   [class.collapsed-sidebar]=\"collapseSidebar\" [class.compact-sidebar]=\"compactSidebar\" [class.customizer-in]=\"customizerIn\"<br>   [class.chat-window--open]=\"chatWindowOpen\" [class.sidebar-closed]=\"sidebarClosed\" [class.sidebar-opened]=\"!sidebarClosed\" [class.chat-sidebar]=\"chatSidebar\"&gt;<\/pre>\n\n\n\n<p>After removing icon-sidebar-wrap. Now in same file search for <strong>sidebar-panel <\/strong>classand remove<strong> icon-sidebar<\/strong> from that div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"sidebar-panel chankya-sidenav\" id=\"showSidebar\"&gt;<br><\/pre>\n\n\n\n<p>At last on app class div there is condition for boxed sidebar set it to true as following then you will get your boxed layout.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[class.boxed]=\"true\"<br><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"530\" height=\"360\" src=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya5.jpg\" alt=\"\" class=\"wp-image-56\" srcset=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya5.jpg 530w, https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya5-300x204.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption>Boxed Layout<\/figcaption><\/figure><\/div>\n\n\n\n<h5 id=\"dark-mode\">Dark Mode<\/h5>\n\n\n\n<p>To enable dark layout go to src&gt;app&gt;main and open main-material.html and find the condition of <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[class.app-dark]=\"dark\"<\/pre>\n\n\n\n<p>and set it to true<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[class.app-dark]=\"true\"<br><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"app {{headerSkinColor}} icon-sidebar-wrap\" [dir]=\"layout\" [ngClass]=\"themeSkinColor\" [class.app-dark]=\"true\" [class.boxed]=\"boxed\"<br>   [class.collapsed-sidebar]=\"collapseSidebar\" [class.compact-sidebar]=\"compactSidebar\" [class.customizer-in]=\"customizerIn\"<br>   [class.chat-window--open]=\"chatWindowOpen\" [class.sidebar-closed]=\"sidebarClosed\" [class.sidebar-opened]=\"!sidebarClosed\" [class.chat-sidebar]=\"chatSidebar\"&gt;<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"530\" height=\"360\" src=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya6.jpg\" alt=\"\" class=\"wp-image-57\" srcset=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya6.jpg 530w, https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya6-300x204.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption>Dark Mode<\/figcaption><\/figure><\/div>\n\n\n\n<h5 id=\"rtl-layout\">Rtl Layout<\/h5>\n\n\n\n<p>To enable rtl layout go to src&gt;app&gt;main and open main-material.html and find the condition of <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[dir]=\"layout\"<br><\/pre>\n\n\n\n<p>and set it to<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">dir=\"rtl\"<br><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"app {{headerSkinColor}} icon-sidebar-wrap\" dir=\"rtl\" [ngClass]=\"themeSkinColor\" [class.app-dark]=\"dark\" [class.boxed]=\"boxed\"<br>   [class.collapsed-sidebar]=\"collapseSidebar\" [class.compact-sidebar]=\"compactSidebar\" [class.customizer-in]=\"customizerIn\"<br>   [class.chat-window--open]=\"chatWindowOpen\" [class.sidebar-closed]=\"sidebarClosed\" [class.sidebar-opened]=\"!sidebarClosed\" [class.chat-sidebar]=\"chatSidebar\"&gt;<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"530\" height=\"360\" src=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya7.jpg\" alt=\"\" class=\"wp-image-58\" srcset=\"https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya7.jpg 530w, https:\/\/docs.theironnetwork.org\/chankya\/wp-content\/uploads\/sites\/8\/2019\/10\/chankya7-300x204.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption>RTL Layout<\/figcaption><\/figure><\/div>\n<div class=\"pld-like-dislike-wrap pld-template-1\">\n    <div class=\"pld-like-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-like-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"48\" data-trigger-type=\"like\" data-restriction=\"cookie\" data-ip-check=\"0\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-up\"><\/i>\n                    <\/a>\n    <span class=\"pld-like-count-wrap pld-count-wrap\">    <\/span>\n<\/div><div class=\"pld-dislike-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-dislike-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"48\" data-trigger-type=\"dislike\" data-ip-check=\"0\" data-restriction=\"cookie\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-down\"><\/i>\n                    <\/a>\n    <span class=\"pld-dislike-count-wrap pld-count-wrap\"><\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Chankya comes with four handcrafted layout. Read the documentation carefully to use following layouts in your app. Default Layout Chankya by default has icon sidebar menu admin layout but also provides you flexibility to choose your own. Simple Sidebar To enable sidebar go to src&gt;app&gt;main and open main-material.html and remove icon-sidebar-wrap from &lt;div class = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/48"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":11,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":243,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/48\/revisions\/243"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/media?parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}