<aside class="menu">
    <p class="menu-label">
        Menu
    </p>
    <ul class="menu-list">
        <li>
            <a>
                <span class="icon">
                    <i class="fa fa-home"/>
                </span>
                <span>Home</span>
                <span class="menu-action icon">

                </span>
            </a>
        </li>
        <li>
            <a class="is-active">
                <span class="icon">
                    <i class="fa fa-user"/>
                </span>
                <span>My Account</span>
            </a>
            <ul>
                <li>
                    <a>
                        <span class="icon">
                            <i class="fa fa-info-circle"/>
                        </span>
                        <span>Profile</span>
                        <span class="menu-action icon">

                        </span>
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon">
                            <i class="fa fa-cog"/>
                        </span>
                        <span>Settings</span>
                        <span class="menu-action icon">

                        </span>
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a>
                <span class="icon">
                    <i class="fa fa-sign-out"/>
                </span>
                <span>Logout</span>
            </a>
        </li>
    </ul>
</aside>

<aside class="menu is-bordered">
    <p class="menu-label">
        <span>Menu Bordered</span>
        <span class="menu-action icon">
            <i class="fas fa-chevron-down"></i>
        </span>
    </p>
    <div class="menu-list">
        <a class="is-active">
            <span class="icon">
                <i class="fa fa-home"></i>
            </span>
            <span>Home</span>
            <span class="menu-action icon">

            </span>
        </a>
        <a class="is-disabled">
            <span class="icon">
                <i class="fa fa-cog"></i>
            </span>
            <span>Settings</span>
            <span class="menu-action icon">

            </span>
        </a>
        <a>
            <span class="icon">
                <i class="fa fa-sign-out"></i>
            </span>
            <span>Logout</span>
        </a>
    </div>
</aside>
<div class="divider"/>
<aside class="menu is-lines">
    <p class="menu-label">
        <span>Menu Lines</span>
        <span class="menu-action icon">
            <i class="fas fa-chevron-down"></i>
        </span>
    </p>
    <div class="menu-list">
        <a class="is-active">
            <span class="icon">
                <i class="fa fa-home"></i>
            </span>
            <span>Home</span>
            <span class="menu-action icon">

            </span>
        </a>
        <a class="is-disabled">
            <span class="icon">
                <i class="fa fa-cog"></i>
            </span>
            <span>Settings</span>
            <span class="menu-action icon">

            </span>
        </a>
        <a>
            <span class="icon">
                <i class="fa fa-sign-out"></i>
            </span>
            <span>Logout</span>
        </a>
    </div>
</aside>
    

<template>
    <b-menu>
        <b-menu-list label="Menu">
            <b-menu-item icon="info-circle" label="Info"></b-menu-item>
            <b-menu-item
                icon="cog"
                :active="isActive">
                <template slot="label" slot-scope="props">
                    Administrator
                    <b-icon
                        class="menu-action"
                        :icon="props.expanded ? 'caret-up' : 'caret-down'">
                    </b-icon>
                </template>
                <b-menu-item icon="user" label="Users"></b-menu-item>
                <b-menu-item icon="phone-laptop">
                    <template slot="label">
                        Devices
                        <b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
                        <b-icon icon="dots-vertical" slot="trigger"></b-icon>
                            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
                            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
                            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
                        </b-dropdown>
                    </template>
                </b-menu-item>
                <b-menu-item icon="money-bill" label="Payments" disabled></b-menu-item>
            </b-menu-item>
            <b-menu-item icon="user" label="My Account">
                <b-menu-item label="Account data"></b-menu-item>
                <b-menu-item label="Addresses"></b-menu-item>
            </b-menu-item>
        </b-menu-list>
        <b-menu-list>
            <b-menu-item
                label="Expo"
                icon="link"
                tag="router-link"
                target="_blank"
                to="/expo">
            </b-menu-item>
        </b-menu-list>
        <b-menu-list label="Actions">
            <b-menu-item icon="sign-out" label="Logout"></b-menu-item>
        </b-menu-list>
    </b-menu>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
</script>