Laravel Layout

Main Layout

Note: There is internal condition in layoutMaster to select vertical or horizontal layout. This option can be updated from custom.php file. Find customization-options here

We have included styles and scripts files in Common Master Layout. You can find these files at the same path inside resources/views/ folder.

<!DOCTYPE html>
    @php
    $menuFixed = ($configData['layout'] === 'vertical') ? ($menuFixed ?? '') : (($configData['layout'] === 'front') ? '' : $configData['headerType']);
    $navbarType = ($configData['layout'] === 'vertical') ? $configData['navbarType']: (($configData['layout'] === 'front') ? 'layout-navbar-fixed': '');
    $isFront = ($isFront ?? '') == true ? 'Front' : ''
    $contentLayout = (isset($container) ? (($container === 'container-xxl') ? "layout-compact" : "layout-wide") : "");
@endphp

    <html lang="❴❴ session()->get('locale') ?? app()->getLocale() ❵❵" class="light-style {{($contentLayout ?? '')}}" dir="ltr" data-theme="theme-default" data-framework="laravel">

    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

      <title>@yield('title')</title>
      <meta name="description" content="" />
      <meta name="keywords" content="">
      <!-- laravel CRUD token -->
      <meta name="csrf-token" content="❴❴ csrf_token() ❵❵">
      <!-- Favicon -->
      <link rel="icon" type="image/x-icon" href="❴❴ asset('assets/img/favicon/favicon.ico') ❵❵" />

      <!-- Include Styles -->
      <!-- $isFront is used to append the front layout styles only on the front layout otherwise the variable will be blank -->
      @include('layouts/sections/styles' . $isFront)

      <!-- Include Scripts for customizer, helper, analytics, config -->
      <!-- $isFront is used to append the front layout scriptsIncludes only on the front layout otherwise the variable will be blank -->
      @include('layouts/sections/scriptsIncludes' . $isFront)
    </head>

    <body>

      <!-- Layout Content -->
      @yield('layoutContent')
      <!--/ Layout Content -->

      <!-- Include Scripts -->
      <!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
      @include('layouts/sections/scripts' . $isFront)

    </body>

  </html>

Styles

Included styles file contains all the core css, theme css, demo css and more..

You can find this file at layouts/sections/styles.blade.php

$configData provides data from custom.php to compile style according to layout settings.

<!-- BEGIN: Theme CSS-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/boxicons.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/fontawesome.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/flag-icons.css')) ❵❵" />
<!-- Core CSS -->
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/core.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-core-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/' .$configData['theme'].'.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-theme-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/css/demo.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/libs/typeahead-js/typeahead.css')) ❵❵" />

<!-- Vendor Styles -->
@yield('vendor-style')


<!-- Page Styles -->
@yield('page-style')

Head Scripts

This file includes helpers, customization, config js along with templateCustomizer initialization script :

You can find this file at layouts/sections/scriptsIncludes.blade.php

$configData provides data from custom.php to compile style according to layout settings.

@php
$menuCollapsed = ($configData['menuCollapsed'] === 'layout-menu-collapsed') ? json_encode(true) : false;
@endphp
<!-- laravel style -->
<script src="❴❴ asset('assets/vendor/js/helpers.js') ❵❵"></script>
<!-- beautify ignore:start -->
@if ($configData['hasCustomizer'])
  <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
  <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
  <script src="❴❴ asset('assets/vendor/js/template-customizer.js') ❵❵"></script>
@endif

  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <script src="❴❴ asset('assets/js/config.js') ❵❵"></script>

@if ($configData['hasCustomizer'])
  <script>
    window.templateCustomizer = new TemplateCustomizer({
      cssPath: '',
      themesPath: '',
      defaultStyle: "❴❴$configData['styleOpt']❵❵",
      defaultShowDropdownOnHover: "❴❴$configData['showDropdownOnHover']❵❵", // true/false (for horizontal layout only)
      lang: '❴❴ app()->getLocale() ❵❵',
      pathResolver: function(path) {
        var resolvedPaths = {
          // Core stylesheets
          @foreach (['core'] as $name)
            '❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}.css")) ❵❵',
            '❴❴ $name ❵❵-dark.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}-dark.css")) ❵❵',
          @endforeach

          // Themes
          @foreach (['default', 'bordered', 'semi-dark'] as $name)
            'theme-❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.css")) ❵❵',
            'theme-❴❴ $name ❵❵-dark.css':
            '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css")) ❵❵',
          @endforeach
        }
        return resolvedPaths[path] || path;
      },
      'controls': <?php echo json_encode($configData['customizerControls']); ?>,
    });
  </script>
@endif

Scripts

This file includes main js along with template related vendor scripts :

You can find this file at layouts/sections/scripts.blade.php

<!-- BEGIN: Vendor JS-->
<script src="❴❴ asset(mix('assets/vendor/libs/jquery/jquery.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/popper/popper.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/js/bootstrap.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/hammer/hammer.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/typeahead-js/typeahead.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/js/menu.js')) ❵❵"></script>
@yield('vendor-script')
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="❴❴ asset(mix('assets/js/main.js')) ❵❵"></script>

<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
@stack('pricing-script')
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->

Front Layout

This layout used for front pages

We have added Common Master Layout, Navbar-front and Navbar-front in Layout Front. You can find these files at the path inside resources/views/ folder.

@php
$configData = Helper::appClasses();
$isFront = true;
@endphp

@section('layoutContent')

@extends('layouts/commonMaster' )

@include('layouts/sections/navbar/navbar-front')

<!-- Sections:Start -->
@yield('content')
<!-- / Sections:End -->

@include('layouts/sections/footer/footer-front')
@endsection

Styles (Front)

Included styles file contains all the core css, theme css, demo css and more..

You can find this file at layouts/sections/stylesFront.blade.php

<!-- BEGIN: Theme CSS-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/boxicons.css')) ❵❵" />
<!-- Core CSS -->
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/core.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-core-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/' .$configData['theme'].'.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-theme-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/css/demo.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css/pages/front-page.css')) ❵❵" />
<!-- Vendor Styles -->
@yield('vendor-style')


<!-- Page Styles -->
@yield('page-style')

Head Scripts (Front)

This file includes helpers, customization, config js along with templateCustomizer initialization script :

You can find this file at layouts/sections/scriptsIncludesFront.blade.php

<!-- laravel style -->
<script src="❴❴ asset('assets/vendor/js/helpers.js') ❵❵"></script>
<!-- beautify ignore:start -->
@if ($configData['hasCustomizer'])
  <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
  <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
  <script src="❴❴ asset('assets/vendor/js/template-customizer.js') ❵❵"></script>
@endif

  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <script src="❴❴ asset('assets/js/front-config.js') ❵❵"></script>

@if ($configData['hasCustomizer'])
  <script>
    window.templateCustomizer = new TemplateCustomizer({
      cssPath: '',
      themesPath: '',
      defaultStyle: "❴❴$configData['styleOpt']❵❵",
      displayCustomizer: "❴❴$configData['displayCustomizer']❵❵",
      lang: '❴❴ app()->getLocale() ❵❵',
      pathResolver: function(path) {
        var resolvedPaths = {
          // Core stylesheets
          @foreach (['core'] as $name)
            '❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}.css")) ❵❵',
            '❴❴ $name ❵❵-dark.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}-dark.css")) ❵❵',
          @endforeach

          // Themes
          @foreach (['default', 'bordered', 'semi-dark'] as $name)
            'theme-❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.css")) ❵❵',
            'theme-❴❴ $name ❵❵-dark.css':
            '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css")) ❵❵',
          @endforeach
        }
        return resolvedPaths[path] || path;
      },
      'controls': <?php echo json_encode(['rtl', 'style']); ?>,

    });
  </script>
@endif

Scripts (Front)

This file includes main js along with template related vendor scripts :

You can find this file at layouts/sections/scriptsFront.blade.php


  <!-- BEGIN: Vendor JS-->
  <script src="❴❴asset('assets/vendor/js/dropdown-hover.js')❵❵"></script>
  <script src="❴❴asset('assets/vendor/js/mega-dropdown.js')❵❵"></script>
  <script src="❴❴ asset(mix('assets/vendor/libs/popper/popper.js')) ❵❵"></script>
  <script src="❴❴ asset(mix('assets/vendor/js/bootstrap.js')) ❵❵"></script>
  
  @yield('vendor-script')
  <!-- END: Page Vendor JS-->
  <!-- BEGIN: Theme JS-->
  <script src="❴❴ asset(mix('assets/js/front-main.js')) ❵❵"></script>
  <!-- END: Theme JS-->
  <!-- Pricing Modal JS-->
  @stack('pricing-script')
  <!-- END: Pricing Modal JS-->
  <!-- BEGIN: Page JS-->
  @yield('page-script')
  <!-- END: Page JS-->

Dark Layout

To set default layout to dark layout, just need to update custom.php file's myStyle option :

return [
  'custom' => [
    ...
    'myStyle' => 'dark',
    ...
  ],
];

You can also add page level configuration to set page to dark layout as described here

RTL

Frest provides two configuration options for RTL.

To use template with RTL support, you need to update custom.php file's myRTLSupport option.

If you want to use LTR & RTL options both, you must set it to true else RTL Layout won't work.

If you want to use only LTR not RTL, you can set it to false

return [
    'custom' => [
      ...
      'myRTLSupport' => true,
      ...
    ],
  ];

To use template default RTL Layout, you need to update custom.php file's myRTLMode option.

If you want to set default layout to RTL, you can set this option to true

return [
    'custom' => [
      ...
      'myRTLMode' => true,
      ...
    ],
  ];

Layout Options

You can configure the initial layout by setting control classes to the <html> element.

Find all the layout classes with it's description below :

Class	Description
`layout-menu-collapsed`	Set layout collapsed for vertical menu
`layout-menu-fixed`	Set layout menu fixed
`layout-navbar-fixed`	Set layout navbar position to fixed
`layout-footer-fixed`	Set layout footer position to fixed