refactor(website): make navbar position fixed

semaphore-protocol · Nov 9, 2023 · 1e3dacf · 1e3dacf
1 parent bb1ff3b
commit 1e3dacf
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 59 deletions.
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -29,8 +29,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <html lang="en" suppressHydrationWarning={true}>
             <body suppressHydrationWarning={true}>
                 <Providers>
+                    <Navbar />
                     <Container maxW="1440px" px={{ base: "5", md: "10" }}>
-                        <Navbar />
                         {children}
                         <Footer />
                     </Container>

diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
@@ -2,6 +2,7 @@
 
 import {
     Box,
+    Container,
     Divider,
     Drawer,
     DrawerBody,
@@ -28,70 +29,76 @@ export default function Navbar() {
     const { isOpen, onOpen, onClose } = useDisclosure()
 
     return (
-        <HStack py="7" justify="space-between">
-            <Link as={NextLink} href="/">
-                <Box display={{ base: "none", sm: "block" }}>
-                    <Image width="148" height="40" src="./semaphore-logo.svg" alt="Semaphore logo" />
-                </Box>
-                <Box display={{ base: "block", sm: "none" }}>
-                    <Image width="20" height="40" src="./semaphore-icon.svg" alt="Semaphore icon" />
-                </Box>
-            </Link>
-            <HStack display={{ base: "none", md: "flex" }} fontSize="18px" spacing="10">
-                <NavbarLinks />
-            </HStack>
+        <HStack zIndex="1" py="7" top="0" left="0" right="0" position="fixed" bgColor="darkBlueBg">
+            <Container maxW="1440px" px={{ base: "5", md: "10" }}>
+                <HStack justify="space-between">
+                    <Link as={NextLink} href="/">
+                        <Box display={{ base: "none", sm: "block" }}>
+                            <Image width="148" height="40" src="./semaphore-logo.svg" alt="Semaphore logo" />
+                        </Box>
+                        <Box display={{ base: "block", sm: "none" }}>
+                            <Image width="20" height="40" src="./semaphore-icon.svg" alt="Semaphore icon" />
+                        </Box>
+                    </Link>
 
-            <IconButton
-                onClick={onOpen}
-                display={{ base: "block", md: "none" }}
-                aria-label="Menu"
-                variant="unstyled"
-                icon={<IconMenu boxSize="6" />}
-            />
+                    <HStack display={{ base: "none", md: "flex" }} fontSize="18px" spacing="10">
+                        <NavbarLinks />
+                    </HStack>
 
-            <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
-                <DrawerOverlay />
-                <DrawerContent bgColor="darkBlueBg">
-                    <DrawerCloseButton mt={"25px"} mr={"21px"} />
+                    <IconButton
+                        px="0 !important"
+                        onClick={onOpen}
+                        display={{ base: "block", md: "none" }}
+                        aria-label="Menu"
+                        variant="unstyled"
+                        icon={<IconMenu boxSize="6" />}
+                    />
 
-                    <DrawerBody>
-                        <VStack spacing="8" mt="20">
-                            <NavbarLinks onClick={onClose} />
-                        </VStack>
-                    </DrawerBody>
+                    <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
+                        <DrawerOverlay />
+                        <DrawerContent bgColor="darkBlueBg">
+                            <DrawerCloseButton mt={"25px"} mr={"21px"} />
 
-                    <DrawerFooter mb="5" flexDirection="column">
-                        <Divider mb="20" />
+                            <DrawerBody>
+                                <VStack spacing="8" mt="20">
+                                    <NavbarLinks onClick={onClose} />
+                                </VStack>
+                            </DrawerBody>
 
-                        <VStack w="full" justify="center" spacing="5">
-                            <Link href="https://semaphore.pse.dev/discord" isExternal>
-                                <HStack>
-                                    <IconDiscord boxSize="16px" />
-                                    <Heading fontSize="14px" fontWeight="normal">
-                                        Discord
-                                    </Heading>
-                                </HStack>
-                            </Link>
+                            <DrawerFooter mb="5" flexDirection="column">
+                                <Divider mb="20" />
 
-                            <Link
-                                href="https://github.com/semaphore-protocol/semaphore/discussions/categories/website"
-                                isExternal
-                            >
-                                <HStack>
-                                    <IconThumbsUp boxSize="16px" />
-                                    <Heading fontSize="14px" fontWeight="normal">
-                                        Give feedback about the website
-                                    </Heading>
-                                </HStack>
-                            </Link>
+                                <VStack w="full" justify="center" spacing="5">
+                                    <Link href="https://semaphore.pse.dev/discord" isExternal>
+                                        <HStack>
+                                            <IconDiscord boxSize="16px" />
+                                            <Heading fontSize="14px" fontWeight="normal">
+                                                Discord
+                                            </Heading>
+                                        </HStack>
+                                    </Link>
 
-                            <Text fontSize="12px" color="text.500" pt="2">
-                                Copyright © 2023 Ethereum Foundation
-                            </Text>
-                        </VStack>
-                    </DrawerFooter>
-                </DrawerContent>
-            </Drawer>
+                                    <Link
+                                        href="https://github.com/semaphore-protocol/semaphore/discussions/categories/website"
+                                        isExternal
+                                    >
+                                        <HStack>
+                                            <IconThumbsUp boxSize="16px" />
+                                            <Heading fontSize="14px" fontWeight="normal">
+                                                Give feedback about the website
+                                            </Heading>
+                                        </HStack>
+                                    </Link>
+
+                                    <Text fontSize="12px" color="text.500" pt="2">
+                                        Copyright © 2023 Ethereum Foundation
+                                    </Text>
+                                </VStack>
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </Drawer>
+                </HStack>
+            </Container>
         </HStack>
     )
 }
diff --git a/apps/website/src/styles/styles.ts b/apps/website/src/styles/styles.ts
@@ -7,7 +7,7 @@ export const font = Outfit({ subsets: ["latin"] })
 const styles: Styles = {
     global: (): SystemStyleObject => ({
         body: {
-            bg: "#00020D",
+            bg: "darkBlueBg",
             color: "white"
         },
         "body, #__next": {