From e15a0c16b8a6a6583c8ab7b0b72dd70d10a892ea Mon Sep 17 00:00:00 2001 From: Neshura 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 ( - - {navLinks.map((item) => ( - - {item.name} - - ))} - - Mastodon - + - + + {navLinks.map((item) => ( + + {item.name} + + ))} + + Mastodon + + + + ); } 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` - + position: absolute; color: ${({ theme }) => theme.colors.primary}; background-color: ${({ theme }) => theme.colors.background}; display: ${ props => props.show ? "flex" : "none" };