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

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

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 && (

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>

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