Laravel Starter Template Generator

Material ripple

PACE.js loader

RTL support

RTL mode

Theme settings panel

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

const mix = require('laravel-mix');
const glob = require('glob')
const path = require('path')

/*
 |--------------------------------------------------------------------------
 | 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 = {
    precision: 5
};

{% if not settingsPanel -%}
// Core stylesheets
mix.sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% endif %}.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/uikit.scss', 'public/vendor/css', sassOptions);
{%- else -%}
// Core stylesheets
mix.sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/colors-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/uikit.scss', 'public/vendor/css', sassOptions);

// Themes
mix.sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-air.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-air-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-corporate.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-corporate-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-cotton.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-cotton-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-gradient.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-gradient-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-paper.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-paper-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-shadow.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-shadow-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-soft.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-soft-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-sunrise.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-sunrise-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-twitlight.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-twitlight-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-vibrant.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass{% if rtlSupport %}/rtl{% endif %}/theme-vibrant-material.scss', 'public/vendor/css', sassOptions);
{%- endif %}

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

// Libs
mixAssetsDir('vendor/libs/**/*.js', (src, dest) => mix.scripts(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 %} 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{% 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{% 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{% 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{% 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 %}">

{% 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: '',
            pathResolver: function(path) {
                var resolvedPaths = {
                    // Core stylesheets
                    //
                    @foreach (['bootstrap', 'appwork', 'colors'] as $name)
                    '{% raw %}{{{% endraw %} $name {% raw %}}}{% endraw %}.css': '{% raw %}{{{% endraw %} mix("/vendor/css/{$name}.css") {% raw %}}}{% endraw %}',
                    '{% raw %}{{{% endraw %} $name {% raw %}}}{% endraw %}-material.css': '{% raw %}{{{% endraw %} mix("/vendor/css/{$name}-material.css") {% raw %}}}{% endraw %}',
                    @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)
                    'theme-{% raw %}{{{% endraw %} $name {% raw %}}}{% endraw %}.css': '{% raw %}{{{% endraw %} mix("/vendor/css/theme-{$name}.css") {% raw %}}}{% endraw %}',
                    'theme-{% raw %}{{{% endraw %} $name {% raw %}}}{% endraw %}-material.css': '{% raw %}{{{% endraw %} mix("/vendor/css/theme-{$name}-material.css") {% raw %}}}{% endraw %}',
                    @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>