From 3c1a731a1bcce4df74a14dcab40e56c2d0125276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Tue, 26 Nov 2024 19:52:22 +0100
Subject: [PATCH] Enable main menu and fix tree (#500)

* Display main menu close button

* set currentColor to Strom.svg fill

* Fix tree logo position for pages with banner
---
 src/components/Crossroad/Crossroad.tsx        |  2 +-
 .../PageLayout/MenuMain/MenuMain.tsx          |  1 -
 src/components/PageLayout/PageLayout.tsx      |  2 +-
 .../PageLayout/StromLogo/StromLogo.tsx        | 30 +++++++++++--------
 src/svg/strom.svg                             |  8 ++---
 5 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/Crossroad/Crossroad.tsx b/src/components/Crossroad/Crossroad.tsx
index bfe229e5..877c7d41 100644
--- a/src/components/Crossroad/Crossroad.tsx
+++ b/src/components/Crossroad/Crossroad.tsx
@@ -36,7 +36,7 @@ export const Crossroad: React.FC = () => {
       <Grid container disableEqualOverflow columnSpacing={{xs: 2, md: 3, lg: 4}} mt={'30vh'} flexGrow={1}>
         <Grid xs={0} md={3} display={{xs: 'none', md: 'flex'}} height="70dvh" justifyContent="end">
           <Box>
-            <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
+            <Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" color="white" />
           </Box>
         </Grid>
         <Grid xs={12} md={9}>
diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index 92cc339b..04c3c6ba 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -107,7 +107,6 @@ export const MenuMain: FC = () => {
               top: 24,
               left: {xs: 'auto', md: 24},
               right: {xs: 24, md: 'auto'},
-              display: {xs: 'block', md: 'none'},
             }}
           />
           {menuItemsIsLoading && (
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
index fc315843..d2ba2375 100644
--- a/src/components/PageLayout/PageLayout.tsx
+++ b/src/components/PageLayout/PageLayout.tsx
@@ -41,7 +41,7 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
         <BannerContainer.Provider>
           <Stack sx={{minHeight: '100dvh'}}>
             <TopGrid />
-            <Grid container sx={{flex: 1}}>
+            <Grid container disableEqualOverflow sx={{flex: 1}}>
               <Grid xs={0} md={3} sx={{position: 'relative', display: {xs: 'none', md: 'block'}}}>
                 <StromLogo />
               </Grid>
diff --git a/src/components/PageLayout/StromLogo/StromLogo.tsx b/src/components/PageLayout/StromLogo/StromLogo.tsx
index 904884d3..86edd4f8 100644
--- a/src/components/PageLayout/StromLogo/StromLogo.tsx
+++ b/src/components/PageLayout/StromLogo/StromLogo.tsx
@@ -1,31 +1,35 @@
 import {Box} from '@mui/material'
 import {FC} from 'react'
 
+import Strom from '@/svg/strom.svg'
+
 export const StromLogo: FC = () => {
   return (
     <Box
       sx={{
         position: 'fixed',
-        // tieto cisla su take dost ad-hoc, ale aj tak ten strom nebude vidno
-        top: {md: '204px', lg: '186px', xl: '222px'},
+        // 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',
         zIndex: -1,
       }}
     >
-      <Box
-        sx={{
-          height: '100%',
-          width: '100%',
-          backgroundColor: 'black',
-          // toto je stary tomaskov stromcek
-          // clip-path: 'polygon(100% 0%, 100% 100%, 45% 100%, 96% 63%, 55% 63%, 96% 30%, 65% 30%)'
-          // toto je novy stromcek od Matusa Libaka
-          clipPath: 'polygon(100% 0, 100% 100%, 90% 100%, 90% 80%, 35% 80%, 90% 35%, 56% 35%)',
-        }}
-      />
+      <Box>
+        <Strom width="100%" height="auto" preserveAspectRatio="xMaxYMin" />
+      </Box>
+      <Box>
+        <Strom width="100%" height="auto" preserveAspectRatio="xMaxYMin" />
+      </Box>
     </Box>
   )
 }
diff --git a/src/svg/strom.svg b/src/svg/strom.svg
index 2eb53c67..f047f039 100644
--- a/src/svg/strom.svg
+++ b/src/svg/strom.svg
@@ -1,5 +1,5 @@
-<svg width="257" height="684" viewBox="0 0 257 684" fill="white" xmlns="http://www.w3.org/2000/svg">
-<path d="M257 0V184H99L257 0Z" fill="white"/>
-<path d="M257 173V412H36L257 173Z" fill="white"/>
-<path d="M257 397V684H0L257 397Z" fill="white"/>
+<svg width="257" height="684" viewBox="0 0 257 684" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M257 0V184H99L257 0Z" fill="currentColor"/>
+<path d="M257 173V412H36L257 173Z" fill="currentColor"/>
+<path d="M257 397V684H0L257 397Z" fill="currentColor"/>
 </svg>