⚒️ Design improvements.

src/common/iconBtn.tsx

@@ -9,6 +9,8 @@ const CustomIconBtn = (props: CustomIconBtnProps) => {
       aria-label={props.title}
       icon={props.icon}
       onClick={props.onClick}
+      mr={props.mr}
+      ml={props.ml}
     />
   );
 };

src/common/link.tsx

@@ -3,13 +3,16 @@ import { Link } from "@chakra-ui/react";
 import NextLink from "next/link";
 import { CustomLinkProps } from "@/interfaces/components";
 
-const CustomLink = ({ href, children, external }: CustomLinkProps) => {
+const CustomLink = ({ href, children, external, font, mr, ml }: CustomLinkProps) => {
   return (
     <NextLink href={href} passHref>
       <Link
         isExternal={external}
         _hover={{ textDecoration: "none" }}
         _focus={{ border: "none" }}
+        fontFamily={font}
+        mr={mr}
+        ml={ml}
       >
         {children}
       </Link>

src/interfaces/components.ts

@@ -6,11 +6,16 @@ export interface CustomLinkProps {
   href: string;
   children: React.ReactNode;
   external?: boolean;
+  font?: string;
+  mr?: string;
+  ml?: string;
 }
 
 export interface CustomIconBtnProps {
   title: string;
   icon: React.ReactElement;
+  mr?: string;
+  ml?: string;
   onClick?: () => void;
 }
 

src/layout/header/index.tsx

@@ -10,6 +10,7 @@ import {
   Icon,
   useDisclosure,
   Collapse,
+  Text,
 } from "@chakra-ui/react";
 import { ArrowSquareOut, MagnifyingGlass, Sticker, X } from "phosphor-react";
 import Theme from "./theme";
@@ -52,26 +53,31 @@ const Header = () => {
                 </HStack>
               </Tap>
             </CustomLink>
-            <HStack display="flex" alignItems="center" spacing={1}>
-              <HStack
-                spacing={1}
-                mr={1}
-                display={{ base: "none", md: "inline-flex" }}
-              >
+            <HStack display="flex" alignItems="center" spacing={2}>
+              <Box display={{ base: "none", md: "inline-flex" }}>
                 {Links.map((link) => (
                   <CustomLink
                     key={link.title}
                     href={link.slug}
                     external={link.external}
+                    font="Inter-Semibold"
+                    mr="4"
+                    ml="3"
                   >
-                    <Button variant="ghost" fontFamily="Inter-Semibold">
+                    <Tap>
                       {link.title}
                       {link.external ? (
                         <Icon as={ArrowSquareOut} ml="2" />
                       ) : null}
-                    </Button>
+                    </Tap>
                   </CustomLink>
                 ))}
+              </Box>
+              <HStack
+                spacing={1}
+                mr={1}
+                display={{ base: "none", md: "inline-flex" }}
+              >
                 <CustomIconBtn
                   title="Toggle Search bar"
                   icon={

src/layout/header/mobile.tsx

@@ -9,20 +9,22 @@ import {
 } from "@chakra-ui/react";
 import { List } from "phosphor-react";
 import { Links } from "./links";
+import Theme from "./theme";
 
 const Mobile = () => {
   const bg = useColorModeValue("bg.light", "bg.dark");
   const mobileNav = useDisclosure();
   return (
     <>
+      <Theme />
       <IconButton
         display={{ base: "flex", md: "none" }}
         aria-label="Open menu navbar"
         variant="ghost"
         icon={<List size={22} />}
         onClick={mobileNav.onOpen}
+        ml="2"
       />
-
       <VStack
         pos="absolute"
         top={0}
@@ -33,7 +35,7 @@ const Mobile = () => {
         p={4}
         pb={4}
         bg={bg}
-        spacing={3}
+        spacing={5}
         rounded="sm"
         shadow="sm"
         borderWidth="1px"
@@ -46,7 +48,7 @@ const Mobile = () => {
             href={link.slug}
             external={link.external}
           >
-            <Button variant="ghost">{link.title}</Button>
+            {link.title}
           </CustomLink>
         ))}
       </VStack>