Added a new drawer example in the documentation.

Author: antoniandre

src/views/documentation.vue

@@ -495,7 +495,7 @@
     a(href="#toggle-a-pane-with-v-if") Toggle a pane with #[span.code v-if]
 
   w-button.mb2(@click="hidePane2 = !hidePane2")
-    w-icon.mr2 mdi mdi-{{ hidePane2 ? 'eye' : 'eye-off'}}
+    w-icon.mr2 mdi mdi-{{ hidePane2 ? 'eye' : 'eye-off' }}
     | {{ hidePane2 ? 'Show' : 'Hide' }} Pane 2
   splitpanes.default-theme.example(style="height: 400px")
     pane
@@ -519,6 +519,56 @@
       </pane>
     </splitpanes>
 
+  //- Example.
+  h3.mt12.pt8.mb2(id="resizable-drawer")
+    a(href="#resizable-drawer") Resizable Drawer
+
+  p.
+    Sometimes, you need a resizable drawer that goes on top of your app.#[br]
+    Here's one way to do this, mostly thanks to CSS powers. The key here is to set the Splitpanes
+    container to #[code pointer-events: none;] and reactivate the pointer events in the splitter and drawer
+    so that you can click through Splitpanes on the rest of the page.
+
+  w-button.mb2(@click="showDrawer = !showDrawer")
+    w-icon.mr2 mdi mdi-{{ showDrawer ? 'eye' : 'eye-off' }}
+    | {{ showDrawer ? 'Hide' : 'Show' }} Drawer
+  splitpanes.default-theme.example.example--drawer(v-if="showDrawer")
+    pane
+    pane.drawer(size="40")
+      h3.mt12 Resizable Drawer
+
+  ssh-pre(language="html-vue" label="HTML").
+    <button @click="showDrawer = !showDrawer">
+      {{ "\{\{ showDrawer ? 'Hide' : 'Show' \}\}" }} Drawer
+    </button>
+
+    <splitpanes v-if="showDrawer" class="default-theme">
+      <pane></pane>
+      <pane size="40">
+        <h3>Resizable Drawer</h3>
+      </pane>
+    </splitpanes>
+
+  ssh-pre(language="css" label="CSS").
+    .splitpanes {
+      position: fixed;
+      inset: 0 0 0 auto;
+      z-index: 100;
+      pointer-events: none;
+
+      .splitpanes__pane:first-child {background-color: transparent;}
+      .splitpanes__splitter {pointer-events: all;}
+
+      .splitpanes__pane ~ .splitpanes__pane {
+        pointer-events: all;
+        background-color: #fff;
+        box-shadow: none;
+        align-items: flex-start;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+
   //- Example.
   h3.mt12.pt8.mb2(id="vue-router")
     a(href="#vue-router") Vue Router inside splitpanes
@@ -864,6 +914,7 @@ const paneSize = ref(50)
 const hidePane2 = ref(false)
 const horizontal = ref(false)
 const firstSplitter = ref(false)
+const showDrawer = ref(false)
 
 const panesNumberAbs = computed(() => {
   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
@@ -1020,6 +1071,25 @@ em.specs {
   }
 }
 
+.example.example--drawer {
+  position: fixed;
+  inset: 0 0 0 auto;
+  z-index: 100;
+  pointer-events: none;
+
+  .splitpanes__pane:first-child {background-color: transparent;}
+  .splitpanes__splitter {pointer-events: all;}
+
+  .splitpanes__pane.drawer {
+    pointer-events: all;
+    background-color: #fff;
+    box-shadow: none;
+    align-items: flex-start;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
 // In order to showcase the synchronicity with the panes.
 div.w-slider__thumb, div.w-slider__range {transition: none;}
 .example--programmatic-resizing .splitpanes__pane {transition: none;}