From 91ae73647038dfcb8472617863b404ff982c11f3 Mon Sep 17 00:00:00 2001
From: monastyr <mon4styr@gmail.com>
Date: Thu, 8 Nov 2018 01:37:21 +0100
Subject: [PATCH] [front] transition nieskonczona

---
 frontend/app/src/App.vue                    |  11 +-
 frontend/app/src/components/HelloWorld.vue  | 103 +----------
 frontend/app/src/components/SidenavMenu.vue | 192 +++++++++++++++++---
 frontend/app/src/img/graphql.svg            |   1 +
 frontend/app/src/img/page-first.svg         |   1 +
 frontend/app/src/img/page-last.svg          |   1 +
 frontend/app/src/img/pan-horizontal.svg     |   1 +
 frontend/app/src/img/view-headline.svg      |   1 +
 frontend/app/src/img/wrap-disabled.svg      |   1 +
 frontend/app/src/img/wrap.svg               |   1 +
 frontend/app/src/store/store.js             |   2 +-
 11 files changed, 182 insertions(+), 133 deletions(-)
 create mode 100644 frontend/app/src/img/graphql.svg
 create mode 100644 frontend/app/src/img/page-first.svg
 create mode 100644 frontend/app/src/img/page-last.svg
 create mode 100644 frontend/app/src/img/pan-horizontal.svg
 create mode 100644 frontend/app/src/img/view-headline.svg
 create mode 100644 frontend/app/src/img/wrap-disabled.svg
 create mode 100644 frontend/app/src/img/wrap.svg

diff --git a/frontend/app/src/App.vue b/frontend/app/src/App.vue
index c86fbb3..34eaeba 100644
--- a/frontend/app/src/App.vue
+++ b/frontend/app/src/App.vue
@@ -1,7 +1,5 @@
 <template>
   <div id="app">
-    <sidenav-menu></sidenav-menu>
-    <img src="./assets/logo.png">
     <router-view/>
   </div>
 </template>
@@ -14,12 +12,5 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>
diff --git a/frontend/app/src/components/HelloWorld.vue b/frontend/app/src/components/HelloWorld.vue
index 1c19f2a..47303c1 100644
--- a/frontend/app/src/components/HelloWorld.vue
+++ b/frontend/app/src/components/HelloWorld.vue
@@ -1,113 +1,16 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
+  <div class="hello2">
+    <sidenav-menu></sidenav-menu>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'HelloWorld',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App'
     }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
+
diff --git a/frontend/app/src/components/SidenavMenu.vue b/frontend/app/src/components/SidenavMenu.vue
index f3ce0b3..181bd21 100644
--- a/frontend/app/src/components/SidenavMenu.vue
+++ b/frontend/app/src/components/SidenavMenu.vue
@@ -1,30 +1,155 @@
 <template>
-    <div id="sidenav-menu" >
-        <div id="burger-icon" v-on:click="isHidden=!isHidden">
-            <div></div>
-            <div></div>
-            <div></div>
+<!-- <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>
-        <transition name="fade">
-            <div id="menu-links" v-show="!isHidden">
+        <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>
+                        <a v-bind:href="linkObj.address">{{linkObj.name}}</a>
                     </li>
                 </ul>
             </div>
-        </transition>
+        </div>
     </div>
+</div>
+</div>
+
+
 </template>
 
 
 
-<style>
+<style scoped>
+/* Obrazek do menu*/
+
+.wrapper {
+    background:#DDD;
+    display:inline-block;
+    padding: 10px;
+    height: 20px;
+    width:auto;
+}
+
+.label {
+    display: inline-block;
+    width: 1em;
+}
+
+.contents, .contents .inner {
+    display:inline-block;
+}
+
+.contents {
+    white-space:nowrap;
+    margin-left: -1em;
+    padding-left: 1em;
+}
+
+.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;
+}
+
+
+
+.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 {
+  opacity: 0;
+}
+.fade-enter-active {
+  transition: opacity 0.25s;
+}
+.fade-enter-to {
+  opacity: 0.5;
+}
+.fade-leave {
+  opacity: 0.5;
+}
+.fade-leave-active {
+  transition: opacity 2s;
+}
+.fade-leave-to {
+  opacity: 0;
+}
+
+.overlay #slide-element{
+    background: rebeccapurple;
+    position: relative;
+    top: 95%;
+
+}
+
+/* wystylizowanie calosci */
 #sidenav-menu{
-    /* wystylizowanie calosci */
     position: left;
-    width: 30%;
-    height: 100%;
+    width: 10%;
+    height:100vh; /**/
+    background-color: green;
 }
 
 #burger-icon div{
@@ -37,26 +162,49 @@
 
 #menu-links ul li a{
     background-color: yellow;
+    height:100vh; /**/
+
 }
 
