From c12f80afba3a6a899bd8edd5c498037235238027 Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 13 Feb 2025 10:46:07 +0100 Subject: [PATCH] Revert "Add legion banner to header" --- site/src/components/common/Header/Arrow.tsx | 30 ----- .../common/Header/Header.module.scss | 86 -------------- site/src/components/common/Header/Header.tsx | 108 ++++++------------ .../components/common/Header/assets/arrow.svg | 5 - .../common/Layout/Layout.module.scss | 6 +- .../pages/LandingPage/Intro/Intro.module.scss | 4 +- site/src/hooks/useScrollDirection.ts | 28 ----- 7 files changed, 43 insertions(+), 224 deletions(-) delete mode 100644 site/src/components/common/Header/Arrow.tsx delete mode 100644 site/src/components/common/Header/assets/arrow.svg delete mode 100644 site/src/hooks/useScrollDirection.ts diff --git a/site/src/components/common/Header/Arrow.tsx b/site/src/components/common/Header/Arrow.tsx deleted file mode 100644 index 282d2518..00000000 --- a/site/src/components/common/Header/Arrow.tsx +++ /dev/null @@ -1,30 +0,0 @@ -export const Arrow = ({ className }: { className?: string }) => { - return ( - - - - - - ) -} diff --git a/site/src/components/common/Header/Header.module.scss b/site/src/components/common/Header/Header.module.scss index 46f6708d..8ee20435 100644 --- a/site/src/components/common/Header/Header.module.scss +++ b/site/src/components/common/Header/Header.module.scss @@ -4,9 +4,6 @@ @use '~styles/paddings' as *; @use '~styles/typography' as *; -$mobileBannerHeight: 24px; -$desktopBannerHeight: 42; - .root { position: fixed; z-index: 100; @@ -15,95 +12,12 @@ $desktopBannerHeight: 42; height: size(30); color: $grey; - transition: transform 0.3s ease; - transform: translateY(0); - @include mobile { width: 100vw; height: auto; } } -.banner { - position: fixed; - width: 100%; - z-index: 100; - top: 0; - height: size($desktopBannerHeight); - overflow: hidden; - white-space: nowrap; - border-bottom: 1px solid var(--Gray-pallete-gray-700, #444); - background: var(--Gray-pallete-gray-900, #212121); - transform: translateY(0); - transition: transform 0.3s ease; - - @media screen and (max-width: 768px) { - height: $mobileBannerHeight; - } - - &_hidden { - transform: translateY(-100%); - - &+.root { - transform: translateY(size(-$desktopBannerHeight)); - - @media screen and (max-width: 768px) { - transform: translateY(-$mobileBannerHeight); - } - } - } - - // infinite scroll - - @keyframes scroll { - from { - transform: translateX(0); - } - - to { - transform: translateX(-50%); - } - } - - &__container { - width: fit-content; - min-width: 100%; - height: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - gap: size(16); - padding-right: size(16); - animation: scroll 70s linear infinite; - transition: all 0.3s ease; - - &:hover { - animation-play-state: paused; - } - } - - &__text { - font-size: size(15); - white-space: nowrap; - } - - &__arrow { - height: size(16); - width: size(16); - flex-shrink: 0; - } - - &+.root { - top: size($desktopBannerHeight); - - @media screen and (max-width: 768px) { - top: $mobileBannerHeight; - } - } -} - - .wrapper { display: grid; grid-template-columns: size(324) 1fr; diff --git a/site/src/components/common/Header/Header.tsx b/site/src/components/common/Header/Header.tsx index a4072e9c..793124ab 100644 --- a/site/src/components/common/Header/Header.tsx +++ b/site/src/components/common/Header/Header.tsx @@ -3,7 +3,6 @@ import cx from 'classnames' import { useRouter } from 'next/router' import { useViewport } from 'hooks/useViewport' -import { useScrollDirection } from 'hooks/useScrollDirection' import Icon from 'components/Icon' import Container from 'components/Container' @@ -14,21 +13,16 @@ import BurgerMenu from './BurgerMenu' import s from './Header.module.scss' import { links } from './stub' import { Config } from 'src/strapi/types/Config' -import { Arrow } from './Arrow' type HeaderProps = { className?: string config: Config } -const bannerText = ['=nil; has partnered with Legion', 'Join the =nil; community on Legion'] - function Header({ className, config }: HeaderProps) { const router = useRouter() const { isMobile } = useViewport() - const scrollDirection = useScrollDirection() - const [isBurgerOpen, setBurgerOpen] = useState(false) const realLinks = useMemo(() => { @@ -58,72 +52,46 @@ function Header({ className, config }: HeaderProps) { setBurgerOpen(!isBurgerOpen) }, [isBurgerOpen]) - const bannerElements = [] - for (let i = 0; i < 10; i++) { - for (const text of bannerText) { - bannerElements.push( - - {text} - , - ) - bannerElements.push( -
- -
, - ) - } - } - return ( - <> - -
{bannerElements}
- - - - - + name="squares" + /> + + + + )} + + ) } diff --git a/site/src/components/common/Header/assets/arrow.svg b/site/src/components/common/Header/assets/arrow.svg deleted file mode 100644 index 1be8491e..00000000 --- a/site/src/components/common/Header/assets/arrow.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/site/src/components/common/Layout/Layout.module.scss b/site/src/components/common/Layout/Layout.module.scss index 76bfb010..4638dd3d 100644 --- a/site/src/components/common/Layout/Layout.module.scss +++ b/site/src/components/common/Layout/Layout.module.scss @@ -2,9 +2,9 @@ @use '~styles/mixins' as *; .wrapper { - margin-top: size(76); + margin-top: size(46); @include mobile { - margin-top: size(45); + margin-top: size(25); } -} \ No newline at end of file +} diff --git a/site/src/components/pages/LandingPage/Intro/Intro.module.scss b/site/src/components/pages/LandingPage/Intro/Intro.module.scss index f8a25ac5..ae46e7c8 100644 --- a/site/src/components/pages/LandingPage/Intro/Intro.module.scss +++ b/site/src/components/pages/LandingPage/Intro/Intro.module.scss @@ -6,10 +6,10 @@ .intro { - margin-top: size(110); + margin-top: size(80); @media screen and (max-width: 768px) { - margin-top: 70px; + margin-top: 40px; padding: 0 16px; overflow: hidden; } diff --git a/site/src/hooks/useScrollDirection.ts b/site/src/hooks/useScrollDirection.ts deleted file mode 100644 index 3bf87f64..00000000 --- a/site/src/hooks/useScrollDirection.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { useState, useEffect } from 'react' - -type ScrollDirection = 'up' | 'down' | null - -export const useScrollDirection = () => { - const [scrollDirection, setScrollDirection] = useState(null) - const [prevOffset, setPrevOffset] = useState(0) - const threshold = 10 - - useEffect(() => { - const handleScroll = () => { - const currentOffset = window.pageYOffset - - if (Math.abs(currentOffset - prevOffset) < threshold) { - return - } - - const direction = currentOffset > prevOffset ? 'down' : 'up' - setScrollDirection(direction) - setPrevOffset(currentOffset) - } - - window.addEventListener('scroll', handleScroll) - return () => window.removeEventListener('scroll', handleScroll) - }, [prevOffset]) - - return scrollDirection -}