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/layouts folder.

<!DOCTYPE html>
@php
  use Illuminate\Support\Str;
  use App\Helpers\Helpers;

  $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') : '';

  // Get skin name from configData - only applies to admin layouts
  $isAdminLayout = !Str::contains($configData['layout'] ?? '', 'front');
  $skinName = $isAdminLayout ? $configData['skinName'] ?? 'default' : 'default';

  // Get semiDark value from configData - only applies to admin layouts
  $semiDarkEnabled = $isAdminLayout && filter_var($configData['semiDark'] ?? false, FILTER_VALIDATE_BOOLEAN);

  // Generate primary color CSS if color is set
  $primaryColorCSS = '';
  if (isset($configData['color']) && $configData['color']) {
      $primaryColorCSS = Helpers::generatePrimaryColorCSS($configData['color']);
  }

@endphp

<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
  class="{{ $navbarType ?? '' }} {{ $contentLayout ?? '' }} {{ $menuFixed ?? '' }} {{ $menuCollapsed ?? '' }} {{ $footerFixed ?? '' }} {{ $customizerHidden ?? '' }}"
  dir=" {{ $configData['textDirection'] }}" data-skin="{{ $skinName }}" data-assets-path=" {{ asset('/assets') . '/' }}"
  data-base-url="{{ url('/') }}" data-framework="laravel" data-template="{{ $configData['layout'] }}-menu-template"
  data-bs-theme="{{ $configData['theme'] }}" @if ($isAdminLayout && $semiDarkEnabled) data-semidark-menu="true" @endif>

<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') | {{ config('variables.templateName') ? config('variables.templateName') : 'TemplateName' }}
    - {{ config('variables.templateSuffix') ? config('variables.templateSuffix') : 'TemplateSuffix' }}
  </title>
  <meta name="description"
    content="{{ config('variables.templateDescription') ? config('variables.templateDescription') : '' }}" />
  <meta name="keywords"
    content="{{ config('variables.templateKeyword') ? config('variables.templateKeyword') : '' }}" />
  <meta property="og:title" content="{{ config('variables.ogTitle') ? config('variables.ogTitle') : '' }}" />
  <meta property="og:type" content="{{ config('variables.ogType') ? config('variables.ogType') : '' }}" />
  <meta property="og:url" content="{{ config('variables.productPage') ? config('variables.productPage') : '' }}" />
  <meta property="og:image" content="{{ config('variables.ogImage') ? config('variables.ogImage') : '' }}" />
  <meta property="og:description"
    content="{{ config('variables.templateDescription') ? config('variables.templateDescription') : '' }}" />
  <meta property="og:site_name"
    content="{{ config('variables.creatorName') ? config('variables.creatorName') : '' }}" />
  <meta name="robots" content="noindex" />
  <!-- laravel CRUD token -->
  <meta name="csrf-token" content="{{ csrf_token() }}" />
  <!-- Canonical SEO -->
  <link rel="canonical" href="{{ config('variables.productPage') ? config('variables.productPage') : '' }}" />
  <!-- 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)

  @if ($primaryColorCSS && (config('custom.custom.primaryColor') || isset($_COOKIE['admin-primaryColor']) || isset($_COOKIE['front-primaryColor'])))
    <!-- Primary Color Style -->
    <style id="primary-color-style">
      {!! $primaryColorCSS !!}
    </style>
  @endif

  <!-- 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 -->

  {{- - remove while creating package - -}}
  <div class="buy-now">
    <a href="{{ config('variables.productPage') }}" target="_blank" class="btn btn-danger btn-buy-now">Buy Now</a>
  </div>
  {{- - remove while creating package end - -}}

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

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.

Scripts#

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

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

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/layouts 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

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

Scripts (Front)#

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

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

Dark Layout#

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

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

RTL#

Sneat provides two configuration options for RTL.

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