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

* add Home link to header for easy navigation to first page * Add Home link placement in the header for better accessibility * Updated link UX in PageContainer * fixed prettier problem * apply Prettier to fix code formatting issues * removed yarn.lock and package-lock.json files and updated package.json file * "Updated version specifiers in package.json" * updated yarn.lock file * Updated yarn.lock file with yarn command
semaphore-protocol · Oct 23, 2024 · f8dd530 · f8dd530
1 parent 426ed69
commit f8dd530
Showing 1 changed file with 25 additions and 19 deletions.
diff --git a/apps/web-app/src/components/PageContainer.tsx b/apps/web-app/src/components/PageContainer.tsx
@@ -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
@@ -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">