baseui/src/components/topbar.vue

<template>
    <div class="topbar">
        <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
        <div class="name">{{ title }}</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"> {{ loginDisplay }} <div class="role"> {{ loginType }}</div></div>
                <div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
            </a>
            <nav class="user_menu">
                <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 @click.native="toggleMenu">
                        <a>
                            <i :class="['icon', item.icon]"></i>
                            <div class="title">{{ item.name }}</div>
                        </a>
                    </router-link>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
export default {
    name: "Topbar",
    props: [
        "items"
    ],
    data() {
        return {
        }
    },
    computed: {
        loginDisplay() {
            let l = this.$store.state.persist.login;
            if (l.Company) {
                return l.Company;
            } else if (l.Lastname || l.Firstname) {
                return l.Firstname + l.Lastname;
            }
            return l.Username;
        },
        loginType() {
            switch (this.$store.state.persist.login.Type) {
            case 0:
                return 'Administrator';
            case 1:
                return 'Reseller';
            case 2:
                return 'Kundenzugang';
            }
        },
        loginID() {
            return this.$store.state.persist.login.ID;
        },
        title() {
            return this.$store.state.ui.title;
        }
    },
    methods: {
        toggleMenu() {
            this.$refs.user_profile.classList.toggle("open");
        },
        showIf(conf) {
            // show if not configured
            if (!conf) {
                return true;
            }
            if (conf.never) {
                return false;
            }
        }
    }
}
</script>

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

    @bar_height: 50px;

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

        &>.logo {
            display: block;
            width: 70px;
            height:  @bar_height;
            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: 8px;
            }
        }

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

        // &>.navbutton {
        //     display: block;
        //     float: left;
        //     width: auto;
        //     height: 100%;
        //     font-size: 22px;
        //     margin-left: 40px;
        //     height: @bar_height;
        //     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: 9px 10px;
            font-size: 0;
            color: white;
            user-select: none;

            &: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: @bar_height - 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;
                    }
                    /*.trigger_btn .icon:before {transition:all 0.3s;}*/
                    .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);}
        }
    }

    /*@media(max-width: @screen-md-max) {
        .user_profile {
            &>.trigger {
                .text {
                    display:none;
                }
            }
                
        }
    }*/
</style>