Moved ThemeSelector to NavBar

Added NavWrap so the ThemeSelector can be placed in a corner
This commit is contained in:
Neshura 2022-12-15 21:36:15 +01:00
parent 8ecf388122
commit e15a0c16b8
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
4 changed files with 25 additions and 15 deletions

View file

@ -2,7 +2,6 @@ import PageFooter from './footer'
import PageNavbar from './navbar' import PageNavbar from './navbar'
import Script from 'next/script' import Script from 'next/script'
import { Page, Main } from './styles/generic' import { Page, Main } from './styles/generic'
import StyleSelector from './themeselector'
const Layout = ({ children }: { children: React.ReactNode }) => { const Layout = ({ children }: { children: React.ReactNode }) => {

View file

@ -1,5 +1,5 @@
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { NavBar, NavLink } from './styles/navbar' import { NavBar, NavLink, NavWrap } from './styles/navbar';
import StyleSelector from './themeselector'; import StyleSelector from './themeselector';
const navLinks = [ const navLinks = [
@ -13,17 +13,20 @@ const PageNavbar = () => {
const path = usePathname(); const path = usePathname();
return ( return (
<NavBar> <NavWrap>
{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>
<StyleSelector></StyleSelector> <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>
); );
} }

View file

@ -5,11 +5,18 @@ interface ActivePropType {
active?: false | true; 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` export const NavBar = styled.nav`
display: flex; display: flex;
flex: 1; flex: 1;
padding: 2rem 0; padding: 2rem 0;
border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

View file

@ -9,6 +9,7 @@ interface ActivePropType {
} }
export const ThemeDropDown = styled.div` export const ThemeDropDown = styled.div`
margin-left: 1%;
min-width: 180px; min-width: 180px;
color: ${({ theme }) => theme.colors.primary} color: ${({ theme }) => theme.colors.primary}
display: flex; display: flex;
@ -16,7 +17,7 @@ export const ThemeDropDown = styled.div`
` `
export const ThemeDropDownButton = styled.button` export const ThemeDropDownButton = styled.button`
width: 100%; width: 90%;
border: 1px solid; border: 1px solid;
background-color: ${({ theme }) => theme.colors.background}; background-color: ${({ theme }) => theme.colors.background};
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
@ -32,7 +33,7 @@ export const ThemeDropDownButton = styled.button`
` `
export const ThemeDropDownOptions = styled.div<DisplayPropType>` export const ThemeDropDownOptions = styled.div<DisplayPropType>`
position: absolute;
color: ${({ theme }) => theme.colors.primary}; color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.colors.background}; background-color: ${({ theme }) => theme.colors.background};
display: ${ props => props.show ? "flex" : "none" }; display: ${ props => props.show ? "flex" : "none" };