From 3781b4ae10b5bb04cd0f0e7cb421aaf8f874fdea Mon Sep 17 00:00:00 2001 From: Neshura Date: Thu, 15 Dec 2022 21:23:11 +0100 Subject: [PATCH] Added navbar and theme selector styles --- components/styles/generic.tsx | 32 +++++++++++++++-- components/styles/navbar.tsx | 31 +++++++++++++++++ components/styles/themedropdown.tsx | 54 +++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 components/styles/navbar.tsx create mode 100644 components/styles/themedropdown.tsx diff --git a/components/styles/generic.tsx b/components/styles/generic.tsx index 041f6d0..c36f720 100644 --- a/components/styles/generic.tsx +++ b/components/styles/generic.tsx @@ -1,8 +1,36 @@ import styled from 'styled-components' -const Page = styled.div` + +export const Page = styled.div` width: 100%; background-color: ${({ theme }) => theme.colors.background}; ` -export { Page } \ No newline at end of file +export const Main = styled.main` + color: ${({ theme }) => theme.colors.primary }; + min-height: 100vh; + padding: 1rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +` + +export const Footer = styled.footer` + color: ${({ theme }) => theme.colors.primary }; + display: flex; + flex: 1; + padding: 2rem 0; + border-top: 1px solid ${({ theme }) => theme.colors.primary }; + justify-content: center; + align-items: center; +` + +// TODO +/* .footer a { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} */ diff --git a/components/styles/navbar.tsx b/components/styles/navbar.tsx new file mode 100644 index 0000000..ba61436 --- /dev/null +++ b/components/styles/navbar.tsx @@ -0,0 +1,31 @@ +import styled from 'styled-components' +import Link from 'next/link'; + +interface ActivePropType { + active?: false | true; +} + +export const NavBar = styled.nav` + display: flex; + flex: 1; + padding: 2rem 0; + border-bottom: 1px solid ${({ theme }) => theme.colors.primary}; + 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; + + &:hover { + color: ${({ theme }) => theme.colors.secondary}; + } + +` \ No newline at end of file diff --git a/components/styles/themedropdown.tsx b/components/styles/themedropdown.tsx new file mode 100644 index 0000000..1425a8e --- /dev/null +++ b/components/styles/themedropdown.tsx @@ -0,0 +1,54 @@ +import styled from 'styled-components'; + +interface DisplayPropType { + show?: false | true; +} + +interface ActivePropType { + active?: false | true; +} + +export const ThemeDropDown = styled.div` + min-width: 180px; + color: ${({ theme }) => theme.colors.primary} + display: flex; + flex-direction: column; +` + +export const ThemeDropDownButton = styled.button` + width: 100%; + border: 1px solid; + background-color: ${({ theme }) => theme.colors.background}; + padding: 0.2rem 0.5rem; + cursor: pointer; + color: ${({ theme }) => theme.colors.primary}; + + &:hover { + color: ${({ theme }) => theme.colors.secondary}; + } + &:focus { + color: ${({ theme }) => theme.colors.secondary}; + } +` + +export const ThemeDropDownOptions = styled.div` + + color: ${({ theme }) => theme.colors.primary}; + background-color: ${({ theme }) => theme.colors.background}; + display: ${ props => props.show ? "flex" : "none" }; + flex-direction: column; + min-width: 160px; + z-index: 1; +` + +export const ThemeDropDownOption = styled.button` + color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary }; + background-color: ${({ theme }) => theme.colors.background}; + border: 1px solid; + padding: 0.2rem 0.5rem; + text-decoration: none; + + &:hover { + color: ${({ theme }) => theme.colors.secondary}; + } +` \ No newline at end of file