From f36355911c93536d0d48a080ec91dcefa53606cb Mon Sep 17 00:00:00 2001
From: matushl <hlavacik.matus@gmail.com>
Date: Sun, 12 Nov 2023 02:08:29 +0100
Subject: [PATCH] [WIP] playing with grids

---
 src/components/PageLayout/Banner/Banner.module.scss |  6 ++----
 src/components/PageLayout/PageLayout.tsx            |  2 --
 .../PageLayout/TopGrid/TopGrid.module.scss          | 13 +++++++++++--
 .../PageLayout/TopGrid/TopGrid.module.scss.d.ts     |  1 +
 src/components/PageLayout/TopGrid/TopGrid.tsx       |  4 ++++
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/PageLayout/Banner/Banner.module.scss b/src/components/PageLayout/Banner/Banner.module.scss
index 3cc381c5..2927be12 100644
--- a/src/components/PageLayout/Banner/Banner.module.scss
+++ b/src/components/PageLayout/Banner/Banner.module.scss
@@ -1,8 +1,5 @@
 .banner{
-  position: fixed;
   width: 100vw;
-  top: 10rem;
-  left: 0;
   height: 2rem;
   background-color: black;
   color: white;
@@ -10,7 +7,8 @@
   display: flex;
   align-items: center;
   padding: 0px;
-  z-index: 2;
+  z-index: 3;
+  margin-bottom: 2rem;
 }
 
 
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
index 4296df2d..f99a8693 100644
--- a/src/components/PageLayout/PageLayout.tsx
+++ b/src/components/PageLayout/PageLayout.tsx
@@ -3,7 +3,6 @@ import {FC, ReactNode, useEffect} from 'react'
 
 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'
@@ -28,7 +27,6 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
   return (
     <div className={styles.pageContainer}>
       <TopGrid title={pageTitle} />
-      <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
index 2cf9ddb9..2256da37 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.module.scss
+++ b/src/components/PageLayout/TopGrid/TopGrid.module.scss
@@ -3,11 +3,11 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 10rem;
+  height: auto;
   background-color: white;
   z-index: 3;
   display: grid;
-  grid-template: 1fr 1fr / 1fr 2fr 1fr;
+  grid-template: 1fr 1fr auto / 1fr 2fr 1fr;
 }
 
 .menu {
@@ -27,6 +27,15 @@
   align-items: center;
 }
 
+.baner {
+  // third row 
+  grid-row: 3;
+  grid-column: 1/4;
+  display: flex;
+  justify-content: flex-end;
+}
+
+
 .semesterPicker {
   // second row right column
   grid-row: 2;
diff --git a/src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts b/src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts
index 4cc72d4d..a65f2ea5 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts
+++ b/src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts
@@ -1,5 +1,6 @@
 export type Styles = {
   active: string
+  baner: string
   container: string
   menu: string
   menuItem: string
diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
index ae1f7e4e..922b6cb0 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.tsx
+++ b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -7,6 +7,7 @@ import {FC} from 'react'
 import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {Banner} from '../Banner/Banner'
 import styles from './TopGrid.module.scss'
 
 type TopGridProps = {
@@ -46,6 +47,9 @@ export const TopGrid: FC<TopGridProps> = ({title}) => {
           <SemesterPicker page={page} />
         </div>
       )}
+      <div className={styles.baner}>
+        <Banner />
+      </div>
     </div>
   )
 }