From 502ec9a807251e58f7676b9f7d30f2e46e12e69d Mon Sep 17 00:00:00 2001
From: monastyr <mon4styr@gmail.com>
Date: Sat, 10 Nov 2018 11:39:25 +0100
Subject: [PATCH] collapse element

---
 frontend/app/src/components/HelloWorld.vue    |   4 +-
 frontend/app/src/components/SidenavMenu.vue   | 333 ++++++++----------
 .../app/src/components/TransitionElement.vue  |   1 +
 3 files changed, 141 insertions(+), 197 deletions(-)

diff --git a/frontend/app/src/components/HelloWorld.vue b/frontend/app/src/components/HelloWorld.vue
index edb27d5..430c099 100644
--- a/frontend/app/src/components/HelloWorld.vue
+++ b/frontend/app/src/components/HelloWorld.vue
@@ -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>
 
diff --git a/frontend/app/src/components/SidenavMenu.vue b/frontend/app/src/components/SidenavMenu.vue
index 181bd21..12163e6 100644
--- a/frontend/app/src/components/SidenavMenu.vue
+++ b/frontend/app/src/components/SidenavMenu.vue
@@ -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>
diff --git a/frontend/app/src/components/TransitionElement.vue b/frontend/app/src/components/TransitionElement.vue
index e9cbc76..e9d1b11 100644
--- a/frontend/app/src/components/TransitionElement.vue
+++ b/frontend/app/src/components/TransitionElement.vue
@@ -55,6 +55,7 @@ p {
     height: 0;
     overflow: hidden;
     transition: 1s;
+    background-color: red;
 }
 
 </style>