From d5068fb6fccfe40d829bd85a720c5e8773dada43 Mon Sep 17 00:00:00 2001
From: kurbezz <kurbanovbul@gmail.com>
Date: Sat, 19 Sep 2020 20:49:56 +0300
Subject: [PATCH] Update layout

---
 src/App.vue              |  9 +++++++--
 src/components/Photo.vue | 16 ++++++++--------
 src/views/About.vue      |  6 ++++++
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 47faf2a..b9af2e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -122,6 +122,7 @@ export default class App extends Vue {
 
   @Watch('leftPanelClosed')
   onLeftPanelClosedChange(val: boolean, oldValue: boolean) {
+
     this.changeLeftPanelStatus(val);
   }
 }
@@ -144,10 +145,15 @@ body, #app {
   background-color: white!important;
 }
 
+.close-btn {
+  z-index: 2;
+}
+
 .vertical-panel {
   position: absolute;
   height: 0px;
   width: 0px;
+  z-index: 1;
 }
 
 .content-body {
@@ -172,7 +178,7 @@ body, #app {
   }
 
   .close-btn-when-left-panel-open {
-    background-color: black!important;
+    background-color: transparent!important;
     transition: background-color linear .3s;
   }
 
@@ -202,7 +208,6 @@ body, #app {
     width: 58px;
     height: 100%;
     background: white!important;
-    z-index: 1;
   }
 
   .close-btn-label-when-left-panel-open {
diff --git a/src/components/Photo.vue b/src/components/Photo.vue
index 1d3a7eb..5f09468 100644
--- a/src/components/Photo.vue
+++ b/src/components/Photo.vue
@@ -1,12 +1,12 @@
 <template>
-  <transition appear name="fade">
-    <div class="photo-wrapper"
-        :style="photoWrapperStyle"
-        ref="element"
-        @click="onClick">
-        <div class="photo" :style="photoStyle"></div>
-    </div>
-  </transition>
+  <div class="photo-wrapper"
+    :style="photoWrapperStyle"
+    ref="element"
+    @click="onClick">
+    <transition appear name="fade">
+      <div class="photo" :style="photoStyle"></div>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa2807..bf152eb 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -3,3 +3,9 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+
+<style scoped>
+.about {
+  background-color: white;
+}
+</style>
\ No newline at end of file