Extendable Kompo Layouts
Blade layouts are the backbones of your SPA.

Default Kompo Layout

Kompo comes with a default blade template `kompo::app` with the following slots that will display menus and content:

Other configurations are explained in docs below or in the examples section.

You may call a Form or Query directly from a route and they will be displayed in the content section.

You may extend the default template as many times as you wish by specifying which menus, styles or scripts each template will use.

Extending the layout

For menus, you may extend the default template by injecting the following available slots `Navbar`, `LeftSidebar`, `RightSidebar` & `Footer`, which are all optional.

//In your app.blade.php
@extends('kompo::app', [
  'Navbar' => new App\Menus\Navbar(), 
  'LeftSidebar' => new App\Menus\LeftSidebar(), 
  'RightSidebar' => new App\Menus\RightSidebar(), 
  'Footer' => new App\Menus\Footer()
])

Custom Styles & Scripts

As shown above, you may add any kind of content in the `<header>` section or at the bottom of your document in the `scripts` section thanks to Blade's `push` directive, which allows us to stack content in our HTML document. For example:

`@push`('header')
   <meta http-equiv="x-ua-compatible" content="IE=edge">
`@endpush`

`@push`('scripts')
   <script>
      $(document).ready(function(){
         console.log('Loaded!')
      })
   </script>
`@endpush`

In addition to that, if you have followed the `laravel-mix` default naming convention for assets, the template will also automatically include the generated CSS and JS files (assuming the files exist). The default naming convention is the following:

  • `css/app.css`
  • `js/manifest.js`
  • `js/vendor.js`
  • `js/app.js`

However, if you chose a different naming conventions or need to include multiple separate assets, you may pass an array of CSS and JS paths in the `VlStyles` and `VlScripts` variables:

@extends('kompo::app', [
   'VlStyles' => [
      mix('css/main-styles.css'),
      asset('css/custom-styles.css')
   ],
   'VlScripts' => [
      mix('js/custom-manifest.js'),
      asset('js/vendor/custom-vendor.js'),
      mix('js/main-script.js')
   ]
])

Favicons

Kompo currently offers a free template for favicons generated with realfavicongenerator.net. All you have to do is to dump the favicons generated by this site into your `public/favicon` folder and Kompo will pick it up.

If you wish to use any other favicon assets, just push them in the `header` section.

`@push`('header')
<link rel="icon" type="image/png" href="favicon-32x32.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
`@endpush`