refactor: divide components in navigation section

landing/fragments/landing-navigation/src/drawer/drawer-mobile.component.tsx

@@ -1,24 +1,24 @@
-import React                 from 'react'
-import { FC }                from 'react'
-import { FormattedMessage }  from 'react-intl'
-
-import { Background }        from '@ui/background'
-import { Button }            from '@ui/button'
-import { Condition }         from '@ui/condition'
-import { Divider }           from '@ui/divider'
-import { DrawerContainer }   from '@ui/drawer'
-import { ArrowUpIcon }       from '@ui/icons'
-import { Box }               from '@ui/layout'
-import { Column }            from '@ui/layout'
-import { Layout }            from '@ui/layout'
-import { Row }               from '@ui/layout'
-import { Logo }              from '@ui/logo'
-import { Text }              from '@ui/text'
-
-import { CardDataMobile }    from '../data'
-import { MobileDrawerProps } from './drawer.interfaces'
-
-export const DrawerMobile: FC<MobileDrawerProps> = ({ active, onClose }: MobileDrawerProps) => (
+import React                from 'react'
+import { FC }               from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Background }       from '@ui/background'
+import { Button }           from '@ui/button'
+import { Condition }        from '@ui/condition'
+import { Divider }          from '@ui/divider'
+import { DrawerContainer }  from '@ui/drawer'
+import { ArrowUpIcon }      from '@ui/icons'
+import { Box }              from '@ui/layout'
+import { Column }           from '@ui/layout'
+import { Layout }           from '@ui/layout'
+import { Row }              from '@ui/layout'
+import { Logo }             from '@ui/logo'
+import { Text }             from '@ui/text'
+
+import { CardDataMobile }   from '../data'
+import { DrawerProps }      from './drawer.interfaces'
+
+export const DrawerMobile: FC<DrawerProps> = ({ active, onClose }: DrawerProps) => (
   <DrawerContainer active={active}>
     <Background backgroundColor='white' borderRadius={['normalBottom', 'bigBottom']} width='100%'>
       <Column>

landing/fragments/landing-navigation/src/drawer/drawer.component.tsx

@@ -1,5 +1,3 @@
-import { Scrollspy }        from '@makotot/ghostui'
-
 import React                from 'react'
 import { FC }               from 'react'
 import { FormattedMessage } from 'react-intl'
@@ -8,7 +6,6 @@ import { Background }       from '@ui/background'
 import { Button }           from '@ui/button'
 import { Card }             from '@ui/card'
 import { Condition }        from '@ui/condition'
-import { Divider }          from '@ui/divider'
 import { DrawerContainer }  from '@ui/drawer'
 import { ArrowUpIcon }      from '@ui/icons'
 import { Box }              from '@ui/layout'
@@ -19,17 +16,9 @@ import { Logo }             from '@ui/logo'
 import { Text }             from '@ui/text'
 
 import { CardDataDesktop }  from '../data'
-import { NavLinks }         from '../data'
-import { ItemDrawer }       from '../item'
-import { ItemNavLink }      from '../item'
-import { DrawerIndexProps } from './drawer.interfaces'
 import { DrawerProps }      from './drawer.interfaces'
 
-export const DrawerDesktopIndex: FC<DrawerIndexProps> = ({
-  active,
-  onClose,
-  sectionRefs,
-}: DrawerIndexProps) => {
+export const DrawerDesktop: FC<DrawerProps> = ({ active, onClose, children }: DrawerProps) => {
   const cardsList = Array.from({ length: 3 }, () => CardDataDesktop).map((el, index) => ({
     ...el,
     id: index,
@@ -80,26 +69,7 @@ export const DrawerDesktopIndex: FC<DrawerIndexProps> = ({
 
             <Layout flexBasis={40} flexGrow='1' />
 
-            <Scrollspy sectionRefs={sectionRefs} offset={-640}>
-              {({ currentElementIndexInViewport }) => (
-                <Box>
-                  {NavLinks.map((navLink, index) => (
-                    <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
-                      <ItemDrawer
-                        path={navLink.path}
-                        name={navLink.name}
-                        currentElementIndexInViewport={currentElementIndexInViewport}
-                        index={index}
-                      />
-
-                      <Condition match={index < NavLinks.length - 1}>
-                        <Layout flexBasis={20} />
-                      </Condition>
-                    </Box>
-                  ))}
-                </Box>
-              )}
-            </Scrollspy>
+            {children}
 
             <Layout flexBasis={40} flexGrow='1' />
 
@@ -138,95 +108,3 @@ export const DrawerDesktopIndex: FC<DrawerIndexProps> = ({
     </DrawerContainer>
   )
 }
-
-export const DrawerDesktop: FC<DrawerProps> = ({ active, onClose }: DrawerProps) => {
-  const cardsList = () =>
-    Array.from({ length: 3 }, () => CardDataDesktop).map((el, index) => ({ ...el, id: index }))
-
-  return (
-    <DrawerContainer active={active}>
-      <Background backgroundColor='white' borderRadius={['normalBottom', 'bigBottom']} width='100%'>
-        <Column>
-          <Layout flexBasis={32} />
-
-          <Row alignItems='center' height={56}>
-            <Layout flexBasis={40} />
-
-            <Logo fill='rgba(58, 55, 93, 1)' width={56} height={56} />
-
-            <Layout flexBasis={40} flexGrow='1' />
-
-            <Box>
-              {NavLinks.map((navLink, index) => (
-                <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
-                  <ItemNavLink path={navLink.path} name={navLink.name} active={active} />
-
-                  <Condition match={index < NavLinks.length - 1}>
-                    <Layout flexBasis={20} />
-                  </Condition>
-                </Box>
-              ))}
-            </Box>
-
-            <Layout flexBasis={40} flexGrow='1' />
-
-            <Box width={136}>
-              <Button
-                onClick={onClose}
-                variant='primaryBackgroundWhiteText'
-                size='bigSizeNormalRadiiBigPadding'
-                icon={<ArrowUpIcon width={12} height={6} />}
-                widthIcon={40}
-                heightIcon={40}
-                backgroundIcon='background.white'
-                radiiIcon='little'
-              >
-                <Text color='white' fontSize='compact' lineHeight='small'>
-                  <FormattedMessage id='navigation.button' />
-                </Text>
-              </Button>
-            </Box>
-
-            <Layout flexBasis={40} />
-          </Row>
-
-          <Layout flexBasis={50} />
-          <Row>
-            <Layout flexBasis={40} flexShrink='0' />
-            {cardsList().map((card, index, array) => (
-              <Row key={card.id}>
-                <Condition match={index === array.length - 1}>
-                  <Layout flexBasis={20} flexShrink='0' />
-                </Condition>
-
-                <Condition match={index !== 0 && index !== array.length - 1}>
-                  <Layout flexBasis={10} flexShrink='0' />
-                </Condition>
-
-                <Card
-                  category={card.category}
-                  titleDesktop={card.title}
-                  description={card.description}
-                  indent={110}
-                  widthCategoryBox={104}
-                />
-
-                <Condition match={index !== 0 && index !== array.length - 1}>
-                  <Layout flexBasis={10} flexShrink='0' />
-                </Condition>
-
-                <Condition match={index === 0}>
-                  <Layout flexBasis={20} flexShrink='0' />
-                </Condition>
-              </Row>
-            ))}
-
-            <Layout flexBasis={40} flexShrink='0' />
-          </Row>
-
-          <Layout flexBasis={32} />
-        </Column>
-      </Background>
-    </DrawerContainer>
-  )
-}

landing/fragments/landing-navigation/src/drawer/drawer.interfaces.ts

@@ -1,10 +1,5 @@
-export interface DrawerIndexProps {
-  active: boolean
-  onClose: () => void
-  sectionRefs: React.RefObject<HTMLDivElement>[]
-}
-
 export interface DrawerProps {
   active: boolean
   onClose: () => void
+  children?: JSX.Element
 }

landing/fragments/landing-navigation/src/index.ts

@@ -1,2 +1,3 @@
 export * from './navigation.component'
 export * from './navigation-mobile.component'
+export * from './navigation-index.component'

landing/fragments/landing-navigation/src/item/index.ts

@@ -1,2 +1,3 @@
 export * from './item.component'
 export * from './item-drawer.component'
+export * from './item-navlinks.component'

landing/fragments/landing-navigation/src/item/item-drawer.component.tsx

@@ -17,7 +17,7 @@ export const ItemDrawer: FC<ItemDrawerProps> = ({
   path,
   currentElementIndexInViewport,
   index,
-}) => {
+}: ItemDrawerProps) => {
   const { hover, hoverProps } = useHover()
 
   return (

landing/fragments/landing-navigation/src/item/item-navlinks.component.tsx

@@ -0,0 +1,69 @@
+import React         from 'react'
+import { FC }        from 'react'
+
+import { Condition } from '@ui/condition'
+import { Divider }   from '@ui/divider'
+import { Box }       from '@ui/layout'
+import { Column }    from '@ui/layout'
+import { Layout }    from '@ui/layout'
+import { NextLink }  from '@ui/link'
+import { Text }      from '@ui/text'
+import { useHover }  from '@ui/utils'
+
+import { ItemProps } from './item.interfaces'
+
+export const ItemNavLink: FC<ItemProps> = ({ name, path, active }: ItemProps) => {
+  const { hover, hoverProps } = useHover()
+
+  return (
+    <Box width={200} {...hoverProps} cursor='pointer'>
+      <NextLink path={`/#${path}`} width='100%'>
+        <Condition match={active!}>
+          <Column alignItems='center'>
+            <Box>
+              <Text
+                color={hover ? 'text.black' : 'text.ghost'}
+                fontSize='compact'
+                lineHeight='small'
+                textTransform='uppercase'
+              >
+                {name}
+              </Text>
+            </Box>
+
+            <Layout flexBasis={10} />
+
+            <Divider
+              backgroundColor={hover ? 'background.black' : 'background.blackTransparent'}
+              weight={1}
+              width={200}
+            />
+          </Column>
+        </Condition>
+
+        <Condition match={!active}>
+          <Column alignItems='center'>
+            <Box>
+              <Text
+                color={hover ? 'text.white' : 'text.gray'}
+                fontSize='compact'
+                lineHeight='small'
+                textTransform='uppercase'
+              >
+                {name}
+              </Text>
+            </Box>
+
+            <Layout flexBasis={10} />
+
+            <Divider
+              backgroundColor={hover ? 'background.white' : 'background.gray'}
+              weight={1}
+              width={200}
+            />
+          </Column>
+        </Condition>
+      </NextLink>
+    </Box>
+  )
+}

landing/fragments/landing-navigation/src/item/item.component.tsx

@@ -2,18 +2,16 @@ import React         from 'react'
 import { FC }        from 'react'
 import { Link }      from 'react-scroll'
 
-import { Condition }       from '@ui/condition'
-import { Divider }         from '@ui/divider'
-import { Box }             from '@ui/layout'
-import { Column }          from '@ui/layout'
-import { Layout }          from '@ui/layout'
-import { NextLink }        from '@ui/link'
-import { Text }            from '@ui/text'
-import { useHover }        from '@ui/utils'
+import { Divider }   from '@ui/divider'
+import { Box }       from '@ui/layout'
+import { Column }    from '@ui/layout'
+import { Layout }    from '@ui/layout'
+import { Text }      from '@ui/text'
+import { useHover }  from '@ui/utils'
 
 import { ItemProps } from './item.interfaces'
 
-export const Item: FC<ItemProps> = ({ name, path }) => {
+export const Item: FC<ItemProps> = ({ name, path }: ItemProps) => {
   const { hover, hoverProps } = useHover()
 
   return (
@@ -43,59 +41,3 @@ export const Item: FC<ItemProps> = ({ name, path }) => {
     </Box>
   )
 }
-
-export const ItemNavLink: FC<ItemProps> = ({ name, path, active }) => {
-  const { hover, hoverProps } = useHover()
-
-  return (
-    <Box width={200} {...hoverProps} cursor='pointer'>
-      <NextLink path={`/#${path}`} width='100%'>
-        <Condition match={active!}>
-          <Column alignItems='center'>
-            <Box>
-              <Text
-                color={hover ? 'text.black' : 'text.ghost'}
-                fontSize='compact'
-                lineHeight='small'
-                textTransform='uppercase'
-              >
-                {name}
-              </Text>
-            </Box>
-
-            <Layout flexBasis={10} />
-
-            <Divider
-              backgroundColor={hover ? 'background.black' : 'background.blackTransparent'}
-              weight={1}
-              width={200}
-            />
-          </Column>
-        </Condition>
-
-        <Condition match={!active}>
-          <Column alignItems='center'>
-            <Box>
-              <Text
-                color={hover ? 'text.white' : 'text.gray'}
-                fontSize='compact'
-                lineHeight='small'
-                textTransform='uppercase'
-              >
-                {name}
-              </Text>
-            </Box>
-
-            <Layout flexBasis={10} />
-
-            <Divider
-              backgroundColor={hover ? 'background.white' : 'background.gray'}
-              weight={1}
-              width={200}
-            />
-          </Column>
-        </Condition>
-      </NextLink>
-    </Box>
-  )
-}