collapse element
This commit is contained in:
monastyr
parent
8ad6d3fc7b
commit
502ec9a807
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="hello2">
|
||||
<transition-element></transition-element>
|
||||
<!-- <sidenav-menu></sidenav-menu> -->
|
||||
<!-- <transition-element></transition-element> -->
|
||||
<sidenav-menu></sidenav-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,223 +1,166 @@
|
||||
<template>
|
||||
<!-- <transition name="menu-popover">
|
||||
<div id="sidenav-menu" v-bind:class="overlay" v-bind:style="{'width': widthValue}">
|
||||
<div id="slide-element" v-on:click="changeWidth()">
|
||||
<div class='top_image'>
|
||||
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
|
||||
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-links" v-if="show" >
|
||||
<div id="menu-links" class="overlay" v-if="show" >
|
||||
<ul>
|
||||
<li v-for="linkObj in menuLinks">
|
||||
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</transition> -->
|
||||
|
||||
<div class="wrapper">
|
||||
<span class="label">+</span><div class="contents">
|
||||
<div class="inner">
|
||||
<div id="slide-element" v-on:click="changeWidth()">
|
||||
<div class='top_image'>
|
||||
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
|
||||
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-links" v-if="show" >
|
||||
<div id="menu-links" class="overlay" v-if="show" >
|
||||
<ul>
|
||||
<li v-for="linkObj in menuLinks">
|
||||
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app">
|
||||
<nav class="side-navbar">
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a>
|
||||
<i class="ti-home"></i>Home</a>
|
||||
</li>
|
||||
<li v-for="(x, itemIndex) in sideBar" :key="itemIndex">
|
||||
<a @click="setActiveItemId(itemIndex)">
|
||||
<i class="fa" :class="x.icon"></i>{{x.name}}
|
||||
</a>
|
||||
<ul :id="x.id" class="collapse list-unstyled show">
|
||||
<transition-group name="list">
|
||||
<li v-for="y in (activeItemId === itemIndex && isActive ? x.children : [])" :key="y.name">
|
||||
<a>{{y.name}}</a>
|
||||
</li>
|
||||
</transition-group>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* Obrazek do menu*/
|
||||
|
||||
.wrapper {
|
||||
background:#DDD;
|
||||
display:inline-block;
|
||||
padding: 10px;
|
||||
height: 20px;
|
||||
width:auto;
|
||||
<script>
|
||||
export default {
|
||||
el: '#app',
|
||||
methods: {
|
||||
setActiveItemId(itemIndex) {
|
||||
if (itemIndex === this.activeItemId) {
|
||||
this.activeItemId = ''
|
||||
return
|
||||
}
|
||||
this.activeItemId = itemIndex
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
message: 'Hello Vue.js!',
|
||||
activeItemId: '',
|
||||
sideBar: [{
|
||||
name: "Dashboard",
|
||||
url: "/dashboard",
|
||||
icon: "ti-world",
|
||||
children: [{
|
||||
name: "Buttons",
|
||||
url: "/components/buttons",
|
||||
icon: "fa-book",
|
||||
},
|
||||
{
|
||||
name: "Social Buttons",
|
||||
url: "/components/social-buttons",
|
||||
icon: "icon-puzzle",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Components",
|
||||
url: "/components",
|
||||
icon: "ti-pencil-alt",
|
||||
children: [{
|
||||
name: "Buttons",
|
||||
url: "/components/buttons",
|
||||
icon: "fa-book",
|
||||
},
|
||||
{
|
||||
name: "Social Buttons",
|
||||
url: "/components/social-buttons",
|
||||
icon: "icon-puzzle",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Validation",
|
||||
url: "/components",
|
||||
icon: "ti-pencil-alt",
|
||||
children: [{
|
||||
name: "Buttons",
|
||||
url: "/components/buttons",
|
||||
icon: "fa-book",
|
||||
},
|
||||
{
|
||||
name: "Social Buttons",
|
||||
url: "/components/social-buttons",
|
||||
icon: "icon-puzzle",
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isActive() {
|
||||
return this.activeItemId !== ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.collapse.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contents, .contents .inner {
|
||||
display:inline-block;
|
||||
.collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contents {
|
||||
white-space:nowrap;
|
||||
margin-left: -1em;
|
||||
padding-left: 1em;
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.contents .inner {
|
||||
background:#c3c;
|
||||
width:0%;
|
||||
overflow:hidden;
|
||||
-webkit-transition: width 1s ease-in-out;
|
||||
-moz-transition: width 1s ease-in-out;
|
||||
-o-transition: width 1s ease-in-out;
|
||||
transition: width 1s ease-in-out;
|
||||
.collapse.list-unstyled {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
nav.side-navbar {
|
||||
background: #fff;
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
color: #000;
|
||||
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
nav.side-navbar ul a:hover {
|
||||
background: orange;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
nav.side-navbar ul a {
|
||||
padding: 10px 15px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper:hover .contents .inner {
|
||||
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.top_image {
|
||||
/* width:950px;
|
||||
background-color:white;
|
||||
margin: 0px auto 0px auto;
|
||||
background:red; */
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.top_image img {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
/*------------- Obrazek do menu -------------*/
|
||||
|
||||
.overlay {
|
||||
width: 50px;
|
||||
height: 90vh;
|
||||
background-color: red;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.fade-enter {
|
||||
.list-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: opacity 0.25s;
|
||||
.list-enter-active {
|
||||
animation: slide-in .5s ease-out forwards;
|
||||
}
|
||||
.fade-enter-to {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.fade-leave {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity 2s;
|
||||
}
|
||||
.fade-leave-to {
|
||||
.list-leave-to, .list-leave-active {
|
||||
opacity: 0;
|
||||
animation: slide-out .5s ease-out forwards;
|
||||
}
|
||||
|
||||
.overlay #slide-element{
|
||||
background: rebeccapurple;
|
||||
position: relative;
|
||||
top: 95%;
|
||||
|
||||
@keyframes slide-in {
|
||||
from { height: 0; } to { height: 40px; }
|
||||
}
|
||||
|
||||
/* wystylizowanie calosci */
|
||||
#sidenav-menu{
|
||||
position: left;
|
||||
width: 10%;
|
||||
height:100vh; /**/
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#burger-icon div{
|
||||
/* przycisk burgera */
|
||||
width: 35px;
|
||||
height: 5px;
|
||||
background-color: black;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
#menu-links ul li a{
|
||||
background-color: yellow;
|
||||
height:100vh; /**/
|
||||
|
||||
}
|
||||
|
||||
#slide-element{
|
||||
position: relative;
|
||||
top: 0%;
|
||||
height: 5%;
|
||||
background-color: grey
|
||||
@keyframes slide-out {
|
||||
from { height: 40px; } to { height: 0; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidenav-menu',
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
widthValue: 30
|
||||
}
|
||||
},
|
||||
created:{
|
||||
widthValue: 30
|
||||
},
|
||||
methods:{
|
||||
changeWidth(){
|
||||
this.show = !this.show;
|
||||
if (this.show){
|
||||
console.log(this.show);
|
||||
this.widthValue = '20%';
|
||||
}
|
||||
else{
|
||||
console.log("False: ",this.show);
|
||||
this.widthValue = '5%';
|
||||
|
||||
|
||||
}
|
||||
console.log(this.widthValue);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
computed:{
|
||||
menuLinks(){ //linki do menu głównego
|
||||
//dane ze stora do głównego menu
|
||||
return this.$store.state.menuLinks;
|
||||
}
|
||||
}
|
||||
}
|
||||
// function openNav() {
|
||||
// document.getElementById("mySidenav").style.width = "250px";
|
||||
// }
|
||||
|
||||
// function closeNav() {
|
||||
// document.getElementById("mySidenav").style.width = "0";
|
||||
// }
|
||||
</script>
|
||||
|
||||
@ -55,6 +55,7 @@ p {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: 1s;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user