New design & bug fixes

components/header/index.js

@@ -1,18 +1,14 @@
 import React from "react";
 import {
-  chakra,
   Box,
   Flex,
-  VisuallyHidden,
   HStack,
   Button,
   useDisclosure,
   VStack,
   IconButton,
-  CloseButton,
-  Container,
-  Image,
   useColorModeValue,
+  Icon,
 } from "@chakra-ui/react";
 import Dark from "components/header/dark";
 import {
@@ -22,160 +18,142 @@ import {
   IoLogoGithub,
   IoLogoTwitter,
 } from "react-icons/io5";
+import { BiLinkExternal } from "react-icons/bi";
 import Link from "next/link";
 import Hover from "animations/hover";
 import Show from "animations/show";
-import { BiLinkExternal } from "react-icons/bi";
+import { svgl } from "components/svg";
+import HEADER_LINKS from "./links";
 
 const Header = () => {
   const mobileNav = useDisclosure();
-  const bg = useColorModeValue("#fffffe", "#16161a");
-  const border = useColorModeValue("0", "1px");
-  const borderRadius = useColorModeValue("10px", "0");
-
+  const bg = useColorModeValue("light.100", "lightDark.900");
   return (
     <>
       <Box
         w="full"
         bg={bg}
-        mt="5"
-        mb="5"
-        px={{ base: 3, md: 5 }}
-        py="3"
-        pb="3"
-        borderRadius={borderRadius}
-        borderBottomWidth={border}
-        shadow="sm"
+        px={{ base: 3, md: 16 }}
+        pl={{ base: 3, md: 16 }}
+        py="5"
         pos="sticky"
-        top="2"
+        top="0"
         zIndex="1000"
       >
-        <Show>
-          <Flex alignItems="center" justifyContent="space-between" mx="auto">
+        <Flex alignItems="center" justifyContent="space-between" mx="auto">
+          <HStack spacing="1" alignItems="center">
             <Hover>
               <Link href="/" passHref>
-                <Flex cursor="pointer">
-                  <chakra.a title="SVGParty" display="flex" alignItems="center">
-                    <Image
-                      src="/images/logo.png"
-                      boxSize="25px"
-                      alt="SVGParty logo"
-                    />
-                    <VisuallyHidden>SVGParty</VisuallyHidden>
-                  </chakra.a>
-                  <chakra.h1
-                    fontSize="1xl"
-                    fontWeight="bold"
-                    ml="3"
-                  >
-                    SVGParty
-                  </chakra.h1>
-                </Flex>
+                <IconButton
+                  as={svgl}
+                  cursor="pointer"
+                  name="logo"
+                  boxSize="40px"
+                  mr="2"
+                  borderRadius="full"
+                  bg="transparent"
+                />
               </Link>
             </Hover>
-            <HStack display="flex" alignItems="center">
-              <HStack
-                spacing={2}
-                color="brand.500"
-                display={{ base: "none", md: "inline-flex" }}
+            {HEADER_LINKS.map((link) => (
+              <Link key={link.id} href={link.href} passHref>
+                <Button
+                  as="a"
+                  variant="ghost"
+                  variantColor="teal"
+                  fontWeight="light"
+                  borderRadius="0"
+                  _hover={{
+                    transform: "translateY(-1px)",
+                    transition: "all .1s",
+                    borderBottomWidth: "1px",
+                  }}
+                >
+                  {link.title}
+                  {link.external && (
+                    <Icon as={BiLinkExternal} ml="2" w="4" h="4" />
+                  )}
+                </Button>
+              </Link>
+            ))}
+          </HStack>
+          <HStack display="flex" alignItems="center">
+            <HStack spacing={3} display={{ base: "none", md: "inline-flex" }}>
+              <Link href="https://github.com/pheralb/svgl" passHref>
+                <IconButton
+                  aria-label="Github Repository"
+                  bg="transparent"
+                  border="0"
+                  variant="outline"
+                  icon={<IoLogoGithub size="30" />}
+                />
+              </Link>
+              <Dark />
+            </HStack>
+            <Box display={{ base: "inline-flex", md: "none" }}>
+              <IconButton
+                display={{ base: "flex", md: "none" }}
+                aria-label="Open menu"
+                fontSize="20px"
+                variant="ghost"
+                icon={<IoApps />}
+                onClick={mobileNav.onOpen}
+              />
+              <VStack
+                pos="absolute"
+                borderWidth="2px"
+                bg={bg}
+                top={0}
+                left={0}
+                right={0}
+                display={mobileNav.isOpen ? "flex" : "none"}
+                flexDirection="column"
+                pt="4"
+                pb={4}
+                spacing={3}
+                rounded="sm"
+                shadow="sm"
               >
+                <Button
+                  bg="transparent"
+                  border="0"
+                  variant="outline"
+                  leftIcon={<IoCloseSharp size="25" />}
+                  fontWeight="light"
+                  onClick={mobileNav.onClose}
+                >
+                  Close
+                </Button>
                 <Link
-                  href="https://github.com/pheralb/SVGParty/tree/main/public/library"
+                  href="https://github.com/pheralb/svgl/tree/main/public/library"
                   passHref
                 >
                   <Button
-                    variant="ghost"
-                    rightIcon={<BiLinkExternal />}
+                    bg="transparent"
+                    border="0"
+                    variant="outline"
+                    leftIcon={<IoBookOutline size="25" />}
                     fontWeight="light"
                   >
                     Library
                   </Button>
                 </Link>
-                <Link href="https://twitter.com/SVGPartyhq" passHref>
-                  <IconButton
-                    aria-label="Twitter profile"
-                    bg="transparent"
-                    border="0"
-                    variant="outline"
-                    icon={<IoLogoTwitter size="25" />}
-                  />
-                </Link>
-                <Link href="https://github.com/pheralb/SVGParty" passHref>
-                  <IconButton
-                    aria-label="Github Repository"
-                    bg="transparent"
-                    border="0"
-                    variant="outline"
-                    icon={<IoLogoGithub size="25" />}
-                  />
-                </Link>
-                <Dark />
-              </HStack>
-              <Box display={{ base: "inline-flex", md: "none" }}>
-                <IconButton
-                  display={{ base: "flex", md: "none" }}
-                  aria-label="Open menu"
-                  fontSize="20px"
-                  variant="ghost"
-                  icon={<IoApps />}
-                  onClick={mobileNav.onOpen}
-                />
-                <VStack
-                  pos="absolute"
-                  borderWidth="2px"
-                  bg={bg}
-                  top={0}
-                  left={0}
-                  right={0}
-                  display={mobileNav.isOpen ? "flex" : "none"}
-                  flexDirection="column"
-                  pt="4"
-                  pb={4}
-                  spacing={3}
-                  rounded="sm"
-                  shadow="sm"
-                >
+                <Link href="https://github.com/pheralb/svgl" passHref>
                   <Button
                     bg="transparent"
                     border="0"
                     variant="outline"
-                    leftIcon={<IoCloseSharp size="25" />}
+                    leftIcon={<IoLogoGithub size="25" />}
                     fontWeight="light"
-                    onClick={mobileNav.onClose}
                   >
-                    Close
+                    Github
                   </Button>
-                  <Link
-                    href="https://github.com/pheralb/SVGParty/tree/main/public/library"
-                    passHref
-                  >
-                    <Button
-                      bg="transparent"
-                      border="0"
-                      variant="outline"
-                      leftIcon={<IoBookOutline size="25" />}
-                      fontWeight="light"
-                    >
-                      Library
-                    </Button>
-                  </Link>
-                  <Link href="https://github.com/pheralb/SVGParty" passHref>
-                    <Button
-                      bg="transparent"
-                      border="0"
-                      variant="outline"
-                      leftIcon={<IoLogoGithub size="25" />}
-                      fontWeight="light"
-                    >
-                      Github
-                    </Button>
-                  </Link>
-                  <Dark />
-                </VStack>
-              </Box>
-            </HStack>
-          </Flex>
-        </Show>
+                </Link>
+                <Dark />
+              </VStack>
+            </Box>
+          </HStack>
+        </Flex>
       </Box>
     </>
   );

components/header/links.js

@@ -0,0 +1,16 @@
+const HEADER_LINKS = [
+  {
+    id: 1,
+    href: "/",
+    external: false,
+    title: "Browse",
+  },
+  {
+    id: 2,
+    href: "https://github.com/pheralb/svgl/tree/main/public/library",
+    external: true,
+    title: "Library",
+  }
+];
+
+export default HEADER_LINKS;