From 9253596504cc7495b3244689ff537b087df7b6ec Mon Sep 17 00:00:00 2001
From: Om More <51229945+thisisommore@users.noreply.github.com>
Date: Thu, 29 Jul 2021 03:25:50 +0530
Subject: [PATCH] doc(styles): Scroll menu and main content separately (#1685)

* doc(styles): Scroll menu and main content separately

Signed-off-by: thisisommore <ommore501@gmail.com>

* Remove element `<a class="exit-off-canvas"></a>`

Signed-off-by: thisisommore <ommore501@gmail.com>

* Update CONTRIBUTORS.md file

Signed-off-by: thisisommore <ommore501@gmail.com>

* Use % for heights instead of vh

Signed-off-by: thisisommore <ommore501@gmail.com>

* height should be 100% irrespective of width of device

Signed-off-by: thisisommore <ommore501@gmail.com>

* Allow overflowing vertically

Signed-off-by: thisisommore <ommore501@gmail.com>
---
 CONTRIBUTORS.md                                          | 1 +
 docs/themes/porter/assets/sass/docs-layout.scss          | 1 +
 docs/themes/porter/assets/sass/docs-responsive.scss      | 3 +++
 .../assets/sass/foundation/components/_offcanvas.scss    | 6 ++++--
 docs/themes/porter/assets/sass/helm-home.scss            | 9 +++++++--
 docs/themes/porter/layouts/partials/footer.html          | 2 --
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 9b32213d7..0e4bd4697 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -54,3 +54,4 @@ and we will add you. **All** contributors belong here. 💯
 * [Divyam Bhasin](https://github.com/divbhasin)
 * [Ritesh Yadav](https://github.com/DARK-art108)
 * [Jérémy Audiger](https://github.com/jaudiger)
+* [Om More](https://github.com/thisisommore)
\ No newline at end of file
diff --git a/docs/themes/porter/assets/sass/docs-layout.scss b/docs/themes/porter/assets/sass/docs-layout.scss
index a4615fa2c..35d22efe3 100755
--- a/docs/themes/porter/assets/sass/docs-layout.scss
+++ b/docs/themes/porter/assets/sass/docs-layout.scss
@@ -27,6 +27,7 @@ body {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 100%;
+  height:100%;
   overflow-y: scroll;
   overflow-x: hidden;
   padding-left: 300px;
diff --git a/docs/themes/porter/assets/sass/docs-responsive.scss b/docs/themes/porter/assets/sass/docs-responsive.scss
index 14cbab4d1..c4f9e7739 100755
--- a/docs/themes/porter/assets/sass/docs-responsive.scss
+++ b/docs/themes/porter/assets/sass/docs-responsive.scss
@@ -3,6 +3,7 @@
 @media only screen and (max-width: 64.063em) {
   .container-full {
     padding-left: 0;
+    overflow-y: auto;
   }
 
   .left-off-canvas-toggle .fa {
@@ -155,6 +156,8 @@
   }
 
   aside.left-off-canvas-menu {
+    height: calc(100vh - calc(100vh - 100%));
+    overflow-y: auto;
     ul {
       background: $blue2 !important;
 
diff --git a/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss b/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss
index d02d4f4f0..567f4dc2a 100644
--- a/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss
+++ b/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss
@@ -90,6 +90,7 @@ $menu-slide: "transform 500ms ease" !default;
 @mixin wrap-base {
   position: relative;
   width: 100%;
+  height:100%;
 }
 
 @mixin translate3d($tx, $ty, $tz) {
@@ -141,11 +142,12 @@ $menu-slide: "transform 500ms ease" !default;
 }
 
 // OFF CANVAS WRAP
-// Wrap visible content and prevent scroll bars
+// Wrap visible content and prevent horizontal scroll bars
 @mixin off-canvas-wrap {
   @include kill-flicker;
   @include wrap-base;
-  overflow: hidden;
+  overflow-y: visible;
+  overflow-x: clip;
   &.move-right,
   &.move-left,
   &.move-bottom,
diff --git a/docs/themes/porter/assets/sass/helm-home.scss b/docs/themes/porter/assets/sass/helm-home.scss
index cbf3c8937..755140b5b 100644
--- a/docs/themes/porter/assets/sass/helm-home.scss
+++ b/docs/themes/porter/assets/sass/helm-home.scss
@@ -1,7 +1,7 @@
 body.home {
   @include helvetica;
   overflow-x: hidden;
-
+  
   .row {
   max-width: 72rem;
   }
@@ -26,7 +26,9 @@ body.home {
     }
   }
 }
-
+html,body {
+  height: 100%;
+}
 nav.home-nav {
   position: absolute;
   min-height: 300px;
@@ -902,6 +904,9 @@ nav.home-nav {
     display: none;
   }
 
+  .off-canvas-wrap {
+    height:100%;
+  }
 
   // required to enforce "sticky" menu items when hamburger is clicked
   .off-canvas-wrap.move-left {
diff --git a/docs/themes/porter/layouts/partials/footer.html b/docs/themes/porter/layouts/partials/footer.html
index f5be4845e..89b60d2f8 100755
--- a/docs/themes/porter/layouts/partials/footer.html
+++ b/docs/themes/porter/layouts/partials/footer.html
@@ -1,8 +1,6 @@
 
     </div> <!-- /container-full-->
 
-    <a class="exit-off-canvas"></a>
-
     </div> <!-- /inner-wrap -->
   </div> <!-- /off-canvas-wrap -->