Header align fix (#115)

Header align fix

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

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() }}>
+        <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
-          <div class={clsx(styles.mainLogo, 'col-auto', logoColWidth)}>
+          <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>