Skip to content

Commit

Permalink
fix: scrolling issue with banner on landing page (#3429)
Browse files Browse the repository at this point in the history
  • Loading branch information
therealemjy authored Oct 25, 2024
1 parent 3f3a048 commit d0e08b3
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 82 deletions.
5 changes: 5 additions & 0 deletions .changeset/smart-cheetahs-pretend.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@venusprotocol/landing": minor
---

fix scrolling issue with banner on landing page
16 changes: 12 additions & 4 deletions apps/landing/src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useEffect } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { AppStateConsumer, AppStateProvider } from '../context';
import s from './App.module.css';
import Banner from './Banner/Banner';
import Footer from './Footer/Footer';
import MainContent from './MainContent/MainContent';

function Main() {
return (
<main className={s.root}>
<MainContent />
<Footer />
</main>
<AppStateProvider>
<main className={s.root}>
<AppStateConsumer>
{({ isMobileMenuOpen }) => !isMobileMenuOpen && <Banner />}
</AppStateConsumer>

<MainContent />
<Footer />
</main>
</AppStateProvider>
);
}

Expand Down
29 changes: 26 additions & 3 deletions apps/landing/src/components/Banner/Banner.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.root {
width: 100vw;
width: 100%;
background-color: var(--color-banner-bg);
display: flex;
justify-content: center;
Expand All @@ -15,7 +15,7 @@
.limit {
position: relative;
width: 100%;
max-width: 1280px;
max-width: var(--global-max-width);
display: flex;
flex-direction: row;
justify-content: center;
Expand All @@ -29,10 +29,33 @@
a {
color: white;
}

@media (min-width: 640px) {
padding-left: 24px;
padding-right: 24px;
}

@media (min-width: 840px) {
padding-left: 32px;
padding-right: 32px;
}

@media (min-width: 1280px) {
padding-left: 48px;
padding-right: 48px;
}
}

.close {
.text {
margin-right: 14px;

@media (min-width: 1280px) {
margin-right: 0;
padding-left: 20px;
}
}

.close {
margin-left: auto;
min-height: 20px;
min-width: 20px;
Expand Down
2 changes: 1 addition & 1 deletion apps/landing/src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Banner: React.FC<IBannerProps> = ({ className }) => {
<section className={cn(s.root, className)}>
<div className={s.limit}>
<div className={s.content}>
<span>
<span className={s.text}>
Announcing another V4 delivery: Venus Prime. Learn more on the{' '}
<a href="https://docs-v4.venus.io/whats-new/prime-yield">documentation</a> site and{' '}
<a href="https://github.com/VenusProtocol/venus-protocol-documentation/blob/main/whitepapers/Venus-whitepaper-v4.pdf">
Expand Down
39 changes: 17 additions & 22 deletions apps/landing/src/components/Header/Header.module.css
Original file line number Diff line number Diff line change
@@ -1,36 +1,19 @@
/*@import "../../assets/styles/media.css";*/

.root {
position: fixed;
top: 0;
right: 0;
left: 0;
position: sticky;
z-index: 1;
background-color: var(--color-bg-transparent);
transition: background-color 0.5s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
min-height: 60px;

@media (min-width: 640px) {
min-height: 80px;
}
}

.headerAfterScroll {
background-color: var(--color-bg);
}

.inner {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
width: 100%;
max-width: var(--global-max-width);
padding: 16px;
height: 60px;
max-width: var(--global-max-width);
width: 100%;
margin-bottom: -60px;

@media (min-width: 640px) {
padding: 16px 24px;
Expand All @@ -45,10 +28,21 @@
margin-left: auto;
margin-right: auto;
}

@media (min-width: 640px) {
height: 80px;
margin-bottom: -80px;
}
}

.headerAfterScroll {
background-color: var(--color-bg);
}

.logo {
width: 154px;
}

.menuMobileBtn {
padding: 0;
background-color: transparent;
Expand Down Expand Up @@ -96,6 +90,7 @@
.headerNavLinksWrapper {
margin-right: 24px;
}

.headerLink {
padding-left: 16px;
padding-right: 16px;
Expand Down
110 changes: 58 additions & 52 deletions apps/landing/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import cn from 'classnames';
import { useEffect, useState } from 'react';
import { useEffect } from 'react';
import ScrollLock from 'react-scrolllock';
import Banner from '../Banner/Banner';

import { useAppStateContext } from '../../context';
import LinkLaunchApp from '../Link/LinkLaunchApp';
import NavigationLinks from '../NavigationLinks/NavigationLinks';
import s from './Header.module.css';
Expand All @@ -22,6 +23,7 @@ const content = [
text: 'Markets',
},
];

interface IHeaderProps {
className?: string;
}
Expand All @@ -42,7 +44,7 @@ const scrollEvent = () => {
};

const Header: React.FC<IHeaderProps> = ({ className }) => {
const [isMenuOpened, setIsMenuOpened] = useState(false);
const { isMobileMenuOpen, setIsMobileMenuOpen } = useAppStateContext();

useEffect(() => {
window.addEventListener('scroll', scrollEvent);
Expand All @@ -54,57 +56,61 @@ const Header: React.FC<IHeaderProps> = ({ className }) => {

return (
<>
<header id={HEADER_ID} className={cn(s.root, className)}>
<Banner />
<div className={s.inner}>
<Logo key="headerLogo" className={s.logo} />
<button
onClick={() => setIsMenuOpened(!isMenuOpened)}
type="button"
className={s.menuMobileBtn}
>
{isMenuOpened ? (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.3334 2.54663L17.4534 0.666626L10.0001 8.11996L2.54675 0.666626L0.666748 2.54663L8.12008 9.99996L0.666748 17.4533L2.54675 19.3333L10.0001 11.88L17.4534 19.3333L19.3334 17.4533L11.8801 9.99996L19.3334 2.54663Z"
fill="white"
/>
</svg>
) : (
<svg
width="24"
height="16"
viewBox="0 0 24 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 16H24V13.3333H0V16ZM0 9.33333H24V6.66667H0V9.33333ZM0 0V2.66667H24V0H0Z"
fill="white"
/>
</svg>
)}
</button>
<MenuMobile className={cn(s.menuMobile, isMenuOpened && s.menuMobileOpened)} />
<div className={s.menuDesktop}>
<NavigationLinks
content={content}
classNames={{
root: s.headerNavLinksWrapper,
link: s.headerLink,
}}
/>
<LinkLaunchApp variant="buttonTransparent" className={s.btn} />
</div>
<header
id={HEADER_ID}
className={cn(s.root, isMobileMenuOpen && s.headerAfterScroll, className)}
>
<Logo key="headerLogo" className={s.logo} />

<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
type="button"
className={s.menuMobileBtn}
>
{isMobileMenuOpen ? (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.3334 2.54663L17.4534 0.666626L10.0001 8.11996L2.54675 0.666626L0.666748 2.54663L8.12008 9.99996L0.666748 17.4533L2.54675 19.3333L10.0001 11.88L17.4534 19.3333L19.3334 17.4533L11.8801 9.99996L19.3334 2.54663Z"
fill="white"
/>
</svg>
) : (
<svg
width="24"
height="16"
viewBox="0 0 24 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 16H24V13.3333H0V16ZM0 9.33333H24V6.66667H0V9.33333ZM0 0V2.66667H24V0H0Z"
fill="white"
/>
</svg>
)}
</button>

<MenuMobile className={cn(s.menuMobile, isMobileMenuOpen && s.menuMobileOpened)} />

<div className={s.menuDesktop}>
<NavigationLinks
content={content}
classNames={{
root: s.headerNavLinksWrapper,
link: s.headerLink,
}}
/>
<LinkLaunchApp variant="buttonTransparent" className={s.btn} />
</div>
</header>
<ScrollLock isActive={isMenuOpened} />

<ScrollLock isActive={isMobileMenuOpen} accountForScrollbars={false} />
</>
);
};
Expand Down
25 changes: 25 additions & 0 deletions apps/landing/src/context/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { createContext, useContext as useReactContext, useState } from 'react';

interface AppStateContextProps {
isMobileMenuOpen: boolean;
setIsMobileMenuOpen: (isOpen: boolean) => void;
}

const AppStateContext = createContext<AppStateContextProps>({
isMobileMenuOpen: false,
setIsMobileMenuOpen: () => {},
});

export const useAppStateContext = () => useReactContext(AppStateContext);

export const AppStateProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

return (
<AppStateContext.Provider value={{ isMobileMenuOpen, setIsMobileMenuOpen }}>
{children}
</AppStateContext.Provider>
);
};

export const AppStateConsumer = AppStateContext.Consumer;

0 comments on commit d0e08b3

Please sign in to comment.