Design improvements and bug fixes

components/header/index.js

@@ -24,6 +24,8 @@ import Hover from "animations/tap";
 import Show from "animations/show";
 import { svgl } from "components/svg";
 import HEADER_LINKS from "./links";
+import Search from "components/search";
+import ModalSearch from "components/search/modal";
 
 const Header = () => {
   const mobileNav = useDisclosure();
@@ -78,7 +80,8 @@ const Header = () => {
             ))}
           </HStack>
           <HStack display="flex" alignItems="center">
-            <HStack spacing={3} display={{ base: "none", md: "inline-flex" }}>
+            <HStack spacing={4} display={{ base: "none", md: "inline-flex" }}>
+              <ModalSearch />
               <Link href="https://github.com/pheralb/svgl" passHref>
                 <IconButton
                   aria-label="Github Repository"
@@ -129,6 +132,7 @@ const Header = () => {
                   passHref
                 >
                   <Button
+                    as="a"
                     bg="transparent"
                     border="0"
                     variant="outline"
@@ -140,6 +144,7 @@ const Header = () => {
                 </Link>
                 <Link href="https://github.com/pheralb/svgl" passHref>
                   <Button
+                    as="a"
                     bg="transparent"
                     border="0"
                     variant="outline"

components/search/modal.js

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  IconButton,
+  Button,
+} from "@chakra-ui/react";
+import Search from "components/search";
+import { IoSearch } from "react-icons/io5";
+
+const ModalSearch = (props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <IconButton
+        aria-label="Search Icon"
+        bg="transparent"
+        icon={<IoSearch size="25"/>}
+        onClick={onOpen}
+        {...props}
+      />
+      <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom'>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontWeight="light">Search</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb="5">
+            <Search />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalSearch;

components/svg/index.js

@@ -1258,29 +1258,15 @@ export const svgl = (props) => {
   );
 };
 
-export const rocket = (props) => {
+export const framer = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 384"
       {...props}
     >
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="32"
-        d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z"
-      ></path>
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="32"
-        d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32"
-      ></path>
+      <path d="M0 0h256v128H128L0 0zm0 128h128l128 128H128v128L0 256V128z"></path>
     </svg>
   );
 };