Skip to content

[Dashboard] Remove use-scroll-position #5274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[Dashboard] Remove use-scroll-position #5274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
"@emotion/styled": "11.13.0",
"@hookform/resolvers": "^3.9.0",
"@marsidev/react-turnstile": "^1.0.2",
"@n8tb1t/use-scroll-position": "^2.0.3",
"@radix-ui/react-alert-dialog": "^1.1.2",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
Expand Down
29 changes: 3 additions & 26 deletions apps/dashboard/src/components/product-pages/common/Topnav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,20 @@
import { Box, Container, Flex, useBreakpointValue } from "@chakra-ui/react";
import { useScrollPosition } from "@n8tb1t/use-scroll-position";
Copy link
Contributor Author

@kien-ngo kien-ngo Nov 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This navbar is only used in the few pages that (pretty sure) will be converted to Framer.

What it does is change the background color effects on scrolling down. We can achieve the same thing with useEffect(?) however I think it's not that big of a deal so we can just make it "static". (Less JS in overall)

import { Box, Container, Flex } from "@chakra-ui/react";
import { Logo } from "components/logo";
import { useState } from "react";
import { TrackedLink } from "tw-components";
import { DesktopMenu } from "./nav/DesktopMenu";
import { MobileMenu } from "./nav/MobileMenu";

export const HomepageTopNav: React.FC = () => {
const isMobile = useBreakpointValue({ base: true, md: false });
const [isScrolled, setIsScrolled] = useState(false);

useScrollPosition(
({ currPos }) => {
if (currPos.y < -5) {
setIsScrolled(true);
} else if (currPos.y >= -5) {
setIsScrolled(false);
}
},
[isMobile],
undefined,
false,
16,
);

return (
<Box
transition="all 50ms"
position="sticky"
top={0}
left={0}
w="100%"
willChange="backdrop-filter background-color"
zIndex="overlay"
as="header"
bgColor={isScrolled ? "rgba(0,0,0,0.8)" : "rgba(0,0,0,0)"}
backdropFilter={
isScrolled ? "saturate(180%) blur(20px)" : "saturate(100%) blur(0px)"
}
bgColor="rgba(0,0,0,0)"
Copy link
Member

@MananTank MananTank Nov 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not looking good when you scroll the page down

image.png

Copy link
Contributor Author

@kien-ngo kien-ngo Nov 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah

Copy link
Contributor Author

@kien-ngo kien-ngo Nov 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MananTank I gave it a default blur-20px.

image.png

This page is very soon to be deleted by so it's up to you. I'm fine with closing this PR (it was a weekend idea anyway)

https://www.notion.so/thirdweb/Pages-that-should-move-into-framer-or-be-removed-12e8141725338051a965daa7ae2e60dc

Copy link
Member

@jnsdls jnsdls Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah let's not do this - also let's not waste time on pages that will be deleted or moved to framer soon, we have lots to do on "in app" pages :)

Copy link
Contributor Author

@kien-ngo kien-ngo Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Understood ^

backdropFilter="saturate(100%) blur(20px)"
>
<Container
as={Flex}
Expand Down
34 changes: 18 additions & 16 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading