From e15a0c16b8a6a6583c8ab7b0b72dd70d10a892ea Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Thu, 15 Dec 2022 21:36:15 +0100
Subject: [PATCH] Moved ThemeSelector to NavBar

Added NavWrap so the ThemeSelector can be placed in a corner
---
 components/layout.tsx               |  1 -
 components/navbar.tsx               | 25 ++++++++++++++-----------
 components/styles/navbar.tsx        |  9 ++++++++-
 components/styles/themedropdown.tsx |  5 +++--
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/layout.tsx b/components/layout.tsx
index 2e0a80b..4a7aa36 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -2,7 +2,6 @@ import PageFooter from './footer'
 import PageNavbar from './navbar'
 import Script from 'next/script'
 import { Page, Main } from './styles/generic'
-import StyleSelector from './themeselector'
 
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 1201978..0caba23 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,5 +1,5 @@
 import { usePathname } from 'next/navigation'
-import { NavBar, NavLink } from './styles/navbar'
+import { NavBar, NavLink, NavWrap } from './styles/navbar';
 import StyleSelector from './themeselector';
 
 const navLinks = [
@@ -13,17 +13,20 @@ const PageNavbar = () => {
   const path = usePathname();
 
   return (
-    <NavBar>
-      {navLinks.map((item) => (
-        <NavLink active={path == item.href ? true : false} key={item.name} href={item.href}>
-          {item.name}
-        </NavLink>
-      ))}
-      <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
-        Mastodon
-      </NavLink>
+    <NavWrap>
       <StyleSelector></StyleSelector>
-    </NavBar>
+      <NavBar>
+        {navLinks.map((item) => (
+          <NavLink active={path == item.href ? true : false} key={item.name} href={item.href}>
+            {item.name}
+          </NavLink>
+        ))}
+        <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
+          Mastodon
+        </NavLink>
+
+      </NavBar>
+    </NavWrap>
   );
 }
 
diff --git a/components/styles/navbar.tsx b/components/styles/navbar.tsx
index ba61436..88c8037 100644
--- a/components/styles/navbar.tsx
+++ b/components/styles/navbar.tsx
@@ -5,11 +5,18 @@ interface ActivePropType {
   active?: false | true;
 }
 
+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`
   display: flex;
   flex: 1;
   padding: 2rem 0;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
diff --git a/components/styles/themedropdown.tsx b/components/styles/themedropdown.tsx
index 1425a8e..5f46e2f 100644
--- a/components/styles/themedropdown.tsx
+++ b/components/styles/themedropdown.tsx
@@ -9,6 +9,7 @@ interface ActivePropType {
 }
 
 export const ThemeDropDown = styled.div`
+  margin-left: 1%;
   min-width: 180px;
   color: ${({ theme }) => theme.colors.primary}
   display: flex;
@@ -16,7 +17,7 @@ export const ThemeDropDown = styled.div`
 `
 
 export const ThemeDropDownButton = styled.button`
-  width: 100%;
+  width: 90%;
   border: 1px solid;
   background-color: ${({ theme }) => theme.colors.background};
   padding: 0.2rem 0.5rem;
@@ -32,7 +33,7 @@ export const ThemeDropDownButton = styled.button`
 `
 
 export const ThemeDropDownOptions = styled.div<DisplayPropType>`
-  
+  position: absolute;
   color: ${({ theme }) => theme.colors.primary};
   background-color: ${({ theme }) => theme.colors.background};
   display: ${ props => props.show ? "flex" : "none" };