add some styling

docs/src/layouts/App/index.vue

@@ -33,7 +33,7 @@
     </div>
 
     <div class="app__content">
-      <div class="app__sidebar">
+      <div class="app__sidebar" v-if="showSidebar">
         <portal-target name="desktop-nav" />
       </div>
 
@@ -49,7 +49,7 @@
             <slot />
           </div>
         </main>
-        <div class="app__page-navigation">
+        <div class="app__page-navigation" v-if="showSidebar">
           <div class="app__inner">
             <page-navigation />
           </div>
@@ -123,6 +123,13 @@ import PageNavigation from '@/components/PageNavigation'
 // import GithubButton from 'vue-github-button'
 
 export default {
+  props: {
+    showSidebar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
   components: {
     Icon,
     PageNavigation,

docs/src/layouts/App/style.scss

@@ -8,7 +8,7 @@ $menuBreakPoint: 800px;
   &__navigation {
     position: fixed;
     display: flex;
-    z-index: 1;
+    z-index: 2;
     top: 0;
     width: 100%;
     height: $navHeight;
@@ -33,6 +33,8 @@ $menuBreakPoint: 800px;
 
   &__content {
     display: flex;
+    position: relative;
+    z-index: 1;
   }
 
   &__name {
@@ -163,15 +165,15 @@ $menuBreakPoint: 800px;
     }
   }
 
-  &__inner {
-    margin: 0 auto;
-    max-width: 50rem;
-    padding: 0 1rem;
+  // &__inner {
+  //   margin: 0 auto;
+  //   max-width: 50rem;
+  //   padding: 0 1rem;
 
-    @media (min-width: $mobileBreakPoint) {
-      padding: 0 2rem;
-    }
-  }
+  //   @media (min-width: $mobileBreakPoint) {
+  //     padding: 0 2rem;
+  //   }
+  // }
 
   &__link-group {
     margin-bottom: 1rem;