Laravel Starter Template Generator

Material ripple

PACE.js loader

RTL support

RTL mode

Theme settings panel

Light style

Material style

Dark style

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

const { EnvironmentPlugin } = require('webpack')
const mix = require('laravel-mix')
const glob = require('glob')
const path = require('path')

/*
 |--------------------------------------------------------------------------
 | Mix config
 |--------------------------------------------------------------------------
 */

mix.options({
    resourceRoot: process.env.ASSET_URL || undefined,
    postCss: [require('autoprefixer')]
})

/*
 |--------------------------------------------------------------------------
 | Configure Webpack
 |--------------------------------------------------------------------------
 */

mix.webpackConfig({
    output: {
        publicPath: process.env.ASSET_URL || undefined,
        libraryTarget: 'window'
    },
    plugins: [
        new EnvironmentPlugin({
            // Application's public url
            BASE_URL: process.env.ASSET_URL ? `${process.env.ASSET_URL}/` : '/'
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            include: [
                path.join(__dirname, 'node_modules/bootstrap/'),
                path.join(__dirname, 'node_modules/bootstrap-slider/'),
                path.join(__dirname, 'node_modules/popper.js/'),
                path.join(__dirname, 'node_modules/bootstrap-table/'),
                path.join(__dirname, 'node_modules/shepherd.js/'),
                path.join(__dirname, 'node_modules/flot/'),
                path.join(__dirname, 'node_modules/plyr/'),
                path.join(__dirname, 'node_modules/rangetouch/')
            ],
            loader: 'babel-loader',
            options: {
                presets: [['@babel/preset-env', { targets: 'last 2 versions, ie >= 10' }]],
                plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                babelrc: false
            }
        }]
    },
    externals: {
        'jquery': 'jQuery',
        'moment': 'moment',
        'datatables.net': '$.fn.dataTable',
        'spin.js': 'Spinner',
        'jsdom': 'jsdom',
        'd3': 'd3',
        'eve': 'eve',
        'velocity': 'Velocity',
        'hammer': 'Hammer',
        'raphael': 'Raphael',
        'jquery-mapael': 'Mapael',
        'pace': '"pace-progress"',
        'popper.js': 'Popper',
        'jquery-validation': 'jQuery',

// blueimp-file-upload plugin
        'canvas-to-blob': 'blueimpDataURLtoBlob',
        'blueimp-tmpl': 'blueimpTmpl',
        'load-image': 'blueimpLoadImage',
        'load-image-meta': 'null',
        'load-image-scale': 'null',
        'load-image-exif': 'null',
        'jquery-ui/ui/widget': 'null',
        './jquery.fileupload': 'null',
        './jquery.fileupload-process': 'null',
        './jquery.fileupload-image': 'null',
        './jquery.fileupload-video': 'null',
        './jquery.fileupload-validate': 'null',

// blueimp-gallery plugin
        './blueimp-helper': 'jQuery',
        './blueimp-gallery': 'blueimpGallery',
        './blueimp-gallery-video': 'blueimpGallery'
    }
})

/*
 |--------------------------------------------------------------------------
 | Vendor assets
 |--------------------------------------------------------------------------
 */

function mixAssetsDir(query, cb) {
    (glob.sync('resources/assets/' + query) || []).forEach(f => {
        f = f.replace(/[\\\/]+/g, '/')
        cb(f, f.replace('resources/assets', 'public'))
    })
}

const sassOptions = {
    implementation: require('node-sass')
}

