Changed fullscreen effect on components and moved into another section

src/renderer/App.vue

@@ -2,7 +2,7 @@
   <div id="app" class="root">
     <DockableSidebar />
     <div class="page-wrapper">
-      <router-view class="page" :class="{'fullscreen' : fullscreenStatus}"></router-view>
+      <router-view class="page"></router-view>
       <PlayerBar class="player-bar" />
     </div>
   </div>
@@ -31,7 +31,8 @@ $lato-font-path: '/node_modules/lato-font/fonts'
 
 @include lato-include-font('normal')
 
-
+.root
+  position: relative
 .root,.page-wrapper
   display: flex
   @include lato-font('normal')

src/renderer/layouts/DockableSidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section class="handle" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
+        <section class="handle" :class="{'open': menuStatus}">
             <div @click="toggleMenuStatus" class="icon">
                 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
                     <g>
@@ -16,8 +16,8 @@
             </div>
             <Logo :nopadding="true"/>
         </section>
-        <section class="overlay" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}"  @click="toggleMenuStatus" />
-            <section class="sidebar" :class="{'open': menuStatus, 'fullscreen': fullscreenStatus}">
+        <section class="overlay" :class="{'open': menuStatus}"  @click="toggleMenuStatus" />
+            <section class="sidebar" :class="{'open': menuStatus}">
                 <div class="logo-wrapper">
                     <Logo class="logo" />
                 </div>
@@ -142,7 +142,7 @@ export default {
   methods: {
     ...mapActions(['toggleMenuStatus'])
   },
-  computed: mapGetters(['menuStatus', 'fullscreenStatus'])
+  computed: mapGetters(['menuStatus'])
 }
 </script>
 
@@ -208,13 +208,6 @@ section.sidebar
         min-height: 48px
         .icon
             display: none
-    &.fullscreen
-        transform: translateX(-100%)
-        overflow-y: hidden
-        z-index: 1200
-        position: absolute
-        left: 0
-        top: 0
     &.open
         transform: translateX(0%)
         padding: 1rem 0rem 0rem 1rem

src/renderer/layouts/PlayerBar.vue

@@ -1,5 +1,6 @@
 <template>
-    <section class="player" :class="{'fullscreen' : fullscreenStatus}">
+      <section>
+        <section class="player">
           <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
           <div>
               <p class="title">Yellow</p>
@@ -33,6 +34,12 @@
               </IconButton>
           </div>
       </section>
+      <section class="fullscreen" :class="{'active' : fullscreenStatus}">
+              <IconButton variant="contained" :click="toggleFullscreenStatus">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+              </IconButton>
+      </section>
+    </section>
 </template>
 
 <script>
@@ -208,10 +215,6 @@ section.player
     background-color: white
     min-height: 4.5rem
     transition: height 500ms ease, min-height 500ms ease, width 500ms ease
-    &.fullscreen
-      height: 100vh
-      min-height: 100vh
-      z-index: 1300
     .control-buttons
       span
         margin: 0 0.2rem
@@ -248,4 +251,17 @@ section.player
             cursor: pointer
             transition: width 200ms ease
             height: 100% !important
+section.fullscreen
+  width: 100vw
+  height: 100vh
+  position: absolute
+  overflow: hidden
+  left: 0
+  top: 0
+  background-color: white
+  z-index: 1400
+  transition: transform 500ms ease-out
+  transform: translate3d(0,+100vh,0)
+  &.active
+    transform: translate3d(0,0vh,0)
 </style>