<template>
	<div class="topbar">
	    <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
	    <div class="name">Meine Website</div>

        <!-- User Profile -->
        <div class="user_profile" ref="user_profile">
            <a class="trigger" @click.prevent="toggleMenu">
                <div class="image"><i class="icon icon-user" aria-hidden="true"></i></div>
                <div class="text">Hans Zimmer <div class="role">Administrator</div></div>
                <div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
            </a>
            <nav class="user_menu">
                <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">Logout</div>
                    </a></li>
                </ul>
            </nav>
        </div>
	</div>
</template>

<script>
export default {
    name: "Topbar",
    methods: {
        toggleMenu() {
            this.$refs.user_profile.classList.toggle("open");
        }
    }
}
</script>

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

	@barHeight: 40px;

    /*--------------------------------------------------------------
    # Topbar (Sitename)
    --------------------------------------------------------------*/
	.topbar {
		.clearfix();
		position: fixed;
		top: 0;
		right: 0;
		left: 0px;
		background: @cms_bg_light;
		color: white;
		height: @barHeight;
		z-index: 1500;

		&>.logo {
			display: block;
			width: 70px;
			height:  @barHeight;
			float: left;
			position: relative;

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

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

			img {
				display: block;
                width: 30px;
                height: auto;
                margin: 0 auto;
                padding-top: 4px;
			}
		}

        &>.name {
            float: left;
            width: auto;
            line-height: @barHeight;
            padding-left: 15px;
        }

        // &>.navbutton {
        //     display: block;
        //     float: left;
        //     width: auto;
        //     height: 100%;
        //     font-size: 22px;
        //     margin-left: 40px;
        //     height: @barHeight;
        //     width: 40px;
        //     padding-top: 4px;
        //     cursor: pointer;
        //     text-align: center;
        //     color: white;

        //     &:hover {
        //         background: fade(@cms_brand_primary, 30%);
        //     }
        // }
	}

    /*--------------------------------------------------------------
    # Topbar (User Profile)
    --------------------------------------------------------------*/
    .user_profile {
        float: right;

        &>.trigger {
            .clearfix();
            display: block;
            padding: 4px 10px;
            font-size: 0;
            color: white;

            &:hover {
                cursor: pointer;
                background: fade(@cms_brand_primary, 30%);
            }

            .icon{
                font-size: 22px;
            }

            .image, .text, .trigger_btn{
                float: left;
            }

            div+div{
                margin-left: 10px;
            }

            .image {
                max-height: @barHeight - 8px;
                img{
                    width:70%; margin:0 auto; display:block;
                }
            }

            .text {
                font-size: 12px;

                .role{
                    display: block;
                    font-size: 11px;
                    color: fade(white, 50%);
                }
            }
        }

        .user_menu {
            display: none;
            background: @cms_brand_primary;

            ul{
                list-style-type: none;

                li{
                    .clearfix();
                    .icon {
                        float: left;
                        width: 45px;
                        line-height: 45px;
                        text-align: center;
                        font-size: 20px;
                    }
                    .title {
                        float: left;
                        font-size: 14px;
                        line-height: 45px;
                        padding: 0 10px;
                    }
                    a {
                        display: block;
                        color: white;
                        height: 45px;
                    }
                    &:hover {
                        background: darken(@cms_brand_primary, 5%);
                    }
                }
            }
        }

        &.open {
            .user_menu{display: block;}
            &>.trigger{background: fade(@cms_brand_primary, 50%);}
            .trigger_btn .icon:before{transform: rotate(180deg);}
        }
    }
</style>