Merge pull request #389 from semaphore-protocol/feat/navbar

Website Navbar component
semaphore-protocol · Oct 20, 2023 · 2d23656 · 2d23656
2 parents 7982c95 + 7ca4fb9
commit 2d23656
Show file tree

Hide file tree

Showing 23 changed files with 145 additions and 156 deletions.
diff --git a/apps/website/public/next.svg b/apps/website/public/next.svg
diff --git a/apps/website/public/semaphore-logo.svg b/apps/website/public/semaphore-logo.svg
diff --git a/apps/website/public/vercel.svg b/apps/website/public/vercel.svg
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -1,15 +1,20 @@
+"use client"
+
 import { Heading, Text, VStack } from "@chakra-ui/react"
+import Container from "../components/Container"
 
 export default function Home() {
     return (
-        <VStack h="400" justify="center">
-            <Heading as="h2" size="xl">
-                Anonymous interactions
-            </Heading>
-            <Text align="center">
-                Using zero knowledge, users can prove their group membership <br />
-                and send signals such as votes or endorsements without revealing their original identity.
-            </Text>
-        </VStack>
+        <Container>
+            <VStack h="400" justify="center">
+                <Heading as="h2" size="xl">
+                    Anonymous interactions
+                </Heading>
+                <Text align="center">
+                    Using zero knowledge, users can prove their group membership <br />
+                    and send signals such as votes or endorsements without revealing their original identity.
+                </Text>
+            </VStack>
+        </Container>
     )
 }
