feat(): Adding the article screen

Author: ar1603

src/hooks/useSpringMousePosition.tsx

@@ -17,8 +17,8 @@ const useSpringMousePosition = (ref: RefObject<HTMLDivElement | null>) => {
       const element = ref.current!;
 
       frame.read(() => {
-        xPoint.jump(clientX - element.offsetLeft - 56 / 2);
-        yPoint.jump(clientY - element.offsetTop - 56 / 2);
+        xPoint.jump(clientX - element.offsetLeft - 32 / 2);
+        yPoint.jump(clientY - element.offsetTop - 32 / 2);
       });
     };
 

src/router/PublicRoutes.tsx

@@ -4,14 +4,17 @@ import {
   createBrowserRouter,
   createRoutesFromChildren,
 } from 'react-router-dom';
-import { LazyMainScreen } from './lazyScreen';
+import {
+  LazyArticlesScreen,
+  LazyHostScreen,
+  LazyMainScreen,
+} from './lazyScreen';
 
 const publicRouter = createBrowserRouter(
   createRoutesFromChildren(
-    <Route path="/" element={<LazyMainScreen />}>
-      {/* Main screen routes. */}
-
-      {/* Main flow screen routes. */}
+    <Route path="/" element={<LazyHostScreen />}>
+      <Route path="" element={<LazyMainScreen />} />
+      <Route path="articles" element={<LazyArticlesScreen />} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Route>,
   ),

src/router/lazyScreen/LazyMainFlowScreen.tsx

@@ -1,6 +1,16 @@
 import { lazy } from 'react';
 import { LazyComponentProvider } from '@providers';
 
+const HostScreen = lazy(() => import('@screens/host/Host'));
+
+export const LazyHostScreen = () => {
+  return (
+    <LazyComponentProvider>
+      <HostScreen />
+    </LazyComponentProvider>
+  );
+};
+
 const MainScreen = lazy(() => import('@screens/mainFlow/MainScreen'));
 
 export const LazyMainScreen = () => {
@@ -10,3 +20,13 @@ export const LazyMainScreen = () => {
     </LazyComponentProvider>
   );
 };
+
+const ArticlesScreen = lazy(() => import('@screens/articles/Articles'));
+
+export const LazyArticlesScreen = () => {
+  return (
+    <LazyComponentProvider>
+      <ArticlesScreen />
+    </LazyComponentProvider>
+  );
+};

src/screens/articles/Articles.tsx

@@ -0,0 +1,9 @@
+const Articles = () => {
+  return (
+    <div>
+      <h1>Articles</h1>
+    </div>
+  );
+};
+
+export default Articles;

…ns/mainFlow/components/NavigationBar.tsx src/screens/common/NavigationBar.tsxsrc/screens/mainFlow/components/NavigationBar.tsx renamed to src/screens/common/NavigationBar.tsx src/screens/mainFlow/components/NavigationBar.tsx renamed to src/screens/common/NavigationBar.tsx

@@ -4,6 +4,7 @@ import AmitRaikwarLogo from '@assets/images/AmitRaikwarLogo.png';
 import { SearchIcon } from '@assets';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 const NavigationLink = [
   {
@@ -18,6 +19,10 @@ const NavigationLink = [
     name: 'navigation.about',
     href: 'about',
   },
+  {
+    name: 'navigation.contact',
+    href: 'contact',
+  },
 ];
 
 const ArticleLink = {
@@ -26,6 +31,7 @@ const ArticleLink = {
 };
 
 const NavigationBar = () => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const { setCursorInsets } = useCursor();
@@ -56,52 +62,29 @@ const NavigationBar = () => {
   };
 
   return (
-    <>
+    <HStack
+      position={'fixed'}
+      marginY={{ md: 2, xl: 4 }}
+      width={'100%'}
+      paddingRight={14}
+      paddingLeft={{ base: 14, '2xl': 32 }}
+      zIndex={1000}
+      justifyContent={'space-between'}
+    >
+      <Img
+        src={AmitRaikwarLogo}
+        alt={'logo'}
+        w={8}
+        h={6}
+        onClick={() => navigate('/')}
+        _hover={{
+          transform: 'scale(1.3)',
+          transition: 'transform 0.5s',
+          cursor: 'pointer',
+        }}
+      />
       <HStack
-        position={'fixed'}
-        marginY={{ md: 4, xl: 6 }}
-        w={'100%'}
-        paddingRight={14}
-        paddingLeft={{ base: 14, '2xl': 32 }}
         zIndex={1000}
-        justifyContent={'space-between'}
-      >
-        <Img
-          src={AmitRaikwarLogo}
-          alt={'logo'}
-          w={8}
-          h={6}
-          _hover={{
-            transform: 'scale(1.3)',
-            transition: 'transform 0.5s',
-            cursor: 'pointer',
-          }}
-        />
-        <HStack>
-          <HStack
-            border={'1px solid gray'}
-            padding="2.5"
-            color={'white'}
-            borderRadius="100px"
-            bg={'rgba(255, 255, 255, 0.1)'}
-            backdropFilter={'blur(20px)'}
-            transition={'all 0.3s'}
-            _hover={{
-              transform: 'scale(1.1)',
-              cursor: 'pointer',
-            }}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-            ref={ref}
-            onClick={() => {}} // eslint-disable-line
-          >
-            <SearchIcon />
-          </HStack>
-        </HStack>
-      </HStack>
-      <HStack
-        zIndex={1000}
-        position={'fixed'}
         columnGap={3}
         top={6}
         border={'1px solid gray'}
@@ -121,13 +104,6 @@ const NavigationBar = () => {
             onClick={() => scrollToComponent(href)}
           />
         ))}
-        <LinkButton
-          key={ArticleLink.name}
-          text={t(ArticleLink.name)}
-          href={ArticleLink.href}
-          fontSize={'lg'}
-          animationOnHover
-        />
         <Box
           padding="0.2"
           borderRadius="100px"
@@ -136,14 +112,34 @@ const NavigationBar = () => {
           transition={'background-color 0.3s'}
         >
           <LinkButton
-            key={'Contact'}
-            text={t('navigation.contact')}
-            href={'#contact'}
+            key={ArticleLink.name}
+            text={t(ArticleLink.name)}
+            href={ArticleLink.href}
             fontSize={'lg'}
+            animationOnHover
           />
         </Box>
       </HStack>
-    </>
+      <HStack
+        border={'1px solid gray'}
+        padding="2.5"
+        color={'white'}
+        borderRadius="100px"
+        bg={'rgba(255, 255, 255, 0.1)'}
+        backdropFilter={'blur(20px)'}
+        transition={'all 0.3s'}
+        _hover={{
+          transform: 'scale(1.1)',
+          cursor: 'pointer',
+        }}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+        onClick={() => {}} // eslint-disable-line
+      >
+        <SearchIcon />
+      </HStack>
+    </HStack>
   );
 };
 

src/screens/common/index.ts

@@ -0,0 +1 @@
+export { default as NavigationBar } from './NavigationBar';

src/screens/host/Host.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@chakra-ui/react';
+import { NavigationBar } from '@screens/common';
+import { Outlet } from 'react-router-dom';
+
+const Host = () => {
+  return (
+    <Box width={'100vw'} height={'100%'}>
+      <NavigationBar />
+      <Outlet />
+    </Box>
+  );
+};
+
+export default Host;

src/screens/mainFlow/MainScreen.tsx

@@ -1,5 +1,5 @@
 import { TitleBoxContainer } from '@components';
-import { Footer, NavigationBar } from './components';
+import { Footer } from './components';
 import { Contents } from './contents';
 import { CoverContent } from './CoverContent';
 
@@ -13,7 +13,6 @@ const MainScreen = () => {
       flexDir={'column'}
       alignItems={'center'}
     >
-      <NavigationBar />
       <CoverContent />
       <Contents />
       <Footer />

src/screens/mainFlow/components/index.ts

@@ -1,3 +1,2 @@
-export { default as NavigationBar } from './NavigationBar';
 export { default as SocialNavigation } from './SocialNavigation';
 export { default as Footer } from './Footer';