Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Home link placement in the header for better accessibility #76

Merged
merged 9 commits into from
Oct 23, 2024
44 changes: 25 additions & 19 deletions apps/web-app/src/components/PageContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import shortenString from "@/utils/shortenString"
import { Container, HStack, Icon, IconButton, Link, Spinner, Stack, Text } from "@chakra-ui/react"
import { usePathname } from "next/navigation"
import { FaGithub } from "react-icons/fa"
import NextLink from "next/link"

export default function PageContainer({
children
Expand All @@ -27,25 +28,30 @@ export default function PageContainer({

return (
<>
<HStack align="center" justify="right" p="2">
<Link
href={getExplorerLink(
process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string,
process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string
)}
isExternal
>
<Text>{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}</Text>
</Link>
<Link href="https://github.com/semaphore-protocol/boilerplate" isExternal>
<IconButton
aria-label="Github repository"
variant="link"
py="3"
color="text.100"
icon={<Icon boxSize={6} as={FaGithub} />}
/>
</Link>
<HStack align="center" justify="space-between" p="2">
<NextLink href="/">Feedback</NextLink>
<HStack>
<Link
href={getExplorerLink(
process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string,
process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string
)}
isExternal
>
<Text>
{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}
</Text>
</Link>
<Link href="https://github.com/semaphore-protocol/boilerplate" isExternal>
<IconButton
aria-label="Github repository"
variant="link"
py="3"
color="text.100"
icon={<Icon boxSize={6} as={FaGithub} />}
/>
</Link>
</HStack>
</HStack>

<Container maxW="xl" flex="1" display="flex" alignItems="center">
Expand Down