처음에는 쉽게 구현할 수 있을 거라고 생각했는데 막상 해보니 한 부분이 해결되면 다른 부분이 말썽이었다. 몇시간 동안 붙잡고 있었는데 결국 결과물은 간단했다.
아이콘은 fontawesome을 사용했다.
import React, { useState } from "react";
import styled from "styled-components";
const Header = () => {
const [mobile, setMobile] = useState(false);
return (
<Head>
<Contain>
<NavLink>
<NavUl mobile={mobile}>
<li>home</li>
<li>features</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
<li>
<button>FOLLOW</button>
</li>
</NavUl>
<Toggle onClick={() => setMobile(!mobile)}>
{!mobile ? <i className="fas fa-bars"></i> : <i className="fas fa-times"></i>}
</Toggle>
</NavLink>
</Contain>
</Head>
);
};아래는 styled-components 부분이다
const NavUl = styled.ul`
font-weight:600;
height:100%;
display:flex;
transition:0.3s;
@media screen and (max-width: 868px) {
flex-direction: column;
align-items:flex-end;
position:fixed;
top:100px;
right:${(props)=> (props.mobile === true ? '40px' : '-200px')}
}
`처음에는 mobile이 true면 보이고 false면 숨겨지는 방법으로 해보려고 했는데 모바일 화면이 아닐 때 메뉴바를 숨겨놓으면 화면이 커져도 메뉴바가 보이지 않았다.
그런데 <NavUl mobile={mobile}> 이렇게 넣어주고 미디어 쿼리를 사용하니 정상적으로 잘 작동했다!
프론트엔드