Pseudo nacrt riesenia pre poziciu STROMu

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)

src/components/PageLayout/PageLayout.tsx

@@ -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={{position: 'relative', display: {xs: 'none', md: 'block'}}}>
-                <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>
     </>

src/components/PageLayout/StromLogo/StromLogo.tsx

@@ -3,32 +3,31 @@ import {FC} from 'react'
 
 import Strom from '@/svg/strom.svg'
 
+import {HeaderHeightContainer} from '../Header/HeaderHeightContainer'
+
 export const StromLogo: FC = () => {
+  const {height} = HeaderHeightContainer.useContainer()
+
   return (
     <Box
       sx={{
+        // NOTE (odstranit): 'sticky' (a bez width) ma inak tiez celkom zaujimavy vysledok
         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'},
-        left: 0,
-        bottom: 0,
         width: '25%',
-        paddingTop: 2,
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'end',
+        // 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="auto" preserveAspectRatio="xMaxYMin" />
+        <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
       </Box>
       <Box>
-        <Strom width="100%" height="auto" preserveAspectRatio="xMaxYMin" />
+        <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
       </Box>
     </Box>
   )

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'}}}>

src/components/Posts/Posts.tsx

@@ -27,6 +27,16 @@ export const Posts: FC = () => {
 
   return (
     <Stack gap={5}>
+      {/* znasobene aby som mal na homepage dostatocne dlhy obsah pri skorlovani */}
+      {posts.map((post) => (
+        <Post key={post.id} {...post} />
+      ))}
+      {posts.map((post) => (
+        <Post key={post.id} {...post} />
+      ))}
+      {posts.map((post) => (
+        <Post key={post.id} {...post} />
+      ))}
       {posts.map((post) => (
         <Post key={post.id} {...post} />
       ))}