import styled from 'styled-components' import Link from 'next/link'; interface ActivePropType { active?: number; } 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: 1rem 0; flex-wrap: nowrap; justify-content: center; align-items: center; ` export const NavLink = styled(Link) ` color: ${props => props.active ? ({ theme }) => theme.invertButtons ? theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary : ({ theme }) => theme.colors.primary}; background-color: ${props => props.active ? ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : ({ theme }) => theme.colors.background}; padding: 2px 6px; border: 2px solid; margin: 0.2rem; border-radius: 5px; display: flex; justify-content: center; align-items: center; transition: all 0.1s ease; &:hover { color: ${({ theme }) => theme.invertButtons ? theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary}; background-color: ${({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background}; } `