From b6ab772d18d91e91d82278e1eba04c4b8b893d6b Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 26 Jun 2023 17:28:36 +0300
Subject: [PATCH] Header align fix (#115)

Header align fix
---
 src/components/Nav/Header.module.scss | 15 ++-------------
 src/components/Nav/Header.tsx         |  8 ++++----
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 56d2635c..038ad964 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -47,19 +47,15 @@
   color: var(--default-color);
   flex-wrap: nowrap !important;
   justify-content: flex-start;
-  margin: 0;
 
   .fixed & {
     left: 0;
     position: fixed;
     right: 0;
     top: 0;
-    padding: 0 divide($container-padding-x, 2);
+    margin: 0;
+    padding: 0;
     z-index: 9;
-
-    @include media-breakpoint-up(sm) {
-      padding: 0 $container-padding-x;
-    }
   }
 }
 
@@ -68,15 +64,10 @@
   color: var(--default-color);
   display: inline-flex;
   height: 56px;
-  padding: 0;
   position: relative;
   text-align: center;
   z-index: 9;
 
-  @include media-breakpoint-up(sm) {
-    padding: 0 6rem 0 0;
-  }
-
   img {
     height: 20px;
     object-fit: contain;
@@ -121,7 +112,6 @@
 .mainNavigationWrapper {
   @include font-size(1.7rem);
 
-  padding-left: 0;
   position: relative;
 
   @include media-breakpoint-down(md) {
@@ -190,7 +180,6 @@
   display: inline-flex;
   float: right;
   padding-left: 0;
-  padding-right: 0;
 
   @include media-breakpoint-up(sm) {
     padding-left: divide($container-padding-x, 2);
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 5bca66f4..d4b13aef 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -85,7 +85,7 @@ export const Header = (props: Props) => {
     props.scrollToComments(value)
   }
 
-  const logoColWidth = page().path === '/' ? 'col-md-6' : 'col-md-5'
+  const logoColWidth = page().path === '/' ? 'col-md-6' : 'col-md-5 col-xl-4'
 
   return (
     <header
@@ -103,13 +103,13 @@ export const Header = (props: Props) => {
       </Modal>
 
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
-        <nav class={clsx(styles.headerInner, 'row')} classList={{ fixed: fixed() }}>
-          <div class={clsx(styles.mainLogo, 'col-auto', logoColWidth)}>
+        <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
+          <div class={clsx(logoColWidth, 'col-auto', styles.mainLogo)}>
             <a href={getPagePath(router, 'home')}>
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class={clsx(styles.mainNavigationWrapper, 'col-md-6')}>
+          <div class={clsx('col', styles.mainNavigationWrapper, { ['offset-xl-1']: page().path !== '/' })}>
             <Show when={props.title}>
               <div class={styles.articleHeader}>{props.title}</div>
             </Show>