diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx index d51aef06..c957fc6e 100644 --- a/src/components/PageLayout/PageLayout.tsx +++ b/src/components/PageLayout/PageLayout.tsx @@ -43,9 +43,7 @@ export const PageLayout: FC = ({contentWidth = 2, title = '', c - - - + { + const firstBoxRef = useRef(null) + const [topPosition, setTopPosition] = useState(0) + + const {bannerMessages} = BannerContainer.useContainer() + + const updateTopPosition = () => { + if (firstBoxRef.current) { + const rect = firstBoxRef.current.getBoundingClientRect() + setTopPosition(rect.top) + console.log(rect.top) + } + } + + useEffect(() => { + updateTopPosition() + // toto sa prepocita skor ako sa baner zobrazi v plnej sirke, takze toto uplne nefunguje + // dalsim problemom je ked sa zmeni nadpis (napriklad pri poradi prejdes z poradia semestra na seriu - zvacsi sa nadpis - banner sa posunie nizsie) + }, [bannerMessages]) + return ( <> {/* zistit pozicitu tohto boxu a nastavit to ako top pre box obsahujuci strom */} - + + + { // taktiez pri sirke 900 - 1100px sa niektore nadpisy zalomuju a rozbijaju zarovnanie stromu // - problem toho je ze to je rozlisenie vacsinu tabletov na vysku, takze to bude treba fixnut // top: {md: '213px', lg: '265px', xl: '301px'}, + top: topPosition, left: 0, bottom: 0, width: '25%', - paddingTop: 2, + // paddingTop: 2, overflow: 'hidden', display: 'flex', flexDirection: 'column',