New site, new svgs and bug fixes

components/card/index.js

@@ -1,32 +1,76 @@
 import React from "react";
 import Link from "next/link";
-import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
+import {
+  Box,
+  Text,
+  Image,
+  Center,
+  HStack,
+  IconButton,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { IoCloudDownloadOutline } from "react-icons/io5";
+import { FiExternalLink } from "react-icons/fi";
+import download from "downloadjs";
+import toast from "react-hot-toast";
 import Tap from "animations/tap";
 
 const Index = ({ title, url, href }) => {
+  const bgColor = useColorModeValue("#F2F2F2", "#1D1D1D");
+  const color = useColorModeValue("black", "white");
+
+  const downloadSvg = (url) => {
+    toast(`Downloading ${title}...`, {
+      icon: "🥳",
+      style: {
+        borderRadius: "10px",
+        background: bgColor,
+        color: color,
+      },
+    });
+    download(url);
+  };
+
   return (
-    <Tap>
-      <Link href={url} passHref>
-        <Box
-          _hover={{
-            shadow: "md",
-            transform: "translateY(-4px)",
-            transition: "all .3s",
-          }}
-          p={4}
-          cursor="pointer"
-          borderRadius="10px"
-          mb="3"
-        >
-          <Center>
-            <Image src={href} alt={title} boxSize="60px" />
-          </Center>
-          <Text mt="2" fontWeight="light" textAlign={"center"}>
-            {title}
-          </Text>
-        </Box>
-      </Link>
-    </Tap>
+    <Box
+      p={4}
+      borderRadius="10px"
+      borderWidth="1px"
+      mb="2"
+      _hover={{
+        shadow: "md",
+      }}
+    >
+      <Center>
+        <Image src={href} alt={title} boxSize="40px" />
+      </Center>
+      <Text mt="2" fontWeight="light" textAlign="center">
+        {title}
+      </Text>
+      <Center>
+        <HStack spacing="1" mt="1">
+          <Tap>
+            <IconButton
+              as="button"
+              variant="ghost"
+              aria-label="Download SVG"
+              icon={<IoCloudDownloadOutline size="16" />}
+              onClick={() => downloadSvg(href)}
+            />
+          </Tap>
+          <Tap>
+            <Link href={url} passHref>
+              <IconButton
+                as="a"
+                variant="ghost"
+                aria-label="Go to Vue SVG page"
+                icon={<FiExternalLink size="16" />}
+              />
+            </Link>
+          </Tap>
+        </HStack>
+      </Center>
+    </Box>
   );
 };
 

components/error/index.js

@@ -20,10 +20,9 @@ const Error = () => {
             <Link href="/" passHref>
               <Button
                 leftIcon={<IoHome />}
-                colorScheme="twitter"
+                borderWidth="1px"
                 variant="outline"
-                fontWeight="bold"
-                border="0"
+                fontWeight="light"
                 mb="4"
               >
                 Go home

components/header/dark.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { useColorMode, useColorModeValue, IconButton } from "@chakra-ui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import { IoMoon, IoSunnyOutline } from "react-icons/io5";
-
-const Index = () => {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const iconChange = useColorModeValue(<IoSunnyOutline size="25" />, <IoMoon size="25" />);
-  const keyChange = useColorModeValue("light", "dark");
-
-  function toggleTheme() {
-    toggleColorMode();
-  }
-
-  return (
-    <AnimatePresence exitBeforeEnter initial={false}>
-      <motion.div
-        key={keyChange}
-        initial={{ y: -20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        exit={{ y: 20, opacity: 0 }}
-        transition={{ duration: 0.2 }}
-      >
-        <IconButton
-          aria-label="Toggle theme"
-          bg="transparent"
-          border="0"
-          variant="outline"
-          icon={iconChange}
-          onClick={toggleTheme}
-        ></IconButton>
-      </motion.div>
-    </AnimatePresence>
-  );
-};
-
-export default Index;

components/header/index.js

@@ -1,151 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Flex,
-  HStack,
-  Button,
-  useDisclosure,
-  VStack,
-  IconButton,
-  useColorModeValue,
-  Icon,
-} from "@chakra-ui/react";
-import Dark from "components/header/dark";
-import {
-  IoApps,
-  IoBookOutline,
-  IoCloseSharp,
-  IoLogoGithub,
-} from "react-icons/io5";
-import { BiLinkExternal } from "react-icons/bi";
-import Link from "next/link";
-import HEADER_LINKS from "./links";
-import ModalSearch from "components/search/modal";
-import Logo from "./logo";
-
-const Header = () => {
-  const mobileNav = useDisclosure();
-  const bg = useColorModeValue("light.100", "lightDark.900");
-  return (
-    <>
-      <Box
-        w="full"
-        bg={bg}
-        px={{ base: 6, md: 16 }}
-        pl={{ base: 6, md: 16 }}
-        py="5"
-        pos="sticky"
-        top="0"
-        zIndex="1000"
-      >
-        <Flex alignItems="center" justifyContent="space-between" mx="auto">
-          <HStack spacing="1" alignItems="center">
-            <Logo />
-            {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={4} display={{ base: "none", md: "inline-flex" }}>
-              <ModalSearch />
-              <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/svgl/tree/main/public/library"
-                  passHref
-                >
-                  <Button
-                    as="a"
-                    bg="transparent"
-                    border="0"
-                    variant="outline"
-                    leftIcon={<IoBookOutline size="25" />}
-                    fontWeight="light"
-                  >
-                    Library
-                  </Button>
-                </Link>
-                <Link href="https://github.com/pheralb/svgl" passHref>
-                  <Button
-                    as="a"
-                    bg="transparent"
-                    border="0"
-                    variant="outline"
-                    leftIcon={<IoLogoGithub size="25" />}
-                    fontWeight="light"
-                  >
-                    Github
-                  </Button>
-                </Link>
-                <Dark />
-              </VStack>
-            </Box>
-          </HStack>
-        </Flex>
-      </Box>
-    </>
-  );
-};
-
-export default Header;

components/header/links.js

@@ -1,16 +0,0 @@
-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;

components/header/logo.js

@@ -1,37 +0,0 @@
-import React, { useEffect } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { IconButton } from "@chakra-ui/react";
-import Hover from "animations/tap";
-import { svgl } from "components/svg";
-import confetti from "canvas-confetti";
-
-const Logo = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    logoHeader.addEventListener("contextmenu", (event) => {
-      event.preventDefault();
-      router.push("/design");
-    });
-  }, []);
-
-  return (
-    <Hover>
-      <Link href="/" passHref>
-        <IconButton
-          as={svgl}
-          id="logoHeader"
-          cursor="pointer"
-          name="logo"
-          boxSize="40px"
-          mr="2"
-          borderRadius="full"
-          bg="transparent"
-        />
-      </Link>
-    </Hover>
-  );
-};
-
-export default Logo;

components/search/index.js

@@ -13,33 +13,31 @@ import {
   Icon,
 } from "@chakra-ui/react";
 import { IoSearch } from "react-icons/io5";
-import { BiLinkExternal } from "react-icons/bi";
+import { FiExternalLink } from "react-icons/fi";
 import { Algolia } from "components/svg";
-import Tap from "animations/tap";
 
 const AutocompleteItem = ({ id, title, href, url }) => {
   return (
     <>
-      <Tap>
-        <Link href={`/svg/${id}`} passHref>
-          <Box
-            id={id}
-            w="100%"
-            borderWidth="1px"
-            borderRadius="6px"
-            mt="3"
-            cursor="pointer"
-          >
-            <HStack py={6} px={6} spacing={2}>
-              <Image src={href} alt={title} boxSize="20px" mr="2" />
-              <Text fontSize="18px" fontWeight="light">
-                {title}
-              </Text>
-              <Icon as={BiLinkExternal} />
-            </HStack>
-          </Box>
-        </Link>
-      </Tap>
+      <Link href={`/svg/${id}`} passHref>
+        <Box
+          id={id}
+          w="100%"
+          borderWidth="1px"
+          borderRadius="6px"
+          mt="3"
+          cursor="pointer"
+          _hover={{ shadow: "sm" }}
+        >
+          <HStack py={6} px={6} spacing={2}>
+            <Image src={href} alt={title} boxSize="20px" mr="2" />
+            <Text fontSize="18px" fontWeight="light">
+              {title}
+            </Text>
+            <Icon as={FiExternalLink} />
+          </HStack>
+        </Box>
+      </Link>
     </>
   );
 };
@@ -96,6 +94,7 @@ export default function Search(props) {
             placeholder="Search icons..."
             _focus={{ shadow: "md" }}
             ref={inputRef}
+            autoFocus
             {...inputProps}
           />
         </InputGroup>

components/search/modal.js

@@ -13,21 +13,18 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import Search from "components/search";
-import { IoSearch } from "react-icons/io5";
+import { IoSearchOutline } from "react-icons/io5";
+import Item from "components/sidebar/item";
 
 const ModalSearch = (props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const bg = useColorModeValue("light.100", "dark.800");
   return (
     <>
-      <IconButton
-        aria-label="Search Icon"
-        bg="transparent"
-        icon={<IoSearch size="25"/>}
-        onClick={onOpen}
-        {...props}
-      />
-      <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom'>
+      <Item icon={IoSearchOutline} onClick={onOpen}>
+        Search
+      </Item>
+      <Modal isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
         <ModalOverlay />
         <ModalContent bg={bg}>
           <ModalHeader fontWeight="light">Search</ModalHeader>

components/sidebar/by.js

@@ -1,11 +1,12 @@
 import React from "react";
-import { Center, Text, VStack } from "@chakra-ui/react";
+import { Center, useColorModeValue, VStack } from "@chakra-ui/react";
 import Link from "next/link";
 
 const Index = () => {
+  const color = useColorModeValue("gray.400", "gray.600");
   return (
     <>
-      <Center h="100px" mt="8" mb="8" color="gray.500">
+      <Center color={color}>
         <VStack>
           <Link href="https://github.com/pheralb" passHref>
             Built by Pablo Hdez

components/sidebar/dark.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { useColorMode, useColorModeValue } from "@chakra-ui/react";
+import { IoMoonOutline, IoSunnyOutline } from "react-icons/io5";
+import Item from "./item";
+
+const Index = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const iconChange = useColorModeValue(IoSunnyOutline, IoMoonOutline);
+  const theme = useColorModeValue("Light", "Dark");
+
+  function toggleTheme() {
+    toggleColorMode();
+  }
+
+  return (
+    <Item icon={iconChange} onClick={toggleTheme}>
+      {theme}
+    </Item>
+  );
+};
+
+export default Index;

components/sidebar/index.js

@@ -0,0 +1,108 @@
+import React from "react";
+import {
+  Box,
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  Flex,
+  IconButton,
+  useColorModeValue,
+  useDisclosure,
+} from "@chakra-ui/react";
+import NextLink from "next/link";
+import { IoApps } from "react-icons/io5";
+
+import Logo from "components/sidebar/logo";
+import Item from "components/sidebar/item";
+import SidebarLinks from "components/sidebar/links";
+import Dark from "components/sidebar/dark";
+import By from "components/sidebar/by";
+import ModalSearch from "components/search/modal";
+
+export default function Index({ children }) {
+  const sidebar = useDisclosure();
+  const border = useColorModeValue("dark.200", "dark.800");
+  const bg = useColorModeValue("gray.100", "lightDark.900");
+
+  const SidebarContent = (props) => (
+    <Box
+      as="nav"
+      pos="fixed"
+      top="0"
+      left="0"
+      zIndex="sticky"
+      h="full"
+      pb="10"
+      overflowX="hidden"
+      overflowY="auto"
+      borderColor={border}
+      borderRightWidth="1px"
+      shadow="sm"
+      w="56"
+      {...props}
+    >
+      <Box px="5" pt="8" pb="5" align="center">
+        <Logo />
+      </Box>
+      <Flex direction="column" as="nav" aria-label="Main Navigation">
+        {SidebarLinks.map((link) => (
+          <NextLink key={link.id} href={link.href} passHref>
+            <Item icon={link.icon} external={link.external}>
+              {link.title}
+            </Item>
+          </NextLink>
+        ))}
+        <ModalSearch />
+        <Dark />
+      </Flex>
+      <Box mt="8" align="center">
+        <By />
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box as="section" minH="100vh">
+      <SidebarContent display={{ base: "none", md: "unset" }} />
+      <Drawer
+        isOpen={sidebar.isOpen}
+        onClose={sidebar.onClose}
+        placement="left"
+      >
+        <DrawerOverlay />
+        <DrawerContent bg={bg}>
+          <DrawerCloseButton borderWidth="1px" />
+          <DrawerBody>
+            <SidebarContent pt="6" borderRight="none" />
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+      <Box ml={{ base: 0, md: 56 }} transition=".3s ease">
+        <Box
+          as="header"
+          align="center"
+          justify="space-between"
+          w="full"
+          p="5"
+          display={{ base: "inline-flex", md: "none" }}
+        >
+          <IconButton
+            aria-label="Menu"
+            onClick={sidebar.onOpen}
+            icon={<IoApps />}
+            size="md"
+            w="100%"
+            variant="ghost"
+            borderWidth="1px"
+          />
+        </Box>
+        <Box as="main" pt={{ base: "0", md: "6" }} pb={{ base: "0", md: "6" }}>
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

components/sidebar/item.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { useRouter } from 'next/router';
+import { Flex, Icon, useColorModeValue } from "@chakra-ui/react";
+import { FiExternalLink } from "react-icons/fi";
+import Tap from "animations/tap";
+
+const Item = (props) => {
+
+  const { icon, external, children, href, ...rest } = props;
+  const { pathname } = useRouter();
+  const isActive = pathname === href;
+  const borderColor = useColorModeValue("dark.800", "white");
+
+  return (
+    <Tap>
+      <Flex
+        align="center"
+        px="5"
+        pl="4"
+        py="4"
+        cursor="pointer"
+        transition=".15s ease"
+        borderColor={borderColor}
+        borderLeftWidth={isActive ? "2px" : ''}
+        {...rest}
+      >
+        {icon && <Icon ml="2" mr="4" boxSize="6" as={icon} />}
+        {children}
+        {external && <Icon ml="3" mr="4" boxSize="4" as={FiExternalLink} />}
+      </Flex>
+    </Tap>
+  );
+};
+
+export default Item;

components/sidebar/links.js

@@ -0,0 +1,28 @@
+import { IoHomeOutline, IoLogoGithub } from 'react-icons/io5';
+import { FiTwitter } from 'react-icons/fi';
+
+const SidebarLinks = [
+  {
+    id: 1,
+    href: "/",
+    external: false,
+    title: "Browse",
+    icon: IoHomeOutline,
+  },
+  {
+    id: 2,
+    href: "https://github.com/pheralb/svgl/",
+    external: true,
+    title: "Github",
+    icon: IoLogoGithub,
+  },
+  {
+    id: 3,
+    href: "https://twitter.com/pheralb_",
+    external: true,
+    title: "Twitter",
+    icon: FiTwitter,
+  }
+];
+
+export default SidebarLinks;

components/sidebar/logo.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Link from "next/link";
+import { HStack, Icon, Text } from "@chakra-ui/react";
+import { svgl } from "components/svg";
+import Tap from "animations/tap";
+
+const Logo = () => {
+  return (
+    <Tap>
+      <Link href="/" passHref>
+        <HStack cursor="pointer">
+          <Icon
+            as={svgl}
+            name="logo"
+            boxSize="30px"
+            mr="2"
+            ml="1"
+            borderRadius="full"
+            bg="transparent"
+          />
+          <Text fontSize="2xl" ml="2">
+            svgl
+          </Text>
+        </HStack>
+      </Link>
+    </Tap>
+  );
+};
+
+export default Logo;