Refactor and improve TopGrid

ZdruzenieSTROM · Dec 8, 2023 · ece083a · ece083a
1 parent 49f6541
commit ece083a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 37 deletions.
diff --git a/src/components/PageLayout/Banner/Banner.module.scss b/src/components/PageLayout/Banner/Banner.module.scss
@@ -1,16 +1,14 @@
 .banner{
-  position: fixed;
   width: 100vw;
-  top: 10rem;
-  left: 0;
   height: 2rem;
   background-color: black;
   color: white;
   border: none;
   display: flex;
   align-items: center;
   padding: 0px;
-  z-index: 2;
+  z-index: 3;
+  margin-bottom: 0.5rem;
 }
 
 

diff --git a/src/components/PageLayout/PageLayout.module.scss b/src/components/PageLayout/PageLayout.module.scss
@@ -5,8 +5,6 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  // top offset because of sticky menu/title/banner
-  padding-top: 12rem;
   // bottom offset because of sticky debug footer
   padding-bottom: 1rem;
 }

diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -4,7 +4,6 @@ import {FC, ReactNode} from 'react'
 import {BannerContainer} from '@/utils/BannerContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
-import {Banner} from './Banner/Banner'
 import {Footer} from './Footer/Footer'
 import {MenuMain} from './MenuMain/MenuMain'
 import styles from './PageLayout.module.scss'
@@ -25,7 +24,6 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
       <BannerContainer.Provider>
         <div className={styles.pageContainer}>
           <TopGrid />
-          <Banner />
           <MenuMain />
           <div className={styles.grid}>
             <StromLogo />

diff --git a/src/components/PageLayout/TopGrid/TopGrid.module.scss b/src/components/PageLayout/TopGrid/TopGrid.module.scss
@@ -1,13 +1,16 @@
 .container {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   right: 0;
-  height: 10rem;
+  height: auto;
   background-color: white;
   z-index: 3;
+}
+
+.grid {
   display: grid;
-  grid-template: 1fr 1fr / 1fr 2fr 1fr;
+  grid-template: 1fr auto / 1fr 2fr 1fr;
 }
 
 .menu {

diff --git a/src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts b/src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   active: string
   container: string
+  grid: string
   menu: string
   menuItem: string
   semesterPicker: string

diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -1,4 +1,4 @@
-import {Typography} from '@mui/material'
+import {Stack, Typography} from '@mui/material'
 import clsx from 'clsx'
 import Link from 'next/link'
 import {useRouter} from 'next/router'
@@ -8,6 +8,7 @@ import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {Banner} from '../Banner/Banner'
 import styles from './TopGrid.module.scss'
 
 export const TopGrid: FC = () => {
@@ -19,32 +20,35 @@ export const TopGrid: FC = () => {
   const {pageTitle} = PageTitleContainer.useContainer()
 
   return (
-    <div className={styles.container}>
-      <div className={styles.menu}>
-        <div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
-          <Typography variant="button1">
-            <Link href="/malynar">Malynár</Link>
-          </Typography>
-        </div>
-        <div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
-          <Typography variant="button1">
-            <Link href="/matik">Matik</Link>
-          </Typography>
-        </div>
-        <div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
-          <Typography variant="button1">
-            <Link href="/strom">Strom</Link>
-          </Typography>
+    <Stack className={styles.container}>
+      <div className={styles.grid}>
+        <div className={styles.menu}>
+          <div className={clsx(styles.menuItem, seminar === 'malynar' && styles.active)}>
+            <Typography variant="button1">
+              <Link href="/malynar">Malynár</Link>
+            </Typography>
+          </div>
+          <div className={clsx(styles.menuItem, seminar === 'matik' && styles.active)}>
+            <Typography variant="button1">
+              <Link href="/matik">Matik</Link>
+            </Typography>
+          </div>
+          <div className={clsx(styles.menuItem, seminar === 'strom' && styles.active)}>
+            <Typography variant="button1">
+              <Link href="/strom">Strom</Link>
+            </Typography>
+          </div>
         </div>
+        <Typography variant="h1" className={styles.title}>
+          {pageTitle}
+        </Typography>
+        {(page === 'zadania' || page === 'vysledky') && (
+          <div className={styles.semesterPicker}>
+            <SemesterPicker page={page} />
+          </div>
+        )}
       </div>
-      <Typography variant="h1" className={styles.title}>
-        {pageTitle}
-      </Typography>
-      {(page === 'zadania' || page === 'vysledky') && (
-        <div className={styles.semesterPicker}>
-          <SemesterPicker page={page} />
-        </div>
-      )}
-    </div>
+      <Banner />
+    </Stack>
   )
 }