JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Flexible-Cross-Browser-jQuery-Multi-Level-Push-Menu-Plugin/demo/jquery.multilevelpushmenu_red.css">
<div id="app">
  <!-- http://www.jqueryscript.net/menu/Flexible-Cross-Browser-jQuery-Multi-Level-Push-Menu-Plugin.html -->

  <nav class="mlpm_w" style="height: 100%;">
    <div v-for="menu in menus" class="levelHolderClass main-view">
      <h2>
          <i :class="['floatRight', 'cursorPointer', menu.icon]"></i>{{ menu.name }}
        </h2>
      <ul>
        <li v-for="item in menu.items">
          <a v-if="item.items" href="#">
            <i class="iconSpacing fa fa-angle-left"></i>
            <i :class="['floatRight', item.icon]"></i>{{ item.name }}
          </a>
          <a v-else href="#router-link">
            <i :class="['floatRight', item.icon]"></i>{{ item.name }}
          </a>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS

body {
  margin: 0;
  font-size: 11px;
}

.levelHolderClass.main-view {
  margin-left: 0px;
  width: 282px;
  visibility: visible;
}

JavaScript

var menus = [{
  name: 'All Categories',
  icon: 'fa fa-reorder',
  items: [{
    name: 'Devices',
    icon: 'fa fa-laptop',
    link: '#',
    items: [{
      title: 'Devices',
      icon: 'fa fa-laptop',
      items: [{
        name: 'Mobile Phones',
        icon: 'fa fa-phone',
        link: '#',
        items: [{
          title: 'Mobile Phones',
          icon: 'fa fa-phone',
          link: '#',
          items: [{
            name: 'Super Smart Phone',
            link: '#'
          }, {
            name: 'Thin Magic Mobile',
            link: '#'
          }, {
            name: 'Performance Crusher',
            link: '#'
          }, {
            name: 'Futuristic Experience',
            link: '#'
          }]
        }]
      }, {
        name: 'Televisions',
        icon: 'fa fa-desktop',
        link: '#',
        items: [{
          title: 'Televisions',
          icon: 'fa fa-desktop',
          link: '#',
          items: [{
            name: 'Flat Super Screen',
            link: '#'
          }, {
            name: 'Gigantic LED',
            link: '#'
          }, {
            name: 'Power Eater',
            link: '#'
          }, {
            name: '3D Experience',
            link: '#'
          }, {
            name: 'Classic Comfort',
            link: '#'
          }]
        }]
      }, {
        name: 'Cameras',
        icon: 'fa fa-camera-retro',
        link: '#',
        items: [{
          title: 'Cameras',
          icon: 'fa fa-camera-retro',
          link: '#',
          items: [{
            name: 'Smart Shot',
            link: '#'
          }, {
            name: 'Power Shooter',
            link: '#'
          }, {
            name: 'Easy Photo Maker',
            link: '#'
          }, {
            name: 'Super Pixel',
            link: '#'
          }]
        }]
      }]
    }]
  }, {
    name: 'Magazines',
    icon: 'fa fa-book',
    link: '#',
    items: [{
      title: 'Magazines',
      icon: 'fa fa-book',
     ...