{% if not settingsPanel -%}
// Core stylesheets
mix.sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/uikit.scss', 'public/vendor/css', sassOptions)
{%- else -%}
// Core stylesheets
  {%- for fileName in ['appwork', 'bootstrap', 'colors'] -%}{% set isFirstLoop = loop.first %}{% for styleName in styles %}
{% if isFirstLoop and loop.first %}mix{% else %}   {% endif -%}
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/{{fileName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.scss', 'public/vendor/css', sassOptions)
  {%- endfor %}{% endfor %}
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/uikit.scss', 'public/vendor/css', sassOptions)

// Themes
  {%- for themeName in ['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] -%}{% set isFirstLoop = loop.first %}{% for styleName in styles %}
{% if isFirstLoop and loop.first %}mix{% else %}   {% endif -%}
    .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-{{themeName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.scss', 'public/vendor/css', sassOptions)
  {%- endfor %}{% endfor %}
{%- endif %}

// Core javascripts
mixAssetsDir('vendor/js/**/*.js', (src, dest) => mix.js(src, dest))

// Libs
mixAssetsDir('vendor/libs/**/*.js', (src, dest) => mix.js(src, dest))
mixAssetsDir('vendor/libs/**/!(_)*.scss', (src, dest) => mix.sass(src, dest.replace(/\.scss$/, '.css'), sassOptions))

// Pages
mixAssetsDir('vendor/sass/pages/**/!(_)*.scss', (src, dest) => mix.sass(src, dest.replace(/(\\|\/)sass(\\|\/)/, '$1css$2').replace(/\.scss$/, '.css'), sassOptions))

// Fonts
mixAssetsDir('vendor/fonts/*.css', (src, dest) => mix.copy(src, dest))
mixAssetsDir('vendor/fonts/*/*', (src, dest) => mix.copy(src, dest))

/*
 |--------------------------------------------------------------------------
 | Application assets
 |--------------------------------------------------------------------------
 */

mix.js('resources/assets/js/application.js', 'public/js')
   .sass('resources/assets/sass/application.scss', 'public/css')

mix.version()

<!DOCTYPE html>

<html lang="{% raw %}{{{% endraw %} str_replace('_', '-', app()->getLocale()) {% raw %}}}{% endraw %}"{% if rtlMode %} dir="rtl"{% endif %} class="{{style}}-style{% if pageLayout != 'blank' and layoutPosition %} layout-{{layoutPosition}}{% endif %}{% if reversedLayout %} layout-reversed{% endif %}{% if collapsedSidenav %} layout-collapsed{% endif %}{% if fixedNavbar %} layout-navbar-fixed{% endif %}{% if fixedFooter %} layout-footer-fixed{% endif %}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<title>{% raw %}{{{% endraw %} isset($title) ? $title.' - ' : '' {% raw %}}}{% endraw %}Laravel Starter</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

<link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/fonts/fontawesome.css') {% raw %}}}{% endraw %}">
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/fonts/ionicons.css') {% raw %}}}{% endraw %}">
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/fonts/linearicons.css') {% raw %}}}{% endraw %}">
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/fonts/open-iconic.css') {% raw %}}}{% endraw %}">
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/fonts/pe-icon-7-stroke.css') {% raw %}}}{% endraw %}">

<link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/css/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css') {% raw %}}}{% endraw %}"{% if settingsPanel %} class="theme-settings-bootstrap-css"{% endif %}>
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/css/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css') {% raw %}}}{% endraw %}"{% if settingsPanel %} class="theme-settings-appwork-css"{% endif %}>
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/css/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css') {% raw %}}}{% endraw %}"{% if settingsPanel %} class="theme-settings-theme-css"{% endif %}>
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/css/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css') {% raw %}}}{% endraw %}"{% if settingsPanel %} class="theme-settings-colors-css"{% endif %}>
    <link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/css/uikit.css') {% raw %}}}{% endraw %}">

<script src="{% raw %}{{{% endraw %} mix('/vendor/js/polyfills.js') }}"></script>
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

{% if materialRipple %}
    
    <script src="{% raw %}{{{% endraw %} mix('/vendor/js/material-ripple.js') {% raw %}}}{% endraw %}"></script>
    {% endif %}
    {%- if materialRipple and not settingsPanel -%}
    <script>window.attachMaterialRippleOnLoad();</script>
    {% endif %}

{% if pageLayout != 'blank' or settingsPanel %}
    
    <script src="{% raw %}{{{% endraw %} mix('/vendor/js/layout-helpers.js') {% raw %}}}{% endraw %}"></script>
    {% endif %}

{% if settingsPanel %}
    
    <script src="{% raw %}{{{% endraw %} mix('/vendor/js/theme-settings.js') {% raw %}}}{% endraw %}"></script>
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            {%- if styles.length < 3 %}
            styles: ['{{ styles.join("', '")|safe }}'],
            {%- endif %}
            pathResolver: function(path) {
                var resolvedPaths = {
                    // Core stylesheets
                    //
                    @foreach (['bootstrap', 'appwork', 'colors'] as $name)
                    {%- for styleName in styles %}
                    '{% raw %}{{{% endraw %} $name {% raw %}}}{% endraw %}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css': '{% raw %}{{{% endraw %} mix("/vendor/css/{$name}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css") {% raw %}}}{% endraw %}',
                    {%- endfor %}
                    @endforeach

// UI Kit
                    'uikit.css': '{% raw %}{{{% endraw %} mix("/vendor/css/uikit.css") {% raw %}}}{% endraw %}',

// Themes
                    //
                    @foreach (['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] as $name)
                    {%- for styleName in styles %}
                    'theme-{% raw %}{{{% endraw %} $name {% raw %}}}{% endraw %}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css': '{% raw %}{{{% endraw %} mix("/vendor/css/theme-{$name}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css") {% raw %}}}{% endraw %}',
                    {%- endfor %}
                    @endforeach
                }

return resolvedPaths[path] || path;
            }
        });
    </script>
    {% endif %}

{% if paceLoader %}
    
    <script src="{% raw %}{{{% endraw %} mix('/vendor/js/pace.js') {% raw %}}}{% endraw %}"></script>
    {% endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}

<link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') {% raw %}}}{% endraw %}">
    {% endif %}

@yield('styles')

<link rel="stylesheet" href="{% raw %}{{{% endraw %} mix('/css/application.css') {% raw %}}}{% endraw %}">

</head>
<body>
    {% if paceLoader %}
    
    <div class="page-loader"><div class="bg-primary"></div></div>
    {% endif %}

@yield('layout-content')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{% raw %}{{{% endraw %} mix('/vendor/libs/popper/popper.js') {% raw %}}}{% endraw %}"></script>
    <script src="{% raw %}{{{% endraw %} mix('/vendor/js/bootstrap.js') {% raw %}}}{% endraw %}"></script>
    {%- if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
    <script src="{% raw %}{{{% endraw %} mix('/vendor/js/sidenav.js') {% raw %}}}{% endraw %}"></script>
    {%- endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}

<script src="{% raw %}{{{% endraw %} mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') {% raw %}}}{% endraw %}"></script>
    {% endif %}

@yield('scripts')

<script src="{% raw %}{{{% endraw %} mix('/js/application.js') {% raw %}}}{% endraw %}"></script>

</body>
</html>

<a href="{% raw %}{{{% endraw %} route('home') {% raw %}}}{% endraw %}" class="navbar-brand">Laravel Starter</a>

@empty($hide_layout_sidenav_toggle)
    
    <div class="layout-sidenav-toggle navbar-nav align-items-lg-center mr-auto mr-lg-4">
        <a class="nav-item nav-link px-0 ml-2" href="javascript:void(0)">
            <i class="ion ion-md-menu text-large align-middle"></i>
        </a>
    </div>
    @endempty

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#layout-navbar-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>

</nav>

<ul class="sidenav-inner{% raw %}{{{% endraw %} empty($layout_sidenav_horizontal) ? ' py-1' : '' {% raw %}}}{% endraw %}">

</ul>
</div>

$enable-rtl-support: {% if rtlSupport %}true{% else %}false{% endif %};
$enable-light-style: {% if (not settingsPanel and style == 'light') or (settingsPanel and styles.indexOf('light') !== -1) %}true{% else %}false{% endif %};
$enable-material-style: {% if (not settingsPanel and style == 'material') or (settingsPanel and styles.indexOf('material') !== -1) %}true{% else %}false{% endif %};
$enable-dark-style: {% if (not settingsPanel and style == 'dark') or (settingsPanel and styles.indexOf('dark') !== -1) %}true{% else %}false{% endif %};

@mixin feature-ltr($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      html:not([dir=rtl]) & { @content; }
    } @else {
      html:not([dir=rtl]) { @content; }
    }
  } @else {
    @content;
  }
}

@mixin feature-ltr-style() {
  @if $enable-rtl-support {
    &:not([dir=rtl]) { @content; }
  } @else {
    @content;
  }
}

@mixin feature-rtl($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      [dir=rtl] & { @content; }
    } @else {
      [dir=rtl] { @content; }
    }
  }
}

@mixin feature-rtl-style() {
  @if $enable-rtl-support {
    &[dir=rtl] { @content; }
  }
}