move usermenu to topbar
This commit is contained in:
parent
c66ff6f938
commit
a74707ba6d
@ -14,27 +14,6 @@
|
||||
</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>
|
||||
|
||||
@ -155,54 +134,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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;
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user