-/* Animacja opóźnienia */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
+#slide-element{
+        position: relative;
+        top: 0%;
+        height: 5%;
+        background-color: grey
 }
+
 </style>
 
 
 <script>
 export default {
   name: 'sidenav-menu',
-  data(){
-      return{
-          isHidden :false//false
+  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
diff --git a/frontend/app/src/img/graphql.svg b/frontend/app/src/img/graphql.svg
new file mode 100644
index 0000000..7b99ed0
--- /dev/null
+++ b/frontend/app/src/img/graphql.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,5.37L11.56,5.31L6,14.9C6.24,15.11 6.4,15.38 6.47,15.68H17.53C17.6,15.38 17.76,15.11 18,14.9L12.44,5.31L12,5.37M6.6,16.53L10.88,19.06C11.17,18.79 11.57,18.63 12,18.63C12.43,18.63 12.83,18.79 13.12,19.06L17.4,16.53H6.6M12,22A1.68,1.68 0 0,1 10.32,20.32L10.41,19.76L6.11,17.21C5.8,17.57 5.35,17.79 4.84,17.79A1.68,1.68 0 0,1 3.16,16.11C3.16,15.32 3.69,14.66 4.42,14.47V9.36C3.59,9.25 2.95,8.54 2.95,7.68A1.68,1.68 0 0,1 4.63,6C5.18,6 5.66,6.26 5.97,6.66L10.38,4.13L10.32,3.68C10.32,2.75 11.07,2 12,2C12.93,2 13.68,2.75 13.68,3.68L13.62,4.13L18.03,6.66C18.34,6.26 18.82,6 19.37,6A1.68,1.68 0 0,1 21.05,7.68C21.05,8.54 20.41,9.25 19.58,9.36V14.47C20.31,14.66 20.84,15.32 20.84,16.11A1.68,1.68 0 0,1 19.16,17.79C18.65,17.79 18.2,17.57 17.89,17.21L13.59,19.76L13.68,20.32A1.68,1.68 0 0,1 12,22M10.8,4.86L6.3,7.44L6.32,7.68C6.32,8.39 5.88,9 5.26,9.25L5.29,14.5L10.8,4.86M13.2,4.86L18.71,14.5L18.74,9.25C18.12,9 17.68,8.39 17.68,7.68L17.7,7.44L13.2,4.86Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/img/page-first.svg b/frontend/app/src/img/page-first.svg
new file mode 100644
index 0000000..c683d5d
--- /dev/null
+++ b/frontend/app/src/img/page-first.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/img/page-last.svg b/frontend/app/src/img/page-last.svg
new file mode 100644
index 0000000..b54ce9f
--- /dev/null
+++ b/frontend/app/src/img/page-last.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/img/pan-horizontal.svg b/frontend/app/src/img/pan-horizontal.svg
new file mode 100644
index 0000000..1f405ab
--- /dev/null
+++ b/frontend/app/src/img/pan-horizontal.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,8L2.5,12L7,16V8M17,8V16L21.5,12L17,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/img/view-headline.svg b/frontend/app/src/img/view-headline.svg
new file mode 100644
index 0000000..dc6bddb
--- /dev/null
+++ b/frontend/app/src/img/view-headline.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/img/wrap-disabled.svg b/frontend/app/src/img/wrap-disabled.svg
new file mode 100644
index 0000000..1370304
--- /dev/null
+++ b/frontend/app/src/img/wrap-disabled.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,7H3V5H16V7M3,19H16V17H3V19M22,12L18,9V11H3V13H18V15L22,12Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/img/wrap.svg b/frontend/app/src/img/wrap.svg
new file mode 100644
index 0000000..c5a786b
--- /dev/null
+++ b/frontend/app/src/img/wrap.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M21,5H3V7H21V5M3,19H10V17H3V19M3,13H18C19,13 20,13.43 20,15C20,16.57 19,17 18,17H16V15L12,18L16,21V19H18C20.95,19 22,17.73 22,15C22,12.28 21,11 18,11H3V13Z" /></svg>
\ No newline at end of file
diff --git a/frontend/app/src/store/store.js b/frontend/app/src/store/store.js
index 685f860..222022d 100644
--- a/frontend/app/src/store/store.js
+++ b/frontend/app/src/store/store.js
@@ -9,7 +9,7 @@ export const store = new Vuex.Store({
             menuLinks: [
                 {name: '1', address: 'https://www.google.com/'},
                 {name: '1', address: 'https://www.google.com/'},
-                {name: '1', address: 'https://www.google.com/'},
+                {name: '9090', address: 'https://www.google.com/'},
                 {name: '1', address: 'https://www.google.com/'},
                 {name: '1', address: 'https://www.google.com/'},
                 {name: '1', address: 'https://www.google.com/'},