{"id":493,"date":"2019-09-03T10:01:56","date_gmt":"2019-09-03T10:01:56","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=493"},"modified":"2019-09-25T03:37:26","modified_gmt":"2019-09-25T03:37:26","slug":"layouts-2","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/layouts-2\/","title":{"rendered":"Layouts"},"content":{"rendered":"\n<h5>Default Layout<\/h5>\n\n\n\n<p>Vuely Angular by default has traditional admin layout but also provides you flexibility to choose your own.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dash.png\"><img loading=\"lazy\" width=\"1024\" height=\"523\" src=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dash-1024x523.png\" alt=\"\" class=\"wp-image-499\" srcset=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dash-1024x523.png 1024w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dash-300x153.png 300w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dash-768x392.png 768w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dash.png 1305w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Default Layout<\/figcaption><\/figure><\/div>\n\n\n\n<h6 id=\"mini-sidebar\">Mini Sidebar<a href=\"#mini-sidebar\"><\/a><\/h6>\n\n\n\n<p>To enable mini sidebar layout, go to<code>src-&gt;app-&gt;Layouts-&gt;VerticalLayout<\/code> and open <code>VerticalLayout.component.html <\/code>file, Now search for the collapsed-sidebar class at div <code>&lt;div [dir]=\"layout\"<\/code>  &amp; change its value to true.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">'collapsed-sidebar': true<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-mini.png\"><img loading=\"lazy\" width=\"1024\" height=\"523\" src=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-mini-1024x523.png\" alt=\"\" class=\"wp-image-500\" srcset=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-mini-1024x523.png 1024w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-mini-300x153.png 300w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-mini-768x392.png 768w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-mini.png 1305w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Mini Sidebar Layout<\/figcaption><\/figure><\/div>\n\n\n\n<h5>Dark Mode<\/h5>\n\n\n\n<p>To enable the dark mode in the template, go to<code>src-&gt;app-&gt;Layouts-&gt;VerticalLayout<\/code> and open <code>VerticalLayout.component.html <\/code>file &amp; search for the <code>theme-light <\/code>class at div <code>&lt;div [dir]=\"layout\"<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div [dir]=\"layout\" class=\"app-main theme-light ....\"&gt;<br>    ....<br>&lt;\/div&gt;<br><\/pre>\n\n\n\n<p>Now Replace the <code>\"theme-light\"<\/code> class with  <code>\"theme-dark\"<\/code> class. Like mention below :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div [dir]=\"layout\" class=\"app-main theme-dark ....\"&gt;<br>    ....<br>&lt;\/div&gt;<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dark.png\"><img loading=\"lazy\" width=\"1024\" height=\"523\" src=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dark-1024x523.png\" alt=\"\" class=\"wp-image-501\" srcset=\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dark-1024x523.png 1024w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dark-300x153.png 300w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dark-768x392.png 768w, https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/ang-dark.png 1305w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Dark Mode<\/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=\"493\" 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=\"493\" 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>Default Layout Vuely Angular by default has traditional admin layout but also provides you flexibility to choose your own. Mini Sidebar To enable mini sidebar layout, go tosrc-&gt;app-&gt;Layouts-&gt;VerticalLayout and open VerticalLayout.component.html file, Now search for the collapsed-sidebar class at div &lt;div [dir]=&#8221;layout&#8221; &amp; change its value to true. &#8216;collapsed-sidebar&#8217;: true Dark Mode To enable the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":56,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/493"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":5,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/493\/revisions"}],"predecessor-version":[{"id":722,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/493\/revisions\/722"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}