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

                        <hr>
                        <li><a href="#">
                            <i class="icon icon-images" aria-hidden="true"></i>
                            <div class="title">Medien</div>
                        </a></li>
                        <li><a href="#">
                            <i class="icon icon-document-text" aria-hidden="true"></i>
                            <div class="title">Seiten</div>
                        </a></li>
                        <li class="active">
                            <a href="#"><i class="icon icon-paper-airplane" aria-hidden="true"></i>
                            <div class="title">Beiträge</div></a>
                            <!-- Sub Navigation -->
                            <div class="subnav">
                                <div class="subnav_headline">Kategorie</div>
                                <ul>
                                    <li class="active"><a href="#">News</a></li>
                                    <li><a href="#">Veranstaltungen</a></li>
                                    <li><a href="#">Mitarbeiter</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">
                            <i class="icon icon-cube" aria-hidden="true"></i>
                            <div class="title">Module</div>
                        </a></li>
                        <li><a href="#">
                            <i class="icon icon-navigate" aria-hidden="true"></i>
                            <div class="title">Navigation</div>
                        </a></li>

                        <li><a href="#">
                            <i class="icon icon-chatbox" aria-hidden="true"></i>
                            <div class="title">Sprachen</div>
                        </a></li>
                        <li><a href="#">
                            <i class="icon icon-pie-graph" aria-hidden="true"></i>
                            <div class="title">SEO & Pagespeed</div>
                        </a></li>

                        <li><a href="#">
                            <i class="icon icon-contacts" aria-hidden="true"></i>
                            <div class="title">Benutzer</div>
                        </a></li>
                        <li><a href="#">
                            <i class="icon icon-gear" aria-hidden="true"></i>
                            <div class="title">Settings</div>
                        </a></li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- User Profile -->
        <div class="user_profile">
            <a class="trigger">
                <div class="image"><i class="icon icon-person" aria-hidden="true"></i></div>
                <div class="text">Hans Zimmer <div class="role">Administrator</div></div>
                <div class="btn"><i class="icon icon-arrow-up" aria-hidden="true"></i></div>
            </a>
            <div class="content">
                <ul>
                    <li><a href="#">
                        <i class="icon icon-color-wand" aria-hidden="true"></i>
                        <div class="title">Profil anpassen</div>
                    </a></li>
                    <li><a href="#">
                        <i class="icon icon-log-out" aria-hidden="true"></i>
                        <div class="title">Ausloggen</div>
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
</template>

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

    /*--------------------------------------------------------------
    # Left Sidebar (Main Navigation)
    --------------------------------------------------------------*/
    .sidebar {
        position: fixed;
        left: 0px;
        top: 40px;
        bottom: 0px;
        background: @cms_bg_light;
        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:#28b78d;}
                    // &.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: #152129;
            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: #f5f3f4;
                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;}
        }
    }

    /*--------------------------------------------------------------
    # Left Sidebar (User Profile)
    --------------------------------------------------------------*/
    .user_profile {
        position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;
        &>.trigger {
            .clearfix();
            display:block;

            // a {display:block; width:100%; height:100%;}

            .image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
            .image .icon {font-size:22px; color:#FFF;}
            .image img {width:70%; margin:0 auto; display:block;}

            .text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
            .text .role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}

            &:hover {background:rgba(40,183,141,0.3);}

            .btn {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
            .btn .icon {color:#FFF; font-size:18px; transition:all 0.3s;}
        }

        &>.content {
            display:none; color:#FFF; padding-bottom:30px;

            ul{
                list-style-type: none;

                li{
                    padding:0px; line-height:1.2; color:#FFF; position:relative;
                    .icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
                    .navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
                    a {color:#FFF; display:block; height:45px;}
                    &:after {clear:both; content:""; display:block;}
                    &:hover {background:rgba(40,183,141,0.3);}
                }
            }
        }

        &.open {
            background:rgba(40,183,141,0.3);
            &>.trigger{background:rgba(40,183,141,0.5);}
            .icon-arrow-up{transform: rotate(180deg);}
        }
    }

    @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 [ ];
            }
        }
    }
}
</script>