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

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/ 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 myStyle option :

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

RTL

Vuexy 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,
      ...
    ],
  ];

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

    3. 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
© 2017- Pixinvent, Hand-crafted & Made with ❤️