diff --git a/packages/core-design/src/components/Header/Header.tsx b/packages/core-design/src/components/Header/Header.tsx index f6e648d7..0fb5b5f1 100644 --- a/packages/core-design/src/components/Header/Header.tsx +++ b/packages/core-design/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useRef, useState } from 'react' +import React, { Fragment, useEffect, useState } from 'react' import useIe11Status from '../../utils/hooks/useIe11Status' import useMobileStatus from '../../utils/hooks/useMobileStatus' import { HeaderProps as Props } from './types' @@ -30,9 +30,7 @@ const Header: React.FC = ({ actionButton, logo, }) => { - const lastScrollTopValue = useRef(0) const [isDropdownOpened, toggleDropdown] = useState(false) - const [isHeaderVisible, toggleHeaderVisibility] = useState(true) const isIe11 = useIe11Status(isIe11ValueFromProps) const isMobile = useMobileStatus(isMobileValueFromProps) @@ -57,41 +55,6 @@ const Header: React.FC = ({ enablePageScroll(document.body) } } - - const handleScroll = (event: any) => { - const headerHeight = 64 - const { - target: { scrollingElement }, - } = event - - const isScrollingElementHtmlOrBodyNode = - scrollingElement === document.documentElement || scrollingElement === document.body - const scrollTopValue = isScrollingElementHtmlOrBodyNode && scrollingElement.scrollTop - const isScrollingDown = - scrollTopValue > lastScrollTopValue.current && scrollTopValue > headerHeight - - if (isScrollingDown) { - if (isMobile && isDropdownOpened) { - toggleHeaderVisibility(true) - } else if (isHeaderVisible) { - toggleHeaderVisibility(false) - } - } else { - if (!isHeaderVisible) { - toggleHeaderVisibility(true) - toggleDropdown(false) - } - } - - lastScrollTopValue.current = - scrollTopValue === lastScrollTopValue.current ? scrollTopValue - 1 : scrollTopValue - } - - if (!isIe11) { - document.addEventListener('scroll', handleScroll) - - return () => document.removeEventListener('scroll', handleScroll) - } }) const Icon = isDropdownOpened ? Cross : Burger @@ -134,13 +97,7 @@ const Header: React.FC = ({ ) return ( -
+
diff --git a/packages/core-design/src/components/Header/Menu/Nav/Nav.styles.ts b/packages/core-design/src/components/Header/Menu/Nav/Nav.styles.ts index 32394e89..e7bc2660 100644 --- a/packages/core-design/src/components/Header/Menu/Nav/Nav.styles.ts +++ b/packages/core-design/src/components/Header/Menu/Nav/Nav.styles.ts @@ -18,7 +18,6 @@ const base = (props: ThemeProps) => { overflow: hidden; will-change: height; transition: height 75ms ease-out; - background-color: ${colors.secondary.darken100}; } &.visible { @@ -64,7 +63,7 @@ const base = (props: ThemeProps) => { } .nav_howWeWork, - .nav_products, + .nav_solutions, .nav_industries { .nav-item { width: 50%; @@ -147,7 +146,7 @@ const base = (props: ThemeProps) => { .nav_services_children_number_3, .nav_howWeWork, - .nav_products { + .nav_solutions { .icon { top: ${calcRem(68)}; } @@ -202,7 +201,7 @@ const base = (props: ThemeProps) => { @media (pointer: fine) { .nav_howWeWork, - .nav_products, + .nav_solutions, .nav_industries { .link:hover { color: #5695ed; @@ -257,7 +256,7 @@ const base = (props: ThemeProps) => { } .nav_howWeWork, - .nav_products, + .nav_solutions, .nav_industries { .nav-item_active .link { color: #5695ed; @@ -282,8 +281,8 @@ const base = (props: ThemeProps) => { } } - .nav_products .link:hover, - .nav_products .nav-item_active .link { + .nav_solutions .link:hover, + .nav_solutions .nav-item_active .link { .icon_lms { fill: #5695ed; @@ -331,9 +330,11 @@ const base = (props: ThemeProps) => { .description { width: calc(100% - ${calcRem(25)}); } + .link { padding-left: ${calcRem(72)}; } + .nav-item { width: 33%; } @@ -344,12 +345,15 @@ const base = (props: ThemeProps) => { width: 21.875%; margin-left: ${calcRem(16)}; } + .icon { left: ${calcRem(23)}; } + .title { width: 100%; } + .description { width: calc(100% - ${calcRem(15)}); } @@ -360,13 +364,14 @@ const base = (props: ThemeProps) => { padding-top: ${calcRem(64)}; padding-left: ${calcRem(89)}; } + .icon { top: ${calcRem(81)}; } } .nav_howWeWork, - .nav_products { + .nav_solutions { .description { width: calc(100% - ${calcRem(92)}); } @@ -429,22 +434,23 @@ const base = (props: ThemeProps) => { padding-left: 0; } - .title { - margin-top: ${calcRem(8)}; - font-size: ${calcRem(16)}; - line-height: ${calcRem(24)}; - } - .nav_services { .link { padding-top: 0; padding-left: 0; } + .nav-item { margin-left: 0; } } + .title { + margin-top: ${calcRem(8)}; + font-size: ${calcRem(16)}; + line-height: ${calcRem(24)}; + } + .description { margin-top: ${calcRem(6)}; font-size: ${calcRem(12)}; @@ -459,7 +465,7 @@ const base = (props: ThemeProps) => { .nav_industries, .nav_howWeWork, - .nav_products, + .nav_solutions, .nav_services { .nav-item { width: 100%; @@ -473,7 +479,7 @@ const base = (props: ThemeProps) => { } .nav_howWeWork, - .nav_products { + .nav_solutions { ul { margin-top: ${calcRem(27)}; } @@ -492,13 +498,16 @@ const base = (props: ThemeProps) => { ul { margin-top: ${calcRem(19)}; } + .nav-item { width: 100%; height: auto; } + .title { margin-top: 0; } + .nav-item:not(:first-of-type) { margin-top: ${calcRem(35)}; } diff --git a/packages/core-design/src/data/headerLinks.tsx b/packages/core-design/src/data/headerLinks.tsx index f5402dd5..3d79f9d5 100644 --- a/packages/core-design/src/data/headerLinks.tsx +++ b/packages/core-design/src/data/headerLinks.tsx @@ -26,8 +26,8 @@ export const menu = [ testId: 'Header:nav:link.outsourcing', icon: Circle, component: Link, - title: 'Outsourcing Front-end', - description: 'Web development to complement core competencies.', + title: 'Web Development', + description: 'Fast, reliable and professional web development services.', href: 'https://csssr.com/en/service/outsourcing-front-end', }, { @@ -35,8 +35,9 @@ export const menu = [ testId: 'Header:nav:link.express', icon: Triangle, component: Link, - title: 'Express Web Development', - description: 'Fixed rates for straight-forward, time-sensitive services.', + title: 'PSD to HTML Conversion', + description: + 'Turn your design (PSD, Sketch, Figma) into HTML-pages.', href: 'https://csssr.com/en/service/express-front-end', }, { @@ -126,9 +127,9 @@ export const menu = [ ], }, { - id: 'products', + id: 'solutions', testId: 'Header:nav:button.products', - title: 'Products', + title: 'Solutions', links: [ { id: 'lms', diff --git a/packages/core-design/src/static/video/camp.mp4 b/packages/core-design/src/static/video/camp.mp4 new file mode 100644 index 00000000..f2bbe190 Binary files /dev/null and b/packages/core-design/src/static/video/camp.mp4 differ