Configuration

Configuration Options in details:

Key Possible Options Details
mainLayoutType vertical(default), horizontal To switch vertical/horizontal layout. By defaul this will work with vertical layout.
theme light (default) / dark / semi-dark/ bordered Set between light theme, dark theme, semi-dark and bordered theme.
sidebarCollapsed true / false (default) Toggle display of collapse or expand.
navbarColor bg-{primary/info/success/danger/warning} Change the color of the navbar using available options.
horizontalMenuType floating (default), static,sticky Change how the menu is displayed only in Horizontal-menu Template.
verticalMenuNavbarType floating (default), static, sticky, hidden Change how the navbar is displayed only in Vertical-menu Template.
footerType static (default), sticky, hidden Change how the footer is displayed.
layoutWidth boxed (default), full Change how the layout is displayed.
showMenu true (default), false Toggle the main menu. (Warning: if set to false it will hide the main menu)
bodyClass ' '(default) Using this variable, you can add your own custom class to include in <body> tag.
pageHeader true(default), false This option is used to show breadcrumb.
contentLayout default(default), content-left-sidebar, content-right-sidebar, content-detached-left-sidebar, content-detached-right-sidebar Use 'default' options for default layout and sidebar. Only use these options except 'default' if your whole Project has the same layout otherwise override these options as page level.
blankPage true, false(default) Pages that don't require to show header, footer, sidebar will be done by "blankPage" value to "true". For example: Login, register, etc pages need this option value to be true on page level.
defaultLanguage en(default),fr,pt,de To change the default language in whole Template.
direction env('MIX_CONTENT_DIRECTION', 'ltr')(default), env('MIX_CONTENT_DIRECTION', 'rtl') To switch ltr/rtl direction of the layout. By defaul this will work with LTR layout.
Change for Page Level Configuration :

If you want to add Page level configuration for layout, you need to to set array for page configuration in app -> Http -> Controller -> {Controller file} and send it to your view.

          
          public function {functionName}(){
              $pageConfigs = [
                  'theme' => 'dark',
                  'navbarColor' => 'bg-primary',
                  'navbarType' => 'static',
                  'footerType' => 'sticky',
                  'bodyClass' => 'testClass'
              ];

              return view('/pages/testPage', [
                  'pageConfigs' => $pageConfigs
              ]);
          }
          
      

We have provided 'pageClass' => '', options to add page specific class with .app-content . You can only override this options in page level.

          
public function {functionName}(){
    $pageConfigs = [
        'pageClass' => 'email-application'
    ];

    return view('/pages/testPage', ['pageConfigs' => $pageConfigs]);
}
          
        

Custom Css for User

We have provided custom scss files for user to override themes styles and variable.

Folder Structure
      
        ── resources/
        ├── assets/
        |   ├── js/
        |   |   ├── scripts.js
        |   ├── scss/
        |   ├── variable/
        |   |   ├── _variable-components.scss
        |   |   ├── _variable.scss
        |   ├── style-rtl.scss
        |   ├── style.scss
      
    
  • We have provided style.scss for user override.
  • Also, we have provided style-rtl.scss for RTL version specific style.
  • These two files added in style.blade.php file.
  • You can override bootstrap variable in _variable.scss file.
  • Also, you can override theme variable in _variable-components.scss file.
  • We have also provided a scripts.js file. You can write your custom script here and it won't be overridden in our future release.

Create New Page

How to add a New Page:
  • Create New View with blade.php extenstion.
  • Create Controller for different methods related to page. (Optional. You can use default controller also.)
  • Set Path in routes/web.php file to serve the page on the browser.
  • Add page link to resources -> data -> menu-data -> verticalMenu.json & horizontalMenu.json files to display menu item in sidebar/menu.
  • Add page link to resources -> data -> search.json file to display in navbar search option.
  • Add page name to resources -> lang -> en{all language folder} -> locale.php file to display in multi language.
Steps to add a new page :

Step 1: Create a file with the extension.blade.php under the resources -> views -> pages directory. Let's create a testPage for an example with filename testPage.blade.php and placing the below code in that file.

          
            @extends('layouts/contentLayoutMaster') // choose any one option {contentLayoutMaster/fullLayoutMaster}

            @section('title', 'Test Page')  // change title accrodingly

            @section('content')
              <div>
                  .....
              </div>
            @endsection
          
        

Step 2: To add new controller, use below command :

          
            php artisan make:controller {ControllerName} {-r}
          
        

Add Configuration in controller as described here.

To add breadcrumbs :

          
            $breadcrumbs = [
                ['link'=>"/",'name'=>"Home"],['link'=>"/",'name'=>"Page"], ['name'=>"Test Page"]
            ];

            return view('/pages/test-page', [
                'breadcrumbs' => $breadcrumbs
            ]);
          
        

Step 3: After creating file and controller you need to declare its route where it can be served on the browser, suppose you want created page to be serve on the route http://localhost:8080/testPage . To access this page define its routes in the resources -> web.php file.

          
          Route::get('/testPage', function () {
              return view('pages/testPage');
          });
          
        

Step 4: After defining the route, add page link to sidebar at resources -> data -> menu-data -> verticalMenu.json / horizontalMenu.json file.

Option 1: To add item in menu.

          
          {"url": "/testPage","name": "Test Page","icon": "circle","slug": "test-page"}
          
       

Option 2: To add item as a sub menu item.

          
         {
          "url": "#","name": "Dashboards","badge": "2","badgeClass": "badge badge-light-warning rounded-pill ms-auto me-1","icon": "home","slug": "",
          "submenu": [{"url": "/testPage","name": "Test Page","icon": "circle","slug": "test-page"}]
          },
          
       

Step 5: For page searching options in navbar search box, add page link in resources -> data -> search.json file.

          
           { "name": "Test Page", "url": "/testPage", "icon": "circle" },
          
        

Step 6: Add page name to resources -> lang -> en{all language folder} -> locale.php file to display in multi language.

          
            "Dashboard"=> "Instrumententafel",
            "Modern"=> "Modern",
          
        

After completing these above steps you need to run the command yarn mix or yarn mix watch command in the project directory. After running this process you need to run the command php artisan serve . It will serve your app on the localhost.

RTL

To create RTL layout. There are two way to do this.

First way

Change MIX_CONTENT_DIRECTION variable value from ltr to rtl in .env file

Second way

Change configuration option from config -> custom.php file.

Update direction value from 'direction' => env('MIX_CONTENT_DIRECTION', 'ltr'), to 'direction' => env('MIX_CONTENT_DIRECTION', 'rtl'),