regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unbork mobile nav

Browse Source
This commit is contained in:
regalijan 2023-10-19 16:50:19 -04:00
parent 87b7d0f0c7
commit 8c249236ee
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
2 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/Navigation.tsx
View File

@ -68,20 +68,13 @@ export default function (props: {
return ( return (
<> <>
<style media="(min-width: 1281px)"> <style media="all and (min-width: 1281px)">
{` {`
#nav-menu { #nav-menu {
display: none display: none
} }
`} `}
</style> </style>
<style media="(max-width: 1280px)">
{`
#nav-links {
display: none
}
`}
</style>
<Box as="section" pb={{ base: "6" }}> <Box as="section" pb={{ base: "6" }}>
<Box as="nav" boxSizing="unset"> <Box as="nav" boxSizing="unset">
<Container display="grid" maxW="container.xl" py={{ base: "6" }}> <Container display="grid" maxW="container.xl" py={{ base: "6" }}>
@ -104,26 +97,29 @@ export default function (props: {
</a> </a>
<Spacer /> <Spacer />
<Spacer /> <Spacer />
<Flex alignItems="center" className="nav-links"> <HStack
<HStack gap="3rem" whiteSpace="nowrap"> alignItems="center"
<Link href="/about" size="lg"> gap="3rem"
About Us whiteSpace="nowrap"
</Link> className="nav-links"
<Link href="/team" size="lg"> >
Our Team <Link href="/about" size="lg">
</Link> About Us
<Link href="/support" size="lg"> </Link>
Support <Link href="/team" size="lg">
</Link> Our Team
<Link </Link>
display={hasMod() ? undefined : "none"} <Link href="/support" size="lg">
href="/mod-queue" Support
size="lg" </Link>
> <Link
Moderation display={hasMod() ? undefined : "none"}
</Link> href="/mod-queue"
</HStack> size="lg"
</Flex> >
Moderation
</Link>
</HStack>
<Spacer /> <Spacer />
<Spacer /> <Spacer />
<div className="nav-links"> <div className="nav-links">

2
index.css
View File

@ -84,6 +84,6 @@ button:focus-visible {
@media (max-width: 1280px) { @media (max-width: 1280px) {
.nav-links { .nav-links {
display: none; display: none !important;
} }
} }