From 3781b4ae10b5bb04cd0f0e7cb421aaf8f874fdea Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
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)<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};
+  }
+
+`
\ 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<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};
+  }
+`
\ No newline at end of file