Created handle and adjusted timing and added nopadding variant to logo

src/renderer/App.vue

@@ -43,4 +43,8 @@ $lato-font-path: '/node_modules/lato-font/fonts'
   .page
     flex-grow: 1
     overflow: auto
+    transition: padding-top 300ms
+@media(max-width: 800px)
+  .page
+    padding-top: 64px
 </style>

src/renderer/components/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span :class="{'nopadding' : nopadding === true}">
         <img src="/static/logo-2.svg" alt="Jukebox">
         Jukebox.
     </span>
@@ -7,7 +7,8 @@
 
 <script>
 export default {
-  name: 'Logo'
+  name: 'Logo',
+  props: ['nopadding']
 }
 </script>
 
@@ -16,6 +17,9 @@ span
     margin-bottom: 12px
     font-size: 1.5rem
     color: lighten(black,40)
+    &.nopadding
+        margin-bottom: 0px
+
 img
     width: 24px
     height: auto

src/renderer/layouts/DockableSidebar.vue

@@ -1,5 +1,9 @@
 <template>
-    <section>
+    <div>
+        <section class="handle">
+            <Logo :nopadding="true"/>
+        </section>
+        <section class="sidebar">
             <Logo />
             <MenuGroup>
                 <template v-slot:title>Menu</template>
@@ -80,6 +84,7 @@
                 </MenuItem>
             </MenuGroup>
         </section>        
+    </div>
 </template>
 
 <script>
@@ -97,7 +102,20 @@ export default {
 </script>
 
 <style scoped lang="sass">
-section
+section.handle
+    position: absolute
+    left: 0
+    top: 0
+    width: 100%
+    height: 64px
+    box-sizing: border-box
+    transition: transform 300ms
+    background-color: #fcfcfc
+    transform: translateY(-100%)
+    display: flex
+    align-items: center
+    padding: 0 1rem
+section.sidebar
     width: 250px
     max-width: 250px
     min-height: 100vh
@@ -116,14 +134,16 @@ section
     .grow
         flex-grow: 1
 @media(max-width: 1000px)
-    section
+    section.sidebar
         width: 200px
         overflow: auto
         padding: 1rem 1rem 0rem 1rem
 @media(max-width: 800px)
-    section
+    section.sidebar
         transform: translateX(-100%)
         width: 0
         overflow: hidden
         padding: 2rem 0rem 0rem 0rem
+    section.handle
+        transform: translateY(0%)
 </style>