Centered Navbar using Placeholder StyleSelector
This commit is contained in:
parent
e15a0c16b8
commit
dd1ab4bad9
4 changed files with 12 additions and 11 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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};
|
||||
|
|
|
@ -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};
|
||||
}
|
||||
`
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue