Skip to content

Commit

Permalink
[#124] refactor: HeaderMenu 컴포넌트 애니메이션 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
skid901 committed Dec 16, 2020
1 parent 1cff61a commit 200f4c2
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 14 deletions.
9 changes: 9 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/atoms/HeaderButton/HeaderButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
29 changes: 16 additions & 13 deletions frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
/** @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';
import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight.svg';
import { hoveredMenuToggleState, staticMenuToggleState } from '@/stores';
import { Menu } from '@molecules/index';

const wrapperCss = () => css`
const wrapperCss = css`
position: relative;
display: flex;
align-items: center;
Expand All @@ -21,20 +23,17 @@ const wrapperCss = () => css`
margin-right: 8px;
min-width: 0;
`;
const hoverAreaCss = () => css`
const hoverAreaCss = css`
position: absolute;
display: inline-block;
top: 45px;
left: 0;
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 {
Expand All @@ -44,23 +43,27 @@ 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 (
<div
css={wrapperCss()}
css={wrapperCss}
onMouseEnter={() => setHoveredMenuToggle(true)}
onMouseLeave={() => setHoveredMenuToggle(false)}
>
<HeaderButton clickHandler={() => setStaticMenuToggle(!staticMenuToggle)}>
{staticMenuToggle ||
(!hoveredMenuToggle ? <HamburgerMenu /> : <DoubleChevronRight />)}
</HeaderButton>
<div css={hoverAreaCss()} />
{(staticMenuToggle || hoveredMenuToggle) && (
<div css={menuCss(staticMenuToggle)}>
<Menu />
</div>
)}
<div css={hoverAreaCss} />
<AnimatedMenu style={menuStyleProps}>
<Menu />
</AnimatedMenu>
</div>
);
}
Expand Down

0 comments on commit 200f4c2

Please sign in to comment.