Introduction

Code Layout

Code order is important for the template to function correctly. All the scripts except loader.js should be included at the end of body tag.

Reference

Parameters

NAME
TYPE
DESCRIPTION
NAME
$title
TYPE
string
DESCRIPTION
Title metadata content
NAME
$description
TYPE
string
DESCRIPTION
Description metadata content
NAME
$html_tag_data
TYPE
Key-Value array
DESCRIPTION
Used to add data attr to the HTML tag from within the page.
NAME
$custom_nav_data
TYPE
Key-Value array
DESCRIPTION
Used to add data attr to the .nav-container div from within the page.
NAME
@yield('css')
TYPE
html
DESCRIPTION
It is used to add the css files that the page specifically needs to the existing layout styles.
NAME
@yield('js_vendor')
TYPE
html
DESCRIPTION
It is used to add the vendor js files that the page specifically needs to the existing layout vendor js files.
NAME
@yield('js_page')
TYPE
html
DESCRIPTION
It is used to add the js files that the page specifically needs to the existing layout js files.

Layout


<!DOCTYPE html>
<html lang="en" data-url-prefix="/" data-footer="true">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>Acorn Admin Template | {{$title}}</title>
    <meta name="description" content="{{$description}}"/>
    @include('_layout.head')
</head>

<body>
<div id="root">
    <!-- Nav Content Start -->
    <div id="nav" class="nav-container d-flex">
        @include('_layout.nav')
    </div>
    <!-- Nav Content End -->

    <!-- Main Content Start -->
    <main>
        @yield('content')
    </main>
    <!-- Main Content End -->

    <!-- Footer Content Start -->
    @include('_layout.footer')
    <!-- Footer Content End -->
    
</div>
<!-- Modal Contents Start -->
@include('_layout.modal_settings')
@include('_layout.modal_search')
<!-- Modal Contents End -->

@include('_layout.scripts')
</body>

</html>

Full Layout


<!DOCTYPE html>
<html lang="en" data-url-prefix="/" data-footer="true">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>Acorn Admin Template | {{$title}}</title>
    <meta name="description" content="{{$description}}"/>
    @include('_layout.head')
</head>

<body class="h-100">
<div id="root" class="h-100">
    <!-- Background Start -->
    <div class="fixed-background"></div>
    <!-- Background End -->

    <div class="container-fluid p-0 h-100 position-relative">
        <div class="row g-0 h-100">
            <!-- Left Side Start -->
            <div class="offset-0 col-12 d-none d-lg-flex offset-md-1 col-lg h-lg-100">
                @yield('content_left')
            </div>
            <!-- Left Side End -->

            <!-- Right Side Start -->
            <div class="col-12 col-lg-auto h-100 pb-4 px-4 pt-0 p-lg-0">
                @yield('content_right')
            </div>
            <!-- Right Side End -->
        </div>
    </div>
</div>
<!-- Modal Contents Start -->
@include('_layout.modal_settings')
<!-- Modal Contents End -->

@include('_layout.scripts')
</body>

</html>