<ul class="pony-menu pony-menu-dark">
    <li v-for="(item, index) in menu" class="pony-menu-submenu" 
        :class="{'pony-menu-submenu-open': index==activeMenuIndex}"
    >
        <div class="pony-menu-submenu-title" @click="toggleMenu(index)">
            <span>
                <i class="iconfont icon-bell"></i>
                <span>@{{ item.name }}</span>
            </span>
            <i class="iconfont icon-down pony-menu-submenu-arrow"></i>
        </div>
        <transition name="fade">
            <ul class="pony-menu-sub" v-show="activeMenuIndex == index">
                <li v-for="children in item.children" class="pony-menu-item">
                    <a :href="'/'+children.url">@{{ children.name }}</a>
                </li>
            </ul>
        </transition>
    </li>
</ul>