diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2dea8c1..34e2607 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20268,6 +20268,15 @@ "throttle-debounce": "^2.1.0" } }, + "react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "react-syntax-highlighter": { "version": "13.5.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index f00b888..faf69ae 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,6 +23,7 @@ "react-app-rewired": "^2.1.6", "react-dom": "^17.0.1", "react-scripts": "^4.0.1", + "react-spring": "^8.0.27", "recoil": "^0.1.2", "typescript": "^4.1.2", "web-vitals": "^0.2.4" diff --git a/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx b/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx index 087d0f9..a0c0ad0 100644 --- a/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx +++ b/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx @@ -8,12 +8,15 @@ const buttonCss = (): SerializedStyles => css` user-select: none; cursor: pointer; color: inherit; - minwidth: 0px; + min-width: 0px; padding: 6px; margin: auto; white-space: nowrap; border-radius: 3px; font-size: inherit; + border: 0; + outline: 0; + &:hover { background-color: #cccccc; } diff --git a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx index f1d632b..0f2e45a 100644 --- a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx +++ b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx @@ -1,7 +1,9 @@ /** @jsx jsx */ /** @jsxRuntime classic */ import { jsx, css } from '@emotion/react'; +import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; +import { animated, useSpring, useTransition } from 'react-spring'; import { HeaderButton } from '@components/atoms'; import { ReactComponent as HamburgerMenu } from '@assets/hamburgerMenu.svg'; @@ -9,7 +11,7 @@ import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight import { hoveredMenuToggleState, staticMenuToggleState } from '@/stores'; import { Menu } from '@molecules/index'; -const wrapperCss = () => css` +const wrapperCss = css` position: relative; display: flex; align-items: center; @@ -21,7 +23,7 @@ const wrapperCss = () => css` margin-right: 8px; min-width: 0; `; -const hoverAreaCss = () => css` +const hoverAreaCss = css` position: absolute; display: inline-block; top: 45px; @@ -29,12 +31,9 @@ const hoverAreaCss = () => css` width: 100%; height: 100vh; `; -const menuCss = (staticMenuToggle: boolean) => css` +const AnimatedMenu = styled(animated.div)` position: absolute; display: inline-block; - top: ${staticMenuToggle ? 0 : 50}px; - left: 0; - margin-top: ${staticMenuToggle ? 0 : 10}px; `; function HeaderMenu(): JSX.Element { @@ -44,10 +43,16 @@ function HeaderMenu(): JSX.Element { const [hoveredMenuToggle, setHoveredMenuToggle] = useRecoilState( hoveredMenuToggleState, ); + const menuStyleProps = useSpring({ + top: staticMenuToggle ? 0 : 50, + left: hoveredMenuToggle || staticMenuToggle ? 0 : -240, + opacity: hoveredMenuToggle || staticMenuToggle ? 1 : 0, + marginTop: staticMenuToggle ? 0 : 10, + }); return (