GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix navbar

Browse Source
This commit is contained in:
AykutSarac 2023-02-11 22:59:07 +03:00
parent 76615cc34a
commit bf981d4d27
No known key found for this signature in database
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Navbar/index.tsx
View File

@ -10,6 +10,8 @@ const StyledNavbar = styled.div`
padding: 16px 48px; padding: 16px 48px;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
justify-content: center;
a:first-of-type { a:first-of-type {
display: none; display: none;
} }
@ -35,6 +37,12 @@ const StyledNavLink = styled(Link)`
font-weight: 500; font-weight: 500;
color: ${({ theme }) => theme.ORANGE}; color: ${({ theme }) => theme.ORANGE};
} }
@media only screen and (max-width: 568px) {
&.mobileHide {
display: none;
}
}
`; `;
export const Navbar = () => ( export const Navbar = () => (
@ -43,10 +51,14 @@ export const Navbar = () => (
<img src="assets/icon.png" alt="json crack" width="120" /> <img src="assets/icon.png" alt="json crack" width="120" />
</Link> </Link>
<StyledLinkWrapper> <StyledLinkWrapper>
<StyledNavLink href="https://pro.jsoncrack.com">Pro</StyledNavLink> <StyledNavLink className="mobileHide" href="https://pro.jsoncrack.com">
Pro
</StyledNavLink>
<StyledNavLink href="/editor">Editor</StyledNavLink> <StyledNavLink href="/editor">Editor</StyledNavLink>
<StyledNavLink href="#features">Features</StyledNavLink> <StyledNavLink href="#features">Features</StyledNavLink>
<StyledNavLink href="#sponsor">Sponsor</StyledNavLink> <StyledNavLink className="mobileHide" href="#sponsor">
Sponsor
</StyledNavLink>
<StyledNavLink <StyledNavLink
href="https://github.com/AykutSarac/jsoncrack.com" href="https://github.com/AykutSarac/jsoncrack.com"
target="_blank" target="_blank"
@ -54,7 +66,9 @@ export const Navbar = () => (
> >
GitHub GitHub
</StyledNavLink> </StyledNavLink>
<StyledNavLink href="docs">Documentation</StyledNavLink> <StyledNavLink className="mobileHide" href="docs">
Documentation
</StyledNavLink>
</StyledLinkWrapper> </StyledLinkWrapper>
</StyledNavbar> </StyledNavbar>
); );