Horizontal Layouts | Skote - Responsive Bootstrap 4 Admin Dashboard

Horizontal menu configuration

If you would like to have Horizontal Menu (or Topnav) based layout,

HTML: Simply update <body data-layout="horizontal" data-topbar="dark"> in the src/partials/body.html file and
Remove other includes and add @@include('horizontal.html') in the src/partials/menu.html file.
Laravel: You can simply use copy paste the resources/views/layouts/master-layouts.blade.php code into the master.blade.php to make changes in all the pages.

In order to add, change or remove any ui elements from the top bar, simply edit in file src/partials/horizontal.html. The change would reflect in all the files automatically.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform in the resources/views/layouts/master.blade.php file:

Topbar Light

Keep your body element with data attribute data-topbar="light" data-layout="horizontal" E.g. <body data-topbar="light" data-layout="horizontal"> to have light topbar and dark menubar.

Colored Header

Keep your body element with data attribute data-topbar="colored" data-layout="horizontal" E.g. <body data-topbar="colored" data-layout="horizontal"> to have colored topbar and dark menubar.

Boxed Layout

Keep your body element with data attribute data-layout-size="boxed" data-layout="horizontal" E.g. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.

Scrollable

Keep your body element with data attribute data-layout-scrollable="true" data-layout="horizontal" E.g. <body data-layout-scrollable="true" data-layout="horizontal" > to have scrollable layout.

Preloader

In order to add pre-loader in your page, include following html after body element.

<div id="preloader">
                                                                        <div id="status">
                                                                            <div class="spinner-chase">
                                                                                <div class="chase-dot"></div>
                                                                                <div class="chase-dot"></div>
                                                                                <div class="chase-dot"></div>
                                                                                <div class="chase-dot"></div>
                                                                                <div class="chase-dot"></div>
                                                                                <div class="chase-dot"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

Description
Use pre-built layouts