New site, new svgs and bug fixes

components/sidebar/by.js

@@ -0,0 +1,20 @@
+import React from "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 color={color}>
+        <VStack>
+          <Link href="https://github.com/pheralb" passHref>
+            Built by Pablo Hdez
+          </Link>
+        </VStack>
+      </Center>
+    </>
+  );
+};
+
+export default Index;

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;