AppMenu.san

<template>
    <div class="visual-dl-app-menu">
        <san-appbar title="VisualDL">
            <san-menu slot="right">
                <san-menu-item
                    san-for="item in items"
                    class="{{selected === item.value ? 'sm-menu-item-selected' : ''}}"
                    on-click="handleItemClick(item)"
                    title="{{item.title}}" />
            </san-menu>
        </san-appbar>
    </div>
</template>

<script>
import Appbar from 'san-mui/AppBar';
import {MenuItem, Menu} from 'san-mui/Menu';
export default {
    components: {
        'san-appbar': Appbar,
        'san-menu': Menu,
        'san-menu-item': MenuItem
    },
    initData() {
        return {
            selected: '1',
            items: [
                {
                    value: '1',
                    url: '/scalars',
                    title: 'SCALARS'
                },
                {
                    value: '2',
                    url: '/image',
                    title: 'IMAGES'
                }
            ]
        };
    },
    handleItemClick(item) {
        this.data.set('selected', item.value);
        this.fire('item-click', item);
    }
};
</script>
<style lang="stylus">
@import '../../style/variables';

+prefix-classes(prefix)
    .app-menu
        width 100%

.visual-dl-app-menu
    .sm-appbar-title
        flex none
    .sm-appbar-right
        width 100%
        .sm-menu
            width 100%
            height 100%
            display flex
            flex-direction row
            .sm-menu-item-selected
                background #e4e4e4
</style>