import styled from 'styled-components' import Link from 'next/link'; interface ActivePropType { active?: false | true; } export const NavWrap = styled.div` display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; border-bottom: 1px solid ${({ theme }) => theme.colors.primary}; ` export const NavBar = styled.nav` margin-right: 1%; display: flex; flex: 1; padding: 2rem 0; flex-wrap: nowrap; justify-content: center; align-items: center; ` export const NavLink = styled(Link)` color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary}; margin: 0.2rem; border: 1px solid; padding: 0.2rem 0.5rem; display: flex; justify-content: center; align-items: center; transition: color 0.15s ease, border-color 0.15s ease; &:hover { color: ${({ theme }) => theme.colors.secondary}; } `