panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

move usermenu to topbar

Browse Source
This commit is contained in:
Anton Schubert
2017-08-30 02:00:29 +02:00
parent c66ff6f938
commit a74707ba6d
2 changed files with 136 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/components/topbar.vue
View File

@@ -2,12 +2,49 @@
<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;
@@ -16,13 +53,13 @@
left: 0px;
background: @cms_bg_light;
color: white;
height: 40px;
height: @barHeight;
z-index: 1500;
&>.logo {
display: block;
width: 70px;
height: 40px;
height: @barHeight;
float: left;
position: relative;
@@ -48,33 +85,110 @@
&>.name {
float: left;
width: auto;
line-height: 40px;
line-height: @barHeight;
padding-left: 15px;
}
&>.navbutton {
// &>.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;
float: left;
width: auto;
height: 100%;
font-size: 22px;
margin-left: 40px;
height: 40px;
width: 40px;
padding-top: 4px;
cursor: pointer;
text-align: center;
padding: 4px 10px;
font-size: 0;
color: white;
&:hover {
cursor: pointer;
background: fade(@cms_brand_primary, 30%);
}
}
}
</style>
<script>
export default {
name: "Topbar"
}
</script>
.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{
.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 {color:#FFF; display:block; height:45px;}
&:after {clear:both; content:""; display:block;}
&:hover {background:rgba(40,183,141,0.3);}
}
}
}
&.open {
.user_menu{display: block;}
&>.trigger{background: rgba(40, 183, 141, 0.5);}
.trigger_btn .icon:before{transform: rotate(180deg);}
}
}
</style>