diff --git a/website/src/components/nav/HeaderNav.tsx b/website/src/components/nav/HeaderNav.tsx
index 642ac1caa2..0c9221cd63 100644
--- a/website/src/components/nav/HeaderNav.tsx
+++ b/website/src/components/nav/HeaderNav.tsx
@@ -2,10 +2,11 @@ import React from 'react'
import styled, { css } from 'styled-components'
import { Link } from 'gatsby'
import { FaGithub, FaTwitter } from 'react-icons/fa'
-import { FiX, FiMenu, FiExternalLink, FiChevronDown } from 'react-icons/fi'
+import { FiExternalLink, FiChevronDown } from 'react-icons/fi'
import media from '../../theming/mediaQueries'
import ThemeSelector from '../ThemeSelector'
import * as nav from '../../data/nav'
+import { NavToggleButton } from './NavToggleButton'
interface HeaderNavProps {
isNavOpen: boolean
@@ -66,10 +67,7 @@ export const HeaderNav = ({ isNavOpen, toggleNav }: HeaderNavProps) => {
>
-
- {isNavOpen && }
- {!isNavOpen && }
-
+
)
}
@@ -197,28 +195,3 @@ const IconExternalLink = styled.a`
}
`}
`
-
-const NavToggleButton = styled.div`
- height: ${({ theme }) => theme.dimensions.headerHeight}px;
- width: ${({ theme }) => theme.dimensions.headerHeight}px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- user-select: none;
- margin-left: 12px;
- font-size: 24px;
- color: white;
-
- ${media.tablet`
- & {
- margin-left: 0;
- }
- `}
-
- ${media.mobile`
- & {
- margin-left: 0;
- }
- `}
-`
diff --git a/website/src/components/nav/NavToggleButton.tsx b/website/src/components/nav/NavToggleButton.tsx
new file mode 100644
index 0000000000..0ba67ceee5
--- /dev/null
+++ b/website/src/components/nav/NavToggleButton.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useSpring, animated, to, config } from '@react-spring/web'
+import media from '../../theming/mediaQueries'
+
+interface NavToggleButtonProps {
+ isOpen: boolean
+ onClick: () => void
+}
+
+const SIZE = 32
+const HALF_LENGTH = 11
+const SPACING = 7
+
+export const NavToggleButton = ({ isOpen, onClick }: NavToggleButtonProps) => {
+ const first = useSpring({
+ y: isOpen ? 0 : -SPACING,
+ rotation: isOpen ? 45 : 0,
+ config: config.wobbly,
+ })
+ const second = useSpring({
+ x1: isOpen ? -HALF_LENGTH - 10 : -HALF_LENGTH,
+ x2: isOpen ? 0 : HALF_LENGTH,
+ opacity: isOpen ? 0 : 1,
+ config: config.wobbly,
+ })
+ const third = useSpring({
+ y: isOpen ? 0 : SPACING,
+ rotation: isOpen ? -45 : 0,
+ config: config.wobbly,
+ })
+
+ return (
+
+
+
+ )
+}
+
+const Container = styled.div`
+ height: ${({ theme }) => theme.dimensions.headerHeight}px;
+ width: ${({ theme }) => theme.dimensions.headerHeight}px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ user-select: none;
+ margin-left: 12px;
+
+ & svg {
+ stroke: #ffffff;
+ stroke-width: 2;
+ stroke-linecap: round;
+ }
+
+ ${media.tablet`
+ & {
+ margin-left: 0;
+ }
+ `}
+
+ ${media.mobile`
+ & {
+ margin-left: 0;
+ }
+ `}
+`