LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test mobile

This commit is contained in:
Karol Wypchlo 2021-04-01 12:07:37 +02:00
parent 465e4a0ba0
commit 251707bb8a
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/src/components/Layout/Layout.js
View File

@ -20,7 +20,7 @@ const FixedHeader = () => {
const [mode, setMode] = React.useState(); const [mode, setMode] = React.useState();
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
const offset = ref.current.offsetHeight; const offset = ref.current.offsetHeight + 1;
const element = document.elementFromPoint(0, offset); const element = document.elementFromPoint(0, offset);
const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color"); const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color");
const color = readableColor(backgroundColor); // returns either #fff or #000 const color = readableColor(backgroundColor); // returns either #fff or #000
@ -34,7 +34,7 @@ const FixedHeader = () => {
return ( return (
<div ref={ref} className="fixed inset-x-0 top-0 z-50"> <div ref={ref} className="fixed inset-x-0 top-0 z-50">
<NewsHeader /> <NewsHeader />
<Navigation mode={mode} yyy={y} /> <Navigation mode={mode} />
</div> </div>
); );
}; };

14
packages/website/src/components/Navigation/Navigation.js
View File

@ -16,11 +16,17 @@ const routes = [
{ title: "News", to: "/news" }, { title: "News", to: "/news" },
]; ];
const Navigation = ({ mode, yyy = 0 }) => { const useWindowTop = () => {
const { y } = useWindowScroll();
return y <= 0;
};
const Navigation = ({ mode }) => {
const navRef = React.useRef(null); const navRef = React.useRef(null);
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const windowSize = useWindowSize(); const windowSize = useWindowSize();
const { y: offsetY } = useWindowScroll(); const isWindowTop = useWindowTop();
React.useEffect(() => { React.useEffect(() => {
setOpen(false); setOpen(false);
@ -41,7 +47,7 @@ const Navigation = ({ mode, yyy = 0 }) => {
className={classnames("relative px-8 py-6 transition-all duration-500", { className={classnames("relative px-8 py-6 transition-all duration-500", {
"bg-white border-b border-palette-200": mode === "light", "bg-white border-b border-palette-200": mode === "light",
"bg-palette-600 bg-opacity-50": mode === "dark", "bg-palette-600 bg-opacity-50": mode === "dark",
"desktop:py-12": offsetY <= 0, "desktop:py-12": isWindowTop,
})} })}
ref={navRef} ref={navRef}
> >
@ -51,7 +57,7 @@ const Navigation = ({ mode, yyy = 0 }) => {
{mode === "dark" && <LogoWhiteText className="h-8 desktop:h-10" />} {mode === "dark" && <LogoWhiteText className="h-8 desktop:h-10" />}
{mode === "light" && <LogoBlackText className="h-8 desktop:h-10" />} {mode === "light" && <LogoBlackText className="h-8 desktop:h-10" />}
<span className="bg-white text-xxs p-1 tabular-nums"> <span className="bg-white text-xxs p-1 tabular-nums">
{yyy} {offsetY} {mode} {isWindowTop} {mode}
</span> </span>
</Link> </Link>
<div className="ml-auto flex items-center desktop:hidden z-10"> <div className="ml-auto flex items-center desktop:hidden z-10">