<template>
	<div class="topbar">
	    <div class="logo"><a href="#"><img src="project-files/img/cms_logo.png" alt=""></a></div>
	    <div class="name">Meine Website</div>
	    <a class="navbutton"><i class="icon icon-menu" aria-hidden="true"></i></a>
	    <div class="clear"></div>
	</div>
</template>

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

	.topbar {
		position: fixed;
		top: 0;
		right: 0;
		left: 0px;
		background: @cms_bg;
		height: 40px;
		z-index: 1500;

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

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

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

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

        &>.name {
            float: left;
            width: auto;
            line-height: 40px;
            color: white;
            padding-left: 15px;
        }

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

            &:hover {
                background:rgba(40,183,141,0.3);
            }
        }
	}
</style>

<script>
export default {
    name: "Topbar"
}
</script>