Moved ThemeSelector to NavBar

Added NavWrap so the ThemeSelector can be placed in a corner

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 }) => {

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>
   );
 }
 

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;

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" };