<template>
    <div class="sidebar">
        <div class="wrapper">
            <div class="inner">
                <nav class="mainnav">
                    <ul>
                        <router-link tag="li" v-for="(item, i) in items" :key="i" v-if="showIf(item.show)" :to="item.to" active-class="active" exact>
                            <a>
                                <i :class="['icon', item.icon]"></i>
                                <div class="title">{{ item.name }}</div>
                            </a>
                        </router-link>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    @import "../mixins";

    /*--------------------------------------------------------------
    # Left Sidebar (Main Navigation)
    --------------------------------------------------------------*/
    .sidebar {
        position: fixed;
        left: 0px;
        top: 40px;
        bottom: 0px;
        background: @ui_bg;
        color: white;
        width: 70px;
        transition: all 0.3s;
        z-index: 2000;

        &>.wrapper {
            height:100%; /*overflow-y:scroll;*/

            &>.inner {
                position:relative;
                width:auto;
            }
        }

        /* Main navigation */
        .mainnav {
            ul {
                list-style-type: none;
                li {
                    position: relative;
                    width: 70px;
                    padding: 0;
                    line-height: 1.2;
                    color: white;
                    text-align: center;

                    &:after {clear:both; content:""; display:block;}
                    &:hover {
                        background:rgba(40,183,141,0.3);
                        .subnav {
                            visibility:visible;
                            opacity:1;
                        }
                    }

                    &.active {background: @cms_brand_primary;}
                    // &.active .fa {background:#19435e;}

                    /*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/

                    .icon {
                        display: block;
                        color: white;
                        font-size: 22px;
                        margin-bottom: 5px;
                        transition: all 0.3s;
                    }

                    .title {
                        position: relative;
                        font-size: 10px;
                        width: auto;
                        float: none;
                        line-height: 1;
                        color: white;
                        /*transition:all 0.3s;*/
                    }

                    a {
                        display: block;
                        height: auto;
                        width: 70px;
                        height: auto;
                        padding: 8px 0px;
                    }
                }
            }
        }

        /* Sub navigation */
        .subnav {
            position: absolute;
            left: 100%;
            top: 0px;
            background: @gray_dark;
            width: 180px;
            height: auto;
            transition: all 0.3s;
            /*visibility:visible;
            opacity:1;*/
            visibility: hidden;
            opacity: 0;

            ul {list-style-type:none;}
            ul li {font-size:12px; display:block; text-align:left; padding:0px 10px 0px 15px; width:auto; line-height:30px; color:#FFF; position:relative;}
            ul li a {color:#FFF; display:block; width:100%; height:100%; padding:0px; text-align:left;}
            ul li.active, ul li:hover {background:#28B78D;}
            ul li.active:after {
                right: 0;
                top: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                border-color: rgba(255, 255, 255, 0);
                border-right-color: @gray_light;
                border-width: 10px;
                margin-top: -10px;
            }

           .subnav_headline {color:#FFF; padding:0px 10px 0px 15px; font-weight:600; width:100%; display:block; border-bottom:solid 1px #FFF; line-height:50px; font-size:12px;}
        }
    }

    @media(max-width: @screen-xs-max) {
        .sidebar {
            left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;

            .subnav ul li{
                width: 100%;
            }
        }
    }

    @media(max-width: @screen-md-max) {
        .sidebar {left:0px;}
    }
</style>

<script>
export default {
    name: "Sidebar",
    props: {
        items: {
            type: Array,
            default() {
                return [ ];
            }
        }
    },
    methods: {
        showIf(conf) {
            console.log(conf);
            // show if not configured
            if (!conf) {
                return true;
            }
            if (conf.never) {
                return false;
            }
        }
    }
}
</script>