Centered Navbar using Placeholder StyleSelector

components/navbar.tsx

@@ -1,6 +1,6 @@
 import { usePathname } from 'next/navigation'
 import { NavBar, NavLink, NavWrap } from './styles/navbar';
-import StyleSelector from './themeselector';
+import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
 
 const navLinks = [
   { name: "Home", href: "/" },
@@ -24,8 +24,8 @@ const PageNavbar = () => {
         <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
           Mastodon
         </NavLink>
-
       </NavBar>
+      <StyleSelectorPlaceholder></StyleSelectorPlaceholder>
     </NavWrap>
   );
 }

components/styles/navbar.tsx

@@ -14,6 +14,7 @@ export const NavWrap = styled.div`
 `
 
 export const NavBar = styled.nav`
+  margin-right: 1%;
   display: flex;
   flex: 1;
   padding: 2rem 0;
@@ -30,6 +31,7 @@ export const NavLink = styled(Link)<ActivePropType>`
   display: flex;
   justify-content: center;
   align-items: center;
+  transition: color 0.15s ease, border-color 0.15s ease;
 
   &:hover {
     color: ${({ theme }) => theme.colors.secondary};

components/styles/themedropdown.tsx

@@ -23,11 +23,9 @@ export const ThemeDropDownButton = styled.button`
   padding: 0.2rem 0.5rem;
   cursor: pointer;
   color: ${({ theme }) => theme.colors.primary};
+  transition: color 0.15s ease;
 
-  &:hover {
-    color: ${({ theme }) => theme.colors.secondary};
-  }
-  &:focus {
+  &:focus,:hover {
     color: ${({ theme }) => theme.colors.secondary};
   }
 `

components/themeselector.tsx

@@ -11,7 +11,7 @@ const themes = [
   amoled2Theme,
 ]
 
-const StyleSelector = () => {
+export const StyleSelector = () => {
   const updateTheme = useUpdateTheme();
   const currentTheme = useContext(ThemeContext);
   const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
@@ -56,10 +56,11 @@ const StyleSelector = () => {
   );
 }
 
-{/* <button onClick={() => updateLightTheme(lightTheme)}>Light Style</button>
-<button onClick={() => updateThemeWithStorage(darkTheme)}>Dark Style</button>
-<button onClick={() => updateThemeWithStorage(amoledTheme)}>Amoled Style</button>
-<button onClick={() => updateThemeWithStorage(amoled2Theme)}>Amoled 2 Style</button> */}
+export const StyleSelectorPlaceholder = () => {
+  return (
+    <ThemeDropDown></ThemeDropDown>
+  )
+}
 
 export function getTheme(themeId: number): DefaultTheme {
   let theme: DefaultTheme;