fix(clayui.com): Adds overflow hidden on body when mobile nav is open

issue #2805
liferay · Jan 25, 2020 · 729cb66 · 729cb66
1 parent 94e34f3
commit 729cb66
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -19,6 +19,12 @@ body {
 
 // temporal hide
 
+.clay-overflow-hidden-md-down {
+	@media (max-width: $screen-md - 1) {
+		overflow: hidden;
+	}
+}
+
 .style-toggler {
 	display: none;
 }