Centered Navbar using Placeholder StyleSelector

This commit is contained in:
Neshura 2022-12-15 22:33:40 +01:00
parent e15a0c16b8
commit dd1ab4bad9
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
4 changed files with 12 additions and 11 deletions

View file

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

View file

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

View file

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

View file

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