www
/
www-new
15
3
Fork 5
Code Issues 58 Pull Requests 44 Projects Releases Wiki Activity

Add swipe to close nav menu #355

Closed
w25tran wants to merge 1 commits from menu-swipe-to-close into main
pull from: menu-swipe-to-close
merge into: www:main
Conversation 1 Commits 1 Files Changed 4 +41 -1
4 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Navbar.module.css
View File

@ -249,6 +249,8 @@
padding: calc(calc(64rem / 16) - 1rem);
padding-left: calc(calc(78rem / 16) - 1rem);
touch-action: none;
background-color: var(--secondary-background);
transition: 0.5s;

9
components/Navbar.tsx
View File

@ -1,3 +1,4 @@
import { useDrag } from "@use-gesture/react";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useReducer } from "react";
@ -104,6 +105,12 @@ export function Navbar() {
const router = useRouter();
const [state, dispatch] = useReducer(reducer, initialState);
const bind = useDrag(({ swipe: [swipeX] }) => {
if (swipeX == 1) {
dispatch({ type: "close" });
}
});
return (
<nav className={styles.navbar}>
<div className={styles.navContent}>
@ -126,7 +133,7 @@ export function Navbar() {
}
onClick={() => dispatch({ type: "close" })}
/>
<div className={styles.navMenuWrapper}>
<div className={styles.navMenuWrapper} {...bind()}>
<Link href="/">
<a
className={styles.logoMobile}

30
package-lock.json generated
View File

@ -10,6 +10,7 @@
"@mdx-js/loader": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@next/mdx": "11.0.1",
"@use-gesture/react": "^10.1.0",
"date-fns": "^2.11.1",
"date-fns-tz": "^1.1.6",
"next": "11.0.1",
@ -1356,6 +1357,22 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@use-gesture/core": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.1.0.tgz",
"integrity": "sha512-SBKLB48ZwbxefSO4a/rF2/51VWqMRdxUptimZ1GoTrR3Ng2f0VHSW5eyOwgOAZ+KsrSeVUwyM9CV10ig2hTksg=="
},
"node_modules/@use-gesture/react": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.1.0.tgz",
"integrity": "sha512-85vve/W3aLRpsZFu5gh0uM9LF0ivEdOZgSBjKGerlTLOswJAKaATeFPi1nfiTVVR4J+UUKo6n6iugiVHP6ulXQ==",
"dependencies": {
"@use-gesture/core": "10.1.0"
},
"peerDependencies": {
"react": ">= 16.8.0"
}
},
"node_modules/acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@ -10307,6 +10324,19 @@
"eslint-visitor-keys": "^2.0.0"
}
},
"@use-gesture/core": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.1.0.tgz",
"integrity": "sha512-SBKLB48ZwbxefSO4a/rF2/51VWqMRdxUptimZ1GoTrR3Ng2f0VHSW5eyOwgOAZ+KsrSeVUwyM9CV10ig2hTksg=="
},
"@use-gesture/react": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.1.0.tgz",
"integrity": "sha512-85vve/W3aLRpsZFu5gh0uM9LF0ivEdOZgSBjKGerlTLOswJAKaATeFPi1nfiTVVR4J+UUKo6n6iugiVHP6ulXQ==",
"requires": {
"@use-gesture/core": "10.1.0"
}
},
"acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",

1
package.json
View File

@ -20,6 +20,7 @@
"@mdx-js/loader": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@next/mdx": "11.0.1",
"@use-gesture/react": "^10.1.0",
"date-fns": "^2.11.1",
"date-fns-tz": "^1.1.6",
"next": "11.0.1",