diff --git a/components/burgermenu.tsx b/components/burgermenu.tsx index bd68f97..b572601 100644 --- a/components/burgermenu.tsx +++ b/components/burgermenu.tsx @@ -16,10 +16,13 @@ const BurgerContainer = styled.div<{open: boolean}>` display: none; width: 1.8rem; height: 1.8rem; - background-color: yellow; flex-direction: column; justify-content: center; + div { + transition: .2s; + } + &:hover { cursor: pointer; } @@ -28,14 +31,24 @@ const BurgerContainer = styled.div<{open: boolean}>` display: flex; nav { - display: none; + display: none !important; + position: absolute; + top: 0; } } ${({open}) => open && css` - background-color: red; - div:not(:last-child) { - background-color: green; + div { + position: absolute; + height: 4px; + } + + div:nth-child(1) { + transform: rotate(45deg) translate(.2rem, .2rem); + } + + div:nth-child(2) { + transform: rotate(-45deg) translate(-.18rem, .2rem); } div:last-child {