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 Script from 'next/script'
import { Page, Main } from './styles/generic'
import StyleSelector from './themeselector'
const Layout = ({ children }: { children: React.ReactNode }) => {

View file

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

View file

@ -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;

View file

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