solve position. still need to figure the content better

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

Hide file tree

Showing 4 changed files with 78 additions and 76 deletions.
diff --git a/src/components/PageLayout/Header/HeaderHeightContainer.tsx b/src/components/PageLayout/Header/HeaderHeightContainer.tsx
@@ -0,0 +1,10 @@
+import {useState} from 'react'
+import {createContainer} from 'unstated-next'
+
+const useHeaderHeight = () => {
+  const [height, setHeight] = useState(0)
+
+  return {height, setHeight}
+}
+
+export const HeaderHeightContainer = createContainer(useHeaderHeight)
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -1,4 +1,4 @@
-import {Box, Stack, SxProps} from '@mui/material'
+import {Stack, SxProps} from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import Head from 'next/head'
 import {FC, ReactNode} from 'react'
@@ -8,6 +8,7 @@ import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {Seminar, useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Footer} from './Footer/Footer'
+import {HeaderHeightContainer} from './Header/HeaderHeightContainer'
 import {StromLogo} from './StromLogo/StromLogo'
 import {TopGrid} from './TopGrid/TopGrid'
 
@@ -39,30 +40,35 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
       </Head>
       <PageTitleContainer.Provider initialState={title}>
         <BannerContainer.Provider>
-          <Stack sx={{minHeight: '100dvh'}}>
-            <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}}}>
-                <StromLogo />
-              </Grid>
-              <Grid
-                xs={12}
-                md={contentWidth * 3}
-                sx={{
-                  py: {xs: 4, md: 8, lg: 12},
-                  px: 2,
-                  ...sx,
-                  // v server-renderi bol v consoli warning, ale first-child je tu asi uplne v pohode selector :D
-                  // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
-                  '> :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */':
-                    {mt: 0, pt: 0},
-                }}
-              >
-                {children}
+          <HeaderHeightContainer.Provider>
+            <Stack sx={{minHeight: '100dvh'}}>
+              <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}}}>
+                  <StromLogo />
+                </Grid>
+
+                <Grid
+                  xs={12}
+                  md={contentWidth * 3}
+                  sx={{
+                    py: {xs: 4, md: 8, lg: 12},
+                    px: 2,
+                    ...sx,
+                    // v server-renderi bol v consoli warning, ale first-child je tu asi uplne v pohode selector :D
+                    // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
+                    '> :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */':
+                      {mt: 0, pt: 0},
+                  }}
+                >
+                  {children}
+                </Grid>
               </Grid>
-            </Grid>
-            <Footer />
-          </Stack>
+
+              <Footer />
+            </Stack>
+          </HeaderHeightContainer.Provider>
         </BannerContainer.Provider>
       </PageTitleContainer.Provider>
     </>

diff --git a/src/components/PageLayout/StromLogo/StromLogo.tsx b/src/components/PageLayout/StromLogo/StromLogo.tsx
@@ -1,60 +1,34 @@
-import {Box, Button} from '@mui/material'
-import {FC, useEffect, useRef, useState} from 'react'
+import {Box} from '@mui/material'
+import {FC} 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)
-    }
-  }
+import {HeaderHeightContainer} from '../Header/HeaderHeightContainer'
 
-  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])
+export const StromLogo: FC = () => {
+  const {height} = HeaderHeightContainer.useContainer()
 
   return (
-    <>
-      {/* zistit pozicitu tohto boxu a nastavit to ako top pre box obsahujuci strom */}
-      <Box ref={firstBoxRef}>
-        <Button onClick={updateTopPosition}>Update top position</Button>
+    <Box
+      sx={{
+        // NOTE (odstranit): 'sticky' (a bez width) ma inak tiez celkom zaujimavy vysledok
+        position: 'fixed',
+        width: '25%',
+        // cisla odpovedaju top paddingom v `PageLayout` (dali by sa sem asi passnut zhora ci ukonstantovat)
+        top: {xs: height + 32, md: height + 64, lg: height + 96},
+        zIndex: -1,
+      }}
+    >
+      {/* TODO: vyriesit lepsie :D nastavit nejak SVG ako background a nejake repeat-nieco? */}
+      <Box>
+        <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
+      </Box>
+      <Box>
+        <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
       </Box>
-      <Box
-        sx={{
-          position: 'fixed',
-          // tieto cisla su take dost ad-hoc
-          // je potrebne doratat este podla toho ze ci sa zobrazuje alebo nezobrazuje baner
-          // 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,
-          overflow: 'hidden',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'end',
-          zIndex: -1,
-        }}
-      >
-        <Box>
-          {/* itenditfikovat vysku obrazovky a podla toho pasnut strom s potrebnym poctom trojuholnikov */}
-          <Strom width="100%" height="auto" preserveAspectRatio="xMaxYMin" />
-        </Box>
+      <Box>
+        <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
       </Box>
-    </>
+    </Box>
   )
 }
diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -1,14 +1,16 @@
 import {Stack, Typography} from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import {useRouter} from 'next/router'
-import {FC, useMemo} from 'react'
+import {FC, RefObject, useMemo, useRef} from 'react'
+import {useResizeObserver} from 'usehooks-ts'
 
 import {Link} from '@/components/Clickable/Link'
 import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Banner} from '../Banner/Banner'
+import {HeaderHeightContainer} from '../Header/HeaderHeightContainer'
 import {MenuMain} from '../MenuMain/MenuMain'
 
 type SeminarButtonsProps = {
@@ -60,8 +62,18 @@ export const TopGrid: FC = () => {
 
   const {pageTitle} = PageTitleContainer.useContainer()
 
+  const headerRef = useRef<HTMLDivElement>(null)
+  const {setHeight} = HeaderHeightContainer.useContainer()
+
+  useResizeObserver({
+    // React 19 changed the type of ref to optional, lib is not ready: https://github.com/juliencrn/usehooks-ts/issues/602
+    ref: headerRef as RefObject<HTMLDivElement>,
+    box: 'border-box',
+    onResize: ({height}) => setHeight(height ?? 0),
+  })
+
   return (
-    <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}}>
+    <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}} ref={headerRef}>
       <Grid container disableEqualOverflow spacing={1} p={3}>
         {/* first row */}
         <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}}>