From 729cb667ef60cad4b30400d7ed098bf19636923e Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 24 Jan 2020 16:42:37 -0800 Subject: [PATCH] fix(clayui.com): Adds overflow hidden on body when mobile nav is open issue #2805 --- clayui.com/src/components/Sidebar/Sidebar.js | 2 ++ clayui.com/src/styles/site/_site.scss | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/clayui.com/src/components/Sidebar/Sidebar.js b/clayui.com/src/components/Sidebar/Sidebar.js index 6915c7d156..b8ea11e07b 100644 --- a/clayui.com/src/components/Sidebar/Sidebar.js +++ b/clayui.com/src/components/Sidebar/Sidebar.js @@ -14,6 +14,8 @@ const SideNavRef = React.createRef(); const onClick = () => { SidebarRef.current.classList.toggle('toggler-expanded'); + + document.querySelector('body').classList.toggle('clay-overflow-hidden-md-down'); }; let scrollTop = 0; diff --git a/clayui.com/src/styles/site/_site.scss b/clayui.com/src/styles/site/_site.scss index 7f4b1383a5..2ba330f9f9 100644 --- a/clayui.com/src/styles/site/_site.scss +++ b/clayui.com/src/styles/site/_site.scss @@ -19,6 +19,12 @@ body { // temporal hide +.clay-overflow-hidden-md-down { + @media (max-width: $screen-md - 1) { + overflow: hidden; + } +} + .style-toggler { display: none; }