feat(website): prevent body scroll when sidebar is open

zidoro · Sep 5, 2020 · f9b49db · f9b49db
1 parent f36d1a6
commit f9b49db
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/website/src/components/Sidebar.tsx b/website/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link as ScrollLink } from "react-scroll";
 import {
 	StyledSidebar,
@@ -20,8 +20,17 @@ const Sidebar: React.FC<Props> = () => {
 		isDarkMode,
 		themeToggler,
 		isMenuOpen,
+		toggleMenu,
 	} = useContextProvider();
 
+	useEffect(() => {
+		if (isMenuOpen) {
+			document.body.style.overflow = "hidden";
+		} else {
+			document.body.style.overflow = "unset";
+		}
+	}, [isMenuOpen]);
+
 	return isOnMobile && isMenuOpen ? (
 		<StyledSidebar>
 			<StyledNavButtonWrapper>
@@ -33,14 +42,21 @@ const Sidebar: React.FC<Props> = () => {
 
 			<StyledSidebarList>
 				<NavLinks />
-			</StyledSidebarList>
 
-			<StyledScrollToDownload>
-				<ScrollLink href="/" to="installers" offset={-24} duration={420} smooth>
-					<SVG name="download" />
-					See Installers
-				</ScrollLink>
-			</StyledScrollToDownload>
+				<StyledScrollToDownload>
+					<ScrollLink
+						href="/"
+						onClick={toggleMenu}
+						to="installers"
+						offset={-24}
+						duration={420}
+						smooth
+					>
+						<SVG name="download" />
+						See Installers
+					</ScrollLink>
+				</StyledScrollToDownload>
+			</StyledSidebarList>
 		</StyledSidebar>
 	) : null;
 };

diff --git a/website/src/styles/components/nav.ts b/website/src/styles/components/nav.ts
@@ -162,7 +162,6 @@ export const StyledNavButtonWrapper = styled(motion.div).attrs(() => ({}))`
 		grid-template-columns: 1fr;
 		row-gap: 2rem;
 		max-width: 92rem;
-		margin-top: 4rem;
 		margin-bottom: 0.8rem;
 		margin-left: auto;
 		margin-right: auto;

diff --git a/website/src/styles/components/sidebar.ts b/website/src/styles/components/sidebar.ts
@@ -9,7 +9,7 @@ export const StyledSidebar = styled(motion.aside).attrs(() => ({
 	animate: "animate",
 	variants: stagger,
 }))`
-	padding: 0 5.6rem;
+	padding: 4rem 5.6rem;
 
 	background-color: var(--bg-primary);
 	border-top: 1px solid var(--border-tertiary);
@@ -23,15 +23,15 @@ export const StyledSidebar = styled(motion.aside).attrs(() => ({
 	z-index: 80;
 
 	${media.laptopSm} {
-		padding: 0 4rem;
+		padding: 4rem;
 	}
 
 	${media.tabletSm} {
-		padding: 0 2rem;
+		padding: 4rem 2rem;
 	}
 
 	${media.mobileXs} {
-		padding: 0 1.6rem;
+		padding: 4rem 1.6rem;
 	}
 `;