Try no. 1

ZdruzenieSTROM · Dec 17, 2024 · f46db88 · f46db88
1 parent cc86f43
commit f46db88
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -43,9 +43,7 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
             <TopGrid />
             <Grid container disableEqualOverflow sx={{flex: 1}}>
               <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}, pt: {xs: 4, md: 8, lg: 12}}}>
-                <Box sx={{position: 'relative'}}>
-                  <StromLogo />
-                </Box>
+                <StromLogo />
               </Grid>
               <Grid
                 xs={12}

diff --git a/src/components/PageLayout/StromLogo/StromLogo.tsx b/src/components/PageLayout/StromLogo/StromLogo.tsx
@@ -1,13 +1,35 @@
-import {Box} from '@mui/material'
-import {FC} from 'react'
+import {Box, Button} from '@mui/material'
+import {FC, useEffect, useRef, useState} from 'react'
 
 import Strom from '@/svg/strom.svg'
+import {BannerContainer} from '@/utils/BannerContainer'
 
 export const StromLogo: FC = () => {
+  const firstBoxRef = useRef<HTMLDivElement>(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 */}
-      <Box />
+      <Box ref={firstBoxRef}>
+        <Button onClick={updateTopPosition}>Update top position</Button>
+      </Box>
       <Box
         sx={{
           position: 'fixed',
@@ -16,10 +38,11 @@ export const StromLogo: FC = () => {
           // 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',