Improving the UX of the sidebar on mobile (#228)

* refactor: move the sidebar to the bottom of the viewport on mobile for better UX

* feat(sidepanel): add a function which checks the viewport size and determines whether the side panel should be shown by default

src/index.css

@@ -336,26 +336,49 @@ div.zoom {
 }
 
 @media (max-width: 767px) {
-  #sidebar.wide {
-    width: 100%;
+  #sidebar {
+    background-color: #fff;
   }
 
+  #sidebar.wide {
+    width: 100%;
+    top: 50%;
+    max-height: 50%;
+  }
+
+  /* Position the thin sidebar at the bottom. */
   #sidebar.very.thin {
-    width: 35px;
+    right: unset !important;
+    left: unset !important;
+    bottom: 0;
+    width: 100%;
+    height: 42px !important;
+    top: auto;
+  }
+
+  /* Display the name horizontally. */
+  .collapsed-details .vertical-name {
+    writing-mode: unset;
+    transform: none;
+  }
+
+  /* Substitute the right arrow with a down arrow. */
+  #sidebar.wide i.icon.arrow.right:before {
+    content: "\f063";
+  }
+
+  /* Substitute the left arrow with an up arrow. */
+  #sidebar.very.thin i.icon.arrow.left:before {
+    content: "\f062";
   }
 
   #content #sidebar.wide ~ .pusher {
-    width: 0;
+    width: 100%;
+    height: 50%;
+    min-height: unset;
   }
 
   #content #sidebar.very.thin ~ .pusher {
-    width: calc(100% - 35px);
+    width: 100%;
   }
-
-  #sidebar.very.thin #sideToggle {
-    width: 35px;
-  }
-}
-
-
-
+}