import styled from 'styled-components' import Link from 'next/link'; import { NavBar, NavLink, NavWrap } from './desktop'; interface ActivePropType { active?: number; } interface MultipliesPropType { num?: number; } export const NavWrapMobile = styled(NavWrap)` width: 100%; flex-direction: row; position: fixed; z-index: 50; ` export const NavWrapMobileGhost = styled.div` position: relative; width: 100%; height: 50px; ` export const NavSideMenu = styled.div ` position: fixed; top: 0%; left: 0%; right: 0%; bottom: 0%; max-width: ${props => props.active ? "240px" : "0px"}; max-height: ${props => props.active ? "100%" : "50px"}; display: flex; justify-content: space-between; flex-direction: column; height: 100%; z-index: 100; border-right: ${ props => ({ theme }) => { let ret: string; if(props.active) { ret = "1px solid " + theme.colors.primary; } else { ret = "0px solid"; } return ret; }}; background-color: ${ props => ({ theme }) => { let ret: string; if (props.active) { ret = theme.colors.background; } else { ret = ""; } return ret; }}; backdrop-filter: ${props => props.active ? "blur(5px)" : ""}; overflow-x: hidden; transition-property: max-width, max-height, border-right, background-color, backdrop-filter; transition-timing-function: ease-in-out; transition-duration: 0.15s, 0s; transition-delay: ${props => props.active ? "0s" : "0s, 0.15s"}; ` export const NavSideMenuPanel = styled.div ` height: 100%; width: 240px; overflow: hidden; display: flex; flex-direction: column; align-items: left; ` export const NavSideMenuButton = styled.button ` position: ${ props => props.active ? "absolute" : "fixed"}; z-index: 200; left: ${ props => props.active ? "165px" : "0px"}; transition-property: left, color, background-color, border-color; transition-timing-function: ease-in-out; transition-duration: 0.135s, 0.15s; transition-delay: ${props => props.active ? "0.03s, 0s" : "0s, 0s"}; align-self: flex-end; cursor: pointer; margin: 12px; color: ${props => ({ theme }) => { let ret: string; if (props.active) { ret = theme.colors.secondary; } else { ret = theme.colors.primary; } return ret; }}; background-color: ${props => ({ theme }) => { let ret: string; if (props.active) { ret = theme.colors.secondary; } else { ret = theme.colors.background; } return ret; }}; border: 2px solid; border-radius: 5px; border-color: ${props => ({ theme }) => { let ret: string; if (props.active) { ret = theme.colors.secondary; } else { ret = theme.colors.primary; } return ret; }}; &:hover { color: ${({ theme }) => { return theme.colors.secondary }}; background-color: ${({ theme }) => { return theme.colors.background }}; border-color: ${({ theme }) => { return theme.colors.secondary; }}; } ` export const NavSideMenuGhost = styled.div ` flex: ${ props => props.num ? props.num * 2 : 2 }; ` export const NavBarMobile = styled(NavBar)` margin-top: 56px; flex-direction: column; align-items: flex-start; ` export const NavLinkMobile = styled(NavLink)` display: block; margin-left: 1rem; margin-top: 1rem; padding: 0.5rem; border: none; border-top: 2px solid; width: 80%; text-align: center; color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary}; background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background}; &:hover { color: ${({ theme }) => theme.colors.secondary }; background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background}; } ` export const NavIndicators = styled.nav` background-color: ${({ theme }) => theme.colors.background}; background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""}; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%"}; width: 100%; display: flex; flex: 1; padding: 1rem 0; flex-wrap: nowrap; justify-content: center; align-items: center; ` export const NavIndicator = styled(Link) ` margin: 0.2rem; border-radius: 50%; aspect-ratio: 1; width: 10px; border: 1px solid; border-color: ${ props => ({ theme }) => props.active ? theme.colors.primary : theme.colors.primary}; background-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.background}; &:hover { border-color: ${({ theme }) => theme.colors.primary}; color: ${({ theme }) => theme.colors.primary}; background-color: ${({ theme }) => theme.colors.primary}; } `