feat(): Adding navigation bar

Author: ar1603

craco.config.js

@@ -6,6 +6,7 @@ module.exports = {
       '@assets': path.resolve(__dirname, './src/assets'),
       '@assets/*': path.resolve(__dirname, './src/assets/*'),
       '@data': path.resolve(__dirname, './src/data'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
       '@localization': path.resolve(__dirname, './src/localization'),
       '@components': path.resolve(__dirname, './src/components'),
       '@providers': path.resolve(__dirname, './src/providers'),

src/App.tsx

@@ -5,15 +5,18 @@ import {
   ThemeProvider,
 } from '@providers';
 import { HelmetProvider } from 'react-helmet-async';
+import { CursorProvider } from '@components';
 
 function App() {
   return (
     <ThemeProvider>
       <React.StrictMode>
         <HelmetProvider>
-          <LocalizationProvider>
-            <AppRouterProvider />
-          </LocalizationProvider>
+          <CursorProvider>
+            <LocalizationProvider>
+              <AppRouterProvider />
+            </LocalizationProvider>
+          </CursorProvider>
         </HelmetProvider>
       </React.StrictMode>
     </ThemeProvider>

src/assets/icons/Common/ArrowIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+const ArrowIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"
+    />
+    <path
+      fillRule="evenodd"
+      d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"
+    />
+  </svg>
+);
+export default ArrowIcon;

src/assets/icons/Common/index.ts

@@ -1,3 +1,4 @@
 export { SearchIcon } from './Search';
 export { ThreeDIcon } from './3D';
 export { TwoDIcon } from './2D';
+export { default as ArrowIcon } from './ArrowIcon';

src/components/Button/LinkButton/LinkButton.tsx

@@ -0,0 +1,88 @@
+import { Button, Text } from '@chakra-ui/react';
+import { LinkButtonProps } from './types';
+import { ArrowIcon } from '@assets';
+import { useCursor } from '../../Cursor';
+import { useRef, useState } from 'react';
+import { useMousePositions } from '@hooks';
+
+const LinkButton = ({
+  text,
+  href,
+  animationOnHover,
+  withUnderline,
+  withArrow,
+  fontSize,
+}: LinkButtonProps) => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const { toggle, setCursorInsets } = useCursor();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const onMouseEnter = () => {
+    const { width, height, top, left } =
+      ref.current?.getBoundingClientRect() || {
+        width: 56,
+        height: 56,
+        top: 0,
+        left: 0,
+      };
+    setCursorInsets(undefined);
+    setTimeout(() => {
+      setCursorInsets({ height, width, top, left });
+    }, 0);
+    toggle();
+    setIsHovered(true);
+  };
+
+  const onMouseLeave = () => {
+    setCursorInsets(undefined);
+    setIsHovered(false);
+    toggle();
+  };
+
+  const translationProps = isHovered
+    ? {
+        transform: 'translateY(15px)',
+        transition: 'transform 0.2s',
+      }
+    : {
+        transform: 'translateY(-11px)',
+        transition: 'transform 0.2s',
+      };
+
+  return (
+    <Button
+      ref={ref}
+      flexDir={'column'}
+      as="a"
+      href={href}
+      bg={'transparent'}
+      color={'white'}
+      colorScheme="violet"
+      fontSize={fontSize}
+      borderRadius={0}
+      overflow={'clip'}
+      px={2}
+      maxHeight={'7'}
+      _hover={{ color: 'violet' }}
+      borderBottom={withUnderline ? '1px solid white' : 'none'}
+      rightIcon={withArrow ? <ArrowIcon /> : undefined}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      justifyItems={'end'}
+    >
+      <Text
+        pointerEvents={'none'}
+        {...(animationOnHover ? translationProps : {})}
+      >
+        {text}
+      </Text>
+      {animationOnHover && (
+        <Text pointerEvents={'none'} {...translationProps}>
+          {text}
+        </Text>
+      )}
+    </Button>
+  );
+};
+
+export default LinkButton;

src/components/Button/LinkButton/index.ts

@@ -0,0 +1,2 @@
+export { default as LinkButton } from './LinkButton';
+export * from './types';

src/components/Button/LinkButton/types.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export type LinkButtonProps = {
+  href: string;
+  text: string;
+  withUnderline?: boolean;
+  withArrow?: boolean;
+  animationOnHover?: boolean;
+  fontSize?: BoxProps['fontSize'];
+};

src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './LinkButton';

src/components/Cursor/Cursor.tsx

@@ -1,24 +1,40 @@
 import { motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useSpringMousePosition } from '../../hooks';
+import { useCursor } from './CursorProvider';
 
 const FollowCursor = () => {
+  const { insets } = useCursor();
   const ref = useRef<HTMLDivElement>(null);
   const { x, y } = useSpringMousePosition(ref);
 
+  const { width, height, top, left } = insets ?? {
+    width: 56,
+    height: 56,
+    top: 0,
+    left: 0,
+  };
+  const props = {
+    boxShadow: '0 0 50px 10px violet',
+    width: width,
+    height: height,
+    transition: !insets ? 'all 0.0s ease' : 'all 0.5s ease',
+    borderRadius: insets ? '5px' : '50%',
+  };
+
   return (
     <motion.div
+      className="cursor"
       ref={ref}
       style={{
-        x,
-        y,
+        x: top === 0 ? x : left,
+        y: top === 0 ? y : top,
         backgroundColor: '#fff',
         mixBlendMode: 'difference',
-        boxShadow: '0 0 50px 10px violet',
         zIndex: 999,
-        width: '56px',
-        height: '56px',
-        borderRadius: '50%',
+        position: 'fixed',
+        pointerEvents: 'none',
+        ...props,
       }}
     />
   );

src/components/Cursor/CursorProvider.tsx

@@ -0,0 +1,90 @@
+import { createContext, useContext, useState } from 'react';
+import FollowCursor from './Cursor';
+
+export const CursorContext = createContext<{
+  cursorState: boolean;
+  insets:
+    | {
+        height: number;
+        width: number;
+        top: number;
+        left: number;
+      }
+    | undefined;
+  toggle: () => void;
+  setCursorInsets: (
+    args:
+      | {
+          height: number;
+          width: number;
+          top: number;
+          left: number;
+        }
+      | undefined,
+  ) => void;
+}>({
+  cursorState: true,
+  insets: undefined,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  toggle: () => {},
+  setCursorInsets: (
+    args:
+      | {
+          height: number;
+          width: number;
+          top: number;
+          left: number;
+        }
+      | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+  ) => {},
+});
+
+const CursorProvider = ({ children }: { children: React.ReactNode }) => {
+  const [cursorState, setCursorState] = useState(true);
+  const [insets, setCursorSize] = useState<
+    | {
+        height: number;
+        width: number;
+        top: number;
+        left: number;
+      }
+    | undefined
+  >(undefined);
+
+  const toggle = () => {
+    setCursorState((prev) => !prev);
+  };
+
+  const setCursorInsets = (
+    args:
+      | {
+          height: number;
+          width: number;
+          top: number;
+          left: number;
+        }
+      | undefined,
+  ) => {
+    setCursorSize(args);
+  };
+
+  return (
+    <CursorContext.Provider
+      value={{ cursorState, insets, toggle, setCursorInsets }}
+    >
+      <FollowCursor />
+      {children}
+    </CursorContext.Provider>
+  );
+};
+
+export const useCursor = () => {
+  const context = useContext(CursorContext);
+  if (context === undefined) {
+    throw new Error('useCursor must be used within a CursorProvider');
+  }
+  return context;
+};
+
+export default CursorProvider;