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

View file

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

View file

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

View file

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