diff --git a/apps/website/src/components/Container.tsx b/apps/website/src/components/Container.tsx
@@ -0,0 +1,11 @@
+import { Container as _Container, ContainerProps } from "@chakra-ui/react"
+import Navbar from "./Navbar"
+
+export default function Container({ children }: ContainerProps) {
+    return (
+        <_Container maxW="1440px" px="20">
+            <Navbar />
+            {children}
+        </_Container>
+    )
+}
diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { HStack, Image, Link } from "@chakra-ui/react"
+import { usePathname } from "next/navigation"
+import IconArrowUpRight from "../icons/IconArrowUpRight"
+
+export default function Navbar() {
+    const pathname = usePathname()
+
+    return (
+        <HStack py="7" justify="space-between">
+            <Image htmlWidth="148px" src="./semaphore-logo.svg" alt="Semaphore logo" />
+            <HStack fontSize="18px" spacing="10">
+                <Link
+                    href="/projects"
+                    variant="navlink"
+                    borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
+                >
+                    Projects
+                </Link>
+                <Link
+                    href="/learn"
+                    variant="navlink"
+                    borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
+                >
+                    Learn
+                </Link>
+                <Link
+                    href="/build"
+                    variant="navlink"
+                    borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
+                >
+                    Build
+                </Link>
+                <Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
+                    Documentation
+                    <IconArrowUpRight width="10px" ml={3} mb={1} />
+                </Link>
+                <Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
+                    Github
+                    <IconArrowUpRight width="10px" ml={3} mb={1} />
+                </Link>
+            </HStack>
+        </HStack>
+    )
+}
diff --git a/apps/website/src/icons/IconArrowUpRight.tsx b/apps/website/src/icons/IconArrowUpRight.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconArrowUpRightProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconArrowUpRight({ width, height, color }: IconArrowUpRightProps): JSX.Element {
+export default function IconArrowUpRight(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="00 0 10 11" width={width} height={height} color={color}>
+        <Icon viewBox="00 0 10 11" {...props}>
             <path
                 d="M3.8934 0.621094L3.88987 2.12109L7.30807 2.12909L0.105469 9.31723L1.16506 10.3789L8.3874 3.17112L8.3793 6.63163L9.8793 6.63508L9.8934 0.635119L3.8934 0.621094Z"
                 fill="currentColor"

diff --git a/apps/website/src/icons/IconBook.tsx b/apps/website/src/icons/IconBook.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconBookProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconBook({ width, height, color }: IconBookProps): JSX.Element {
+export default function IconBook(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 61 52" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 61 52" {...props}>
             <path
                 d="M16.4927 42.3526C12.2991 42.7791 8.08266 43.9388 4.71704 45.1706V9.01435C7.98748 7.67666 12.5479 6.27336 16.972 5.8288L16.9722 5.82878C21.8216 5.34019 25.7837 6.05722 28.092 8.35488V43.8716C24.5873 42.1687 20.3541 41.964 16.4932 42.3526L16.4927 42.3526ZM44.4409 42.3563C40.5768 41.9643 36.3465 42.1653 32.842 43.8709V8.35488C35.1504 6.05722 39.1125 5.34019 43.9619 5.82878L43.9621 5.8288C48.3862 6.27336 52.9466 7.67666 56.217 9.01435V45.1708C52.8492 43.9387 48.6355 42.7758 44.4409 42.3563ZM16.4935 1.10253L16.493 1.10259C10.7474 1.68322 4.96378 3.649 1.35879 5.28867C0.943874 5.47737 0.592024 5.78149 0.345241 6.16472C0.0984578 6.54795 -0.0328327 6.9941 -0.032959 7.44992V7.45005V48.7001L-0.032959 48.7002C-0.032849 49.0976 0.0669673 49.4886 0.257347 49.8374C0.447728 50.1862 0.722584 50.4816 1.05674 50.6967L1.32733 50.2762L1.05674 50.6967C1.3909 50.9117 1.77368 51.0395 2.17001 51.0683C2.56617 51.0971 2.96321 51.026 3.3248 50.8617C6.59797 49.3772 11.8732 47.5931 16.9685 47.0788C22.2133 46.5502 26.4081 47.4293 28.6143 50.1827L28.6145 50.1829C28.8371 50.4603 29.1191 50.6842 29.4397 50.838C29.7603 50.9919 30.1114 51.0717 30.467 51.0717C30.8227 51.0717 31.1737 50.9919 31.4944 50.838C31.815 50.6842 32.097 50.4603 32.3195 50.1829L32.3197 50.1827C34.526 47.4293 38.7209 46.5502 43.9619 47.0788C49.061 47.5931 54.3399 49.3773 57.6091 50.8616C57.9707 51.026 58.3678 51.0971 58.7641 51.0683C59.1604 51.0395 59.5432 50.9117 59.8773 50.6967C60.2115 50.4816 60.4864 50.1862 60.6767 49.8374C60.8671 49.4886 60.9669 49.0976 60.967 48.7002V48.7001V7.45005V7.44992C60.9669 6.9941 60.8356 6.54795 60.5888 6.16472C60.3421 5.78149 59.9902 5.47737 59.5753 5.28867C55.9703 3.64901 50.1867 1.68322 44.4411 1.10259L44.4409 1.10257C39.6636 0.621166 34.3025 1.04352 30.467 4.11179C26.6315 1.04364 21.2702 0.624865 16.4935 1.10253Z"
                 fill="currentColor"

diff --git a/apps/website/src/icons/IconBox.tsx b/apps/website/src/icons/IconBox.tsx
@@ -1,15 +1,9 @@
-import { Icon } from "@chakra-ui/react"
+import { Icon, IconProps } from "@chakra-ui/react"
 import React from "react"
 
-export type IconBoxProps = {
-    width?: number
-    height?: number
-    color?: string
-}
-
-export default function IconBox({ width, height, color }: IconBoxProps): JSX.Element {
+export default function IconBox(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 63 63" width={width} height={height} color={color}>
+        <Icon viewBox="0 0 63 63" {...props}>
             <path
                 d="M31.9261 4.38852C31.4635 4.20312 30.9472 4.20312 30.4846 4.38852L7.35857 13.6381L16.6741 17.362L40.5208 7.82564L31.9261 4.38852ZM45.7366 9.91427L21.8898 19.4506L31.2053 23.1745L55.0521 13.6381L45.7366 9.91427ZM58.3303 16.5018L33.1428 26.5768V57.2745L58.3303 47.1995V16.5056V16.5018ZM29.2678 57.2784V26.5729L4.08032 16.5018V47.2034L29.2678 57.2784ZM29.0469 0.788643C30.4325 0.234515 31.9781 0.234515 33.3637 0.788643L60.9886 11.8401C61.3477 11.9841 61.6556 12.2323 61.8724 12.5527C62.0893 12.8732 62.2052 13.2512 62.2053 13.6381V47.2034C62.2048 47.9777 61.9724 48.7341 61.5379 49.3751C61.1035 50.016 60.487 50.5121 59.7679 50.7994L31.9261 61.9361C31.4635 62.1215 30.9472 62.1215 30.4846 61.9361L2.64657 50.7994C1.9268 50.5127 1.30947 50.0169 0.87431 49.3759C0.439146 48.7349 0.206122 47.9781 0.205322 47.2034L0.205322 13.6381C0.205412 13.2512 0.321354 12.8732 0.538212 12.5527C0.75507 12.2323 1.06291 11.9841 1.42207 11.8401L29.0469 0.788643Z"
                 fill="currentColor"