feat: add sidebar for left pane for mobile (#108)

* feat: add sidebar for left pane on mobile

* feat: add box shadow for white bg

Author: ydcjeff

src/App.vue

@@ -80,6 +80,7 @@ body {
 .tab {
   --left-pane-margin-x: 1.5rem;
   margin: 0 var(--left-pane-margin-x);
+  padding-bottom: 2rem;
 }
 /* overriding prismjs defaults */
 pre,

src/components/NavBar.vue

@@ -135,5 +135,11 @@ h1 img {
   .version {
     display: none;
   }
+  .nav-bar {
+    position: fixed;
+    z-index: 11;
+    width: 100%;
+    background-color: var(--c-white);
+  }
 }
 </style>

src/components/PaneLeft.vue

@@ -77,7 +77,7 @@ export default {
   .left-pane-contexts {
     height: 100%;
     padding: 0;
-    margin-bottom: 1rem;
+    margin-bottom: 2.5rem;
   }
 }
 </style>

src/components/PaneSplit.vue

@@ -7,14 +7,38 @@
     @mouseup="stopDragging"
     @mouseleave="stopDragging"
   >
-    <div class="left" :style="{ width: getWidth() + '%' }">
+    <div
+      class="left"
+      :class="{ open: clicked }"
+      :style="{ width: getWidth() + '%' }"
+    >
       <slot name="left" />
       <div class="split-line" @mousedown.prevent="startDragging" />
     </div>
     <div class="right" :style="{ width: 100 - getWidth() + '%' }">
       <slot name="right" />
     </div>
   </div>
+  <div class="sidebar" @click="openSideBar">
+    <div class="icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        aria-hidden="true"
+        role="img"
+        class="iconify iconify--mdi"
+        width="2rem"
+        height="2rem"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -25,9 +49,13 @@ export default {
   setup() {
     const width = ref(45)
     const isDragging = ref(false)
+    const clicked = ref(false)
     const container = ref()
 
     // functions
+    const openSideBar = () => {
+      clicked.value = !clicked.value
+    }
     const getWidth = () => {
       return width.value < 20 ? 20 : width.value > 80 ? 80 : width.value
     }
@@ -46,6 +74,8 @@ export default {
     }
     return {
       width,
+      clicked,
+      openSideBar,
       isDragging,
       container,
       getWidth,
@@ -84,6 +114,9 @@ export default {
   width: 10px;
   cursor: ew-resize;
 }
+.sidebar {
+  display: none;
+}
 /* media queries */
 @media (max-width: 768px) {
   .split-pane {
@@ -92,9 +125,45 @@ export default {
   .left,
   .right {
     width: 100% !important;
+    padding-top: 0.5rem;
+    margin-top: 51px;
+    border: 0;
   }
   .split-line {
     display: none;
   }
+  .sidebar {
+    position: absolute;
+    display: block;
+  }
+  .sidebar .icon {
+    cursor: pointer;
+    display: block;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    color: var(--c-brand-red);
+    background-color: var(--c-white-light);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+    border-radius: 2px;
+    width: 2rem;
+    height: 2rem;
+    z-index: 99999;
+  }
+  .left {
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease-in;
+    z-index: 10;
+    background-color: var(--c-white);
+    top: 0;
+    bottom: 0;
+    overflow: auto;
+    height: auto;
+  }
+  .left.open {
+    transform: translateX(0);
+    transition: transform 0.35s ease-out;
+  }
 }
 </style>