diff --git a/packages/docs/app/root.tsx b/packages/docs/app/root.tsx index 8857a1c..c56a97e 100644 --- a/packages/docs/app/root.tsx +++ b/packages/docs/app/root.tsx @@ -1,3 +1,5 @@ +import clsx from "clsx" +import { useEffect, useState } from "react" import type { LinksFunction, MetaFunction } from "remix" import { Links, @@ -18,7 +20,7 @@ export const links: LinksFunction = () => [ export default function App() { return ( - + @@ -26,7 +28,10 @@ export default function App() { - +
+
+ +
{process.env.NODE_ENV === "development" && } @@ -34,3 +39,36 @@ export default function App() { ) } + +function Header() { + const isScrolled = useScrolled() + return ( +
+
+

reacord

+
+
+ ) +} + +function useScrolled() { + const [isScrolled, setScrolled] = useState( + typeof window !== "undefined" && window.scrollY > 0, + ) + + useEffect(() => { + const handleScroll = () => { + setScrolled(window.scrollY > 0) + } + + window.addEventListener("scroll", handleScroll) + return () => window.removeEventListener("scroll", handleScroll) + }, []) + + return isScrolled +} diff --git a/packages/docs/package.json b/packages/docs/package.json index c92db18..4ccb19f 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -13,6 +13,7 @@ "@remix-run/react": "^1.1.1", "@remix-run/serve": "^1.1.1", "autoprefixer": "^10.4.1", + "clsx": "^1.1.1", "postcss": "^8.4.5", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c3d018..a8d5546 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,7 @@ importers: '@types/react': ^17.0.24 '@types/react-dom': ^17.0.9 autoprefixer: ^10.4.1 + clsx: ^1.1.1 concurrently: ^6.5.1 postcss: ^8.4.5 prettier: ^2.5.1 @@ -56,6 +57,7 @@ importers: '@remix-run/react': 1.1.1_react-dom@17.0.2+react@17.0.2 '@remix-run/serve': 1.1.1_react-dom@17.0.2+react@17.0.2 autoprefixer: 10.4.1_postcss@8.4.5 + clsx: 1.1.1 postcss: 8.4.5 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 @@ -2325,6 +2327,11 @@ packages: engines: {node: '>=0.8'} dev: true + /clsx/1.1.1: + resolution: {integrity: sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==} + engines: {node: '>=6'} + dev: false + /co/4.6.0: resolution: {integrity: sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}