Laravel Layout


Main Layout

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>

<html lang="❴❴ session()->get('locale') ?? app()->getLocale() ❵❵" class="light-style" 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 -->
    @include('layouts/sections/styles')

    <!-- Include Scripts for customizer, helper, analytics, config -->
    @include('layouts/sections/scriptsIncludes')
  </head>

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

    <!-- Include Scripts -->
    @include('layouts/sections/scripts')

  </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/style.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=Open+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' .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-core-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/' .$configData['theme'] .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.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.

<!-- laravel style -->
<script src="❴❴ asset('assets/vendor/js/helpers.js') ❵❵"></script>
@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>

  <!--? 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>
  <script>
    window.templateCustomizer = new TemplateCustomizer(❴
      cssPath: '',
      themesPath: '',
      defaultShowDropdownOnHover: ❴❴$configData['showDropdownOnHover']❵❵, // true/false (for horizontal layout only)
      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($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/i18n/i18n.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/typeahead-js/typeahead.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/feather-icons/feather.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-->
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->
<script>
  feather.replace();
</script>

Dark Layout

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

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

RTL

Sneat provides two configuration options for RTL.

  1. 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

  2. return [
        'custom' => [
          ...
          'myRTLSupport' => true,
          ...
        ],
      ];
  3. 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

  4. 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
layout-menu-flipped Set layout menu position to opposite direction
layout-menu-offcanvas Make layout vertical menu offcanvas
© 2017- ThemeSelection, Hand-crafted & Made with ❤️