Added navbar and theme selector styles

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 }
+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;
+} */

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)<ActivePropType>`
+  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};
+  }
+
+`

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<DisplayPropType>`
+  
+  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<ActivePropType>`
+  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};
+  }
+`