<template> 

    <b-navbar toggleable="md" type="light" variant="info" sticky fixed="top" class="primary-color">
        <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
        <b-navbar-brand href="./"><img class="app-logo" src="../assets/applogo.png"/> {{menutitle}} </b-navbar-brand>
        <b-collapse is-nav id="nav_collapse" >
            <b-navbar-nav class="ml-auto">
                <div v-for="item in items" v-bind:key="item.id"> 
                    <b-nav-item-dropdown v-bind:class="'  nav-button '+item.cssClass" v-if="item.items.length>0"  v-bind:text="item.title" v-bind:title="item.subtitle" v-bind:href="item.url"    > 
                        
                        <b-dropdown-item v-for="subitem in item.items" v-bind:key="subitem.id" v-bind:href="subitem.url">{{subitem.title}}</b-dropdown-item>
             
                    </b-nav-item-dropdown>
                    <b-nav-item  v-bind:class="' nav-button '+item.cssClass" v-if="item.items.length==0" v-bind:href="item.url"   v-bind:title="item.subtitle"     >  
                        {{item.title}}
                    </b-nav-item>

                </div>
            </b-navbar-nav> 
        </b-collapse>
    </b-navbar> 
</template>

<script>
    import MenuService from '../dao/MenuService.js'
        import Localization from '../dao/Localization.js'
        import R from '../static/R.js'

        var menuitems = MenuService.getMenu()
    export default {
        name: 'MainMenu',
        data() { 
            return {
                menutitle: Localization.translate(R.stringId.menutitle),
                items: menuitems
            }
        }
    }
</script>

