mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues Wiki Activity

Dynamically change search bar sticky offset depending on window width

Browse source
This commit is contained in:
William Oldham 2023-12-09 14:24:25 +00:00
parent c4c09b8ddb
commit 1b1770ace8
1 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/pages/parts/home/HeroPart.tsx
View file

@ -1,11 +1,13 @@
import { useCallback, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import Sticky from "react-sticky-el";
import { useWindowSize } from "react-use";
import { SearchBarInput } from "@/components/form/SearchBar";
import { ThinContainer } from "@/components/layout/ThinContainer";
import { useSlashFocus } from "@/components/player/hooks/useSlashFocus";
import { HeroTitle } from "@/components/text/HeroTitle";
import { useIsMobile } from "@/hooks/useIsMobile";
import { useRandomTranslation } from "@/hooks/useRandomTranslation";
import { useSearchQuery } from "@/hooks/useSearchQuery";
import { useBannerSize } from "@/stores/banner";
@ -29,6 +31,20 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
[setShowBg, setIsSticky]
);
const { width: windowWidth } = useWindowSize();
const topSpacing = 16;
const [stickyOffset, setStickyOffset] = useState(topSpacing);
useEffect(() => {
if (windowWidth > 1200) {
// On large screens the bar goes inline with the nav elements
setStickyOffset(topSpacing);
} else {
// On smaller screens the bar goes below the nav elements
setStickyOffset(topSpacing + 60);
}
}, [windowWidth]);
let time = "night";
const hour = new Date().getHours();
if (hour < 12) time = "morning";
@ -47,9 +63,9 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
</div>
<div className="relative h-20 z-30">
<Sticky
topOffset={-16 + bannerSize}
topOffset={stickyOffset * -1 + bannerSize}
stickyStyle={{
paddingTop: `${16 + bannerSize}px`,
paddingTop: `${stickyOffset + bannerSize}px`,
}}
onFixedToggle={stickStateChanged}
>