[gtk-web/new-website: 165/180] optimized sidebar behaviour on documentation pages

[Emmanuele Bassi <ebassi src gnome org>]

commit 6e6c0f51cb61a6ebdd82c619aa25477e7744215a
Author: ravgeetdhillon <ravgeetdhillon gmail com>
Date:   Sat Aug 24 20:05:52 2019 +0530

    optimized sidebar behaviour on documentation pages

 404.html                    | 2 +-
 _layouts/documentation.html | 9 +++++++--
 assets/css/index.css        | 6 ++++--
 3 files changed, 12 insertions(+), 5 deletions(-)
---
diff --git a/404.html b/404.html
index f33dffc..1f60528 100644
--- a/404.html
+++ b/404.html
@@ -7,7 +7,7 @@
 <div class="container py-4 d-flex align-items-center justify-content-center" style="min-height: 100vh;">
   <div class="row justify-content-center">
     <div class="col-12 col-sm-8 d-flex flex-column align-items-center">
-      <h3>404 Page not found</h3>
+      <h3 class="text-center">404 Page not found</h3>
       <img src="{{ '/assets/img/wall-404.png' | prepend: site.url }}" class="img-fluid w-75 w-sm-50 py-3" 
alt="404 Not Found" />
       <div class="w-100 py-3 px-3 bg-light rounded">
         <p>The requested page could not be found. If you feel this is not normal, then you create an issue 
on the Gitlab.</p>
diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index 33cb869..cde0e66 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -79,10 +79,15 @@ any changes made to this file will affect all the documentation pages
 <script>
   // handles the sidebar opening and closing functionality
   function openSideNav() {
-    document.querySelector(".nav-side").style.width = "250px";
+    // document.querySelector(".nav-side").style.width = "250px";
+    document.querySelector(".nav-side").style.left = "0%";
+    document.querySelector(".nav-side").style.opacity = "1";
   }
   function closeSideNav() {
-    document.querySelector(".nav-side").style.width = "0";
+    // document.querySelector(".nav-side").style.width = "0";
+    document.querySelector(".nav-side").style.left = "-55%";
+    document.querySelector(".nav-side").style.opacity = "0";
+
   }
 
   // adds anchor links to the headings in the markdown body
diff --git a/assets/css/index.css b/assets/css/index.css
index cf6ebd8..fe50ba2 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -157,11 +157,13 @@ if you have want to add new styling for new content or the already existing one,
 @media screen and (max-width: 768px) {
     .nav-side {
         height: 100%;
-        width: 0;
+        max-width: 288px;
+        width: 88%;
         position: fixed;
         z-index: 10;
         top: 0;
-        left: 0;
+        opacity: 0;
+        left: -55%;
         overflow-x: hidden;
         box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
         transition: 0.3s ease-in-out;