From b75bd8ee141e101fe5d7f6bf0fb4be69da3a2c29 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 10 Apr 2024 13:51:48 +0300
Subject: [PATCH] Layout: fixed header height

---
 apps/web/Components/Layout/Auth.jsx   | 8 +-------
 apps/web/Components/Layout/Header.jsx | 4 ++--
 apps/web/Components/Layout/index.jsx  | 5 ++---
 apps/web/styles/global-style.js       | 5 +++++
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/web/Components/Layout/Auth.jsx b/apps/web/Components/Layout/Auth.jsx
index 45c17a3..98b632b 100644
--- a/apps/web/Components/Layout/Auth.jsx
+++ b/apps/web/Components/Layout/Auth.jsx
@@ -45,13 +45,7 @@ const Logout = styled.a`
 
 function Auth() {
   return (
-    <Flex
-      flexDirection="column"
-      alignItems="flex-end"
-      alignSelf={['flex-start']}
-      justifyContent="space-between"
-      height="100%"
-    >
+    <Flex flexDirection="column" alignItems="flex-end" justifyContent="flex-start" height="100%">
       <User />
       <Logout href="/logout">Выход</Logout>
     </Flex>
diff --git a/apps/web/Components/Layout/Header.jsx b/apps/web/Components/Layout/Header.jsx
index b122daa..3062640 100644
--- a/apps/web/Components/Layout/Header.jsx
+++ b/apps/web/Components/Layout/Header.jsx
@@ -7,6 +7,7 @@ import { Flex } from 'ui/grid';
 const HeaderContent = styled(Flex)`
   flex-direction: row;
   justify-content: space-between;
+  padding: 14px 12px;
 
   background: linear-gradient(
     90deg,
@@ -15,14 +16,13 @@ const HeaderContent = styled(Flex)`
     var(--color-tertiarty) 100%
   );
 
-  padding: 14px 12px;
   ${min('laptop')} {
-    padding: 14px 12px;
     padding-left: 20px;
   }
 `;
 
 const Wrapper = styled.header`
+  height: var(--height-header);
   position: sticky;
   top: 0;
   z-index: 999999;
diff --git a/apps/web/Components/Layout/index.jsx b/apps/web/Components/Layout/index.jsx
index f433777..2a442af 100644
--- a/apps/web/Components/Layout/index.jsx
+++ b/apps/web/Components/Layout/index.jsx
@@ -1,11 +1,10 @@
 import Header from './Header';
-import { Flex } from 'ui/grid';
 
 export default function Layout({ children }) {
   return (
-    <Flex flexDirection="column">
+    <>
       <Header />
       <main>{children}</main>
-    </Flex>
+    </>
   );
 }
diff --git a/apps/web/styles/global-style.js b/apps/web/styles/global-style.js
index 691593a..b95d232 100644
--- a/apps/web/styles/global-style.js
+++ b/apps/web/styles/global-style.js
@@ -1,4 +1,5 @@
 import getColors from './colors';
+import { min } from '@/styles/mq';
 import { createGlobalStyle } from 'styled-components';
 
 const { COLOR_PRIMARY, COLOR_SECONDARY, COLOR_TERTIARTY } = getColors();
@@ -9,6 +10,10 @@ export const GlobalStyle = createGlobalStyle`
     --color-primary: ${COLOR_PRIMARY};
     --color-secondary: ${COLOR_SECONDARY};
     --color-tertiarty: ${COLOR_TERTIARTY};
+    --height-header: 60px;
+    ${min('laptop')} {
+    --height-header: 74px;
+    }
     } 
 
  /* Scroll bar stylings */