Menus

We have two types of menus for two different layouts.

  • Vertical menu for VERTICAL layout
  • Horizontal menu for HORIZONTAL layout

We are using a JSON file to store all menus list and render it in our main menu. You can find these JSON files in the menu-data/ folder.

Here is the path: resources/data/menu-data/

  • verticalMenu.json menu for VERTICAL layout
  • horizontalMenu.json menu for HORIZONTAL layout

How to add New Menu

You'll need to add your page details in both JSON files to appear on your page in the Sidebar.

Option 1: To add item in menu.

    
{
"url": "newPage",
"name": "New Page",
"icon": "mail",
"slug": "new-page"
},
    
  

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

    
{
  "name": "Pages",
  "badge": "2",
  "badgeClass": "badge badge-light-warning rounded-pill ms-auto me-1",
  "icon": "home",
  "slug": "",
  "submenu": [
    {
      "url": "/page-test",
      "name": "Test Page",
      "icon": "circle",
      "slug": "page-test"
    },
    {
      "url": "/second-page",
      "name": "Second Page",
      "icon": "circle",
      "slug": "second-page"
    }
  ]
},
    
  
Note: Add page name to resources -> lang -> en{all language folder} -> locale.php file to display in multi language.

Rendering Menus

We are rendering our menus in the below files. You can find these files here: views/panels/

  • sidebar.blade.php
  • submenu.blade.php
  • horizontalMenu.blade.php
  • horizontalSubmenu.blade.php

The sidebar.blade.php and submenu.blade.php files are used for the Vertical layout.

      
<-------sidebar.blade.php------->

<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
    {{-- Foreach menu item starts --}}
      @if(isset($menuData[0]))
      @foreach($menuData[0]->menu as $menu)
      @if(isset($menu->navheader))
      <li class="navigation-header">
        <span>{{ $menu->navheader }}</span>
      </li>
      @else
      {{-- Add Custom Class with nav-item --}}
      @php
      $custom_classes = "";
      if(isset($menu->classlist)) {
      $custom_classes = $menu->classlist;
      }
      @endphp
      <li class="nav-item {{ Route::currentRouteName() === $menu->slug ? 'active' : '' }} {{ $custom_classes }}">
      <a href="{{isset($menu->url)? url($menu->url):'#'}}" class="d-flex align-items-center" target="{{isset($menu->newTab) ? '_blank':'_self'}}">
         <i data-feather="{{ $menu->icon }}"></i>
          <span class="menu-title text-truncate">{{ __('locale.'.$menu->name) }}</span>
          @if (isset($menu->badge))
          <?php $badgeClasses = "badge rounded-pill badge-light-primary ms-auto me-1" ?>
         <span
            class="{{ isset($menu->badgeClass) ? $menu->badgeClass : $badgeClasses }} ">{{$menu->badge}}</span>
          @endif
        </a>
        @if(isset($menu->submenu))
        @include('panels/submenu', ['menu' => $menu->submenu])
        @endif
      </li>
      @endif
      @endforeach
      @endif
      {{-- Foreach menu item ends --}}
    </ul>
      
    

Here is the code of submenu page.

      
<-------submenu.blade.php------->

  <ul class="menu-content">
  @if(isset($menu))
  @foreach($menu as $submenu)
  <li class="{{ $submenu->slug === Route::currentRouteName() ? 'active' : '' }}">
      <a href="{{isset($submenu->url) ? url($submenu->url):'#'}}" class="d-flex align-items-center" target="{{isset($submenu->newTab) && $submenu->newTab === true  ? '_blank':'_self'}}">
        @if(isset($submenu->icon))
        <i  data-feather="{{$submenu->icon}}"></i>
        @endif
        <span class="menu-item">{{ __('locale.'.$submenu->name) }}</span>
      
      @if (isset($submenu->submenu))
      @include('panels/submenu', ['menu' => $submenu->submenu])
      @endif
  </li>
  @endforeach
  @endif
</ul>
      
    

The horizontalMenu.blade.php and horizontalSubmenu.blade.php files are used for the Horizontal layout.

    
<-------horizontalMenu.blade.php------->

<ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
{{-- Foreach menu item starts --}}
  @if(isset($menuData[1]))
  @foreach($menuData[1]->menu as $menu)
  @php
  $custom_classes = "";
  if(isset($menu->classlist)) {
  $custom_classes = $menu->classlist;
  }
  @endphp
  <li class="nav-item @if(isset($menu->submenu)){{'dropdown'}}@endif {{ $custom_classes }} {{ Route::currentRouteName() === $menu->slug ? 'active' : '' }}"
    @if(isset($menu->submenu)){{'data-menu=dropdown'}}@endif>
    <a href="{{isset($menu->url)? url($menu->url):'#'}}" class="nav-link d-flex align-items-center @if(isset($menu->submenu)){{'dropdown-toggle'}}@endif" target="{{isset($menu->newTab) ? '_blank':'_self'}}"  @if(isset($menu->submenu)){{'data-bs-toggle=dropdown'}}@endif>
      <i data-feather="{{ $menu->icon }}"></i>
      <span>{{ __('locale.'.$menu->name) }}</span>
    </a>
    @if(isset($menu->submenu))
    @include('panels/horizontalSubmenu', ['menu' => $menu->submenu])
    @endif
  </li>
  @endforeach
  @endif
  {{-- Foreach menu item ends --}}
</ul>
    
  

Here is the code of submenu page.

  
<-------horizontalSubmenu.blade.php------->

<ul class="dropdown-menu" data-bs-popper="none">
  @if(isset($menu))
  @foreach($menu as $submenu)
  @php
  $custom_classes = "";
  if(isset($submenu->classlist)) {
    $custom_classes = $submenu->classlist;
  }
  @endphp

  <li
    class="{{ $custom_classes }}{{ (isset($submenu->submenu)) ? 'dropdown dropdown-submenu' : '' }} {{ $submenu->slug === Route::currentRouteName() ? 'sidebar-group-active active' : '' }}" @if(isset($submenu->submenu)){{'data-menu=dropdown-submenu'}}@endif>
    <a href="{{isset($submenu->url) ? url($submenu->url):'#'}}" class="dropdown-item {{ (isset($submenu->submenu)) ? 'dropdown-toggle' : '' }} d-flex align-items-center"
      {{ (isset($submenu->submenu)) ? 'data-bs-toggle=dropdown' : '' }} target="{{isset($submenu->newTab) && $submenu->newTab === true  ? '_blank':'_self'}}">
      @if (isset($submenu->icon))
      <i data-feather="{{ $submenu->icon }}"></i>
      @endif
      <span>{{ __('locale.'.$submenu->name) }}</span>
    </a>
    @if (isset($submenu->submenu))
    @include('panels/horizontalSubmenu', ['menu' => $submenu->submenu])
    @endif
  </li>
  @endforeach
  @endif
</ul>