fix(website): scrolling issues

zidoro · Feb 26, 2022 · 82da7b1 · 82da7b1
1 parent eade6bb
commit 82da7b1
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/website/package.json b/website/package.json
@@ -15,7 +15,7 @@
 		"dev": "gatsby develop",
 		"prebuild": "yarn clean",
 		"build": "gatsby build",
-		"start": "npm run develop",
+		"start": "npm run dev",
 		"lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
 		"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
 		"serve": "yarn clean && yarn build && gatsby serve",

diff --git a/website/src/components/Navigation.tsx b/website/src/components/Navigation.tsx
@@ -19,7 +19,7 @@ import Logo from "./Logo";
 import SVG from "./SVG";
 
 export const NavLinks: React.FC = () => {
-	const { toggleMenu } = useContextProvider();
+	const { closeMenu } = useContextProvider();
 
 	return (
 		<>
@@ -28,7 +28,7 @@ export const NavLinks: React.FC = () => {
 					<StyledNavLinkItem key={index}>
 						<StyledNavLinkAnchor
 							href="/"
-							onClick={toggleMenu}
+							onClick={closeMenu}
 							to={nav.link}
 							offset={nav.offset}
 							duration={420}

diff --git a/website/src/contexts/NavContext.tsx b/website/src/contexts/NavContext.tsx
@@ -3,6 +3,7 @@ import React, { createContext, useState } from "react";
 type Props = {
 	isMenuOpen: boolean;
 	toggleMenu?: () => void;
+	closeMenu?: () => void;
 };
 
 const NavContext = createContext<Props>({ isMenuOpen: false });
@@ -11,12 +12,14 @@ const NavProvider: React.FC = ({ children }) => {
 	const [isMenuOpen, setMenuOpen] = useState(false);
 
 	const toggleMenu = () => setMenuOpen((prevState) => !prevState);
+	const closeMenu = () => setMenuOpen(false);
 
 	return (
 		<NavContext.Provider
 			value={{
 				isMenuOpen,
 				toggleMenu,
+				closeMenu,
 			}}
 		>
 			{children}

diff --git a/website/src/hooks/useContextProvider.ts b/website/src/hooks/useContextProvider.ts
@@ -4,11 +4,18 @@ import { ThemeContext, ViewportContext, NavContext } from "../contexts";
 export const useContextProvider = () => {
 	const { isDarkMode, themeToggler } = useContext(ThemeContext);
 
-	const { isMenuOpen, toggleMenu } = useContext(NavContext);
+	const { isMenuOpen, toggleMenu, closeMenu } = useContext(NavContext);
 
 	const { width } = useContext(ViewportContext);
 
 	const isOnMobile = width <= 1024;
 
-	return { isDarkMode, themeToggler, isOnMobile, isMenuOpen, toggleMenu };
+	return {
+		isDarkMode,
+		themeToggler,
+		isOnMobile,
+		isMenuOpen,
+		toggleMenu,
+		closeMenu,
+	};
 };
diff --git a/website/src/styles/components/header.ts b/website/src/styles/components/header.ts
@@ -70,6 +70,8 @@ export const StyledHeading = styled(motion.h3).attrs(() => ({
 		top: -2rem;
 		left: 50%;
 		transform: translateX(-50%);
+		max-width: 100%;
+		overflow-x: hidden;
 
 		${media.tabletLg} {
 			font-size: 16rem;

diff --git a/website/src/styles/sections/download.ts b/website/src/styles/sections/download.ts
@@ -38,7 +38,7 @@ export const StyledDownloadButtonWrapper = styled(motion.div).attrs(() => ({
 	row-gap: 4rem;
 	grid-template-columns: 1fr 2fr 1fr;
 
-	${media.tabletMd} {
+	${media.tabletLg} {
 		grid-template-columns: 1fr;
 	}
 `;