Main navigation fixes

src/components/Nav/Header.module.scss

@@ -95,12 +95,11 @@
 
 .usernav {
   display: inline-flex;
-  flex: 0 0 40% !important;
   font-weight: 500;
-  max-width: 400px !important;
+  justify-content: end;
   position: relative;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     flex: 1 !important;
     max-width: 100% !important;
     padding: 0 !important;
@@ -111,7 +110,7 @@
   @include font-size(1.7rem);
   position: relative;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     display: none;
   }
 
@@ -122,18 +121,10 @@
 
 .mainNavigation {
   font-size: 1.4rem !important;
-  margin: 0 !important;
+  margin: 0 0 0 -0.4rem !important;
   opacity: 1;
   transition: opacity 0.3s;
 
-  li {
-    margin-bottom: 0 !important;
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-
   @include media-breakpoint-down(md) {
     background: var(--background-color);
     bottom: 0;
@@ -166,6 +157,24 @@
       }
     }
   }
+
+  a,
+  button {
+    padding: 0 0.4rem;
+  }
+
+  li {
+    margin-bottom: 0 !important;
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+}
+
+.mainNavigationItemActive {
+  background: #000;
+  color: #fff !important;
 }
 
 .headerWithTitle.headerScrolledBottom {
@@ -185,7 +194,7 @@
     padding-left: divide($container-padding-x, 2);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: none;
   }
 }
@@ -302,7 +311,7 @@
   transform: translateY(-50%);
   width: 100%;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     right: 0;
   }
 
@@ -464,7 +473,7 @@
     }
   }
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     margin-left: 0.5em !important;
     margin-right: 0.5em;
     width: auto;
@@ -475,9 +484,10 @@
 
     .textLabel {
       color: var(--link-color);
-      padding: 0;
       display: inline;
+      padding: 0;
       position: relative;
+      white-space: nowrap;
       z-index: 1;
     }
   }

src/components/Nav/Header.tsx

@@ -128,10 +128,10 @@ export const Header = (props: Props) => {
     clearTimeout(timer)
   }
 
-  const hideSubnavigation = () => {
+  const hideSubnavigation = (ev, time = 500) => {
     timer = setTimeout(() => {
       toggleSubnavigation(false)
-    }, 500)
+    }, time)
   }
 
   return (
@@ -160,13 +160,14 @@ export const Header = (props: Props) => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class={clsx('offset-xl-1', styles.mainNavigationWrapper)}>
+          <div class={clsx('col col-md-13 col-lg-12 offset-xl-1', styles.mainNavigationWrapper)}>
             <Show when={props.title}>
               <div class={styles.articleHeader}>{props.title}</div>
             </Show>
             <ul class={clsx('view-switcher', styles.mainNavigation)} classList={{ fixed: fixed() }}>
               <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
                 <a
+                  classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
                   onMouseOut={hideSubnavigation}
                   href={getPagePath(router, 'home')}
@@ -176,6 +177,7 @@ export const Header = (props: Props) => {
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route.startsWith('feed') }}>
                 <a
+                  classList={{ [styles.mainNavigationItemActive]: isFeedVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
                   onMouseOut={hideSubnavigation}
                   href={getPagePath(router, 'feed')}
@@ -185,6 +187,7 @@ export const Header = (props: Props) => {
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'topics' }}>
                 <a
+                  classList={{ [styles.mainNavigationItemActive]: isTopicsVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
                   onMouseOut={hideSubnavigation}
                   href={getPagePath(router, 'topics')}
@@ -193,10 +196,17 @@ export const Header = (props: Props) => {
                 </a>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
-                <a href={getPagePath(router, 'authors')}>{t('community')}</a>
+                <a
+                  onMouseOver={(ev) => hideSubnavigation(ev, 0)}
+                  onMouseOut={(ev) => hideSubnavigation(ev, 0)}
+                  href={getPagePath(router, 'authors')}
+                >
+                  {t('community')}
+                </a>
               </li>
               <li>
                 <a
+                  classList={{ [styles.mainNavigationItemActive]: isKnowledgeBaseVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
                   onMouseOut={hideSubnavigation}
                 >

src/components/Nav/HeaderAuth.tsx

@@ -107,8 +107,8 @@ export const HeaderAuth = (props: Props) => {
   return (
     <ShowOnlyOnClient>
       <Show when={isSessionLoaded()} keyed={true}>
-        <div class={clsx(styles.usernav)}>
+        <div class={clsx('col-sm-6 col-lg-7', styles.usernav)}>
-          <div class={clsx(styles.userControl, styles.userControl)}>
+          <div class={styles.userControl}>
             <Show when={showCreatePostButton()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>

src/styles/app.scss

@@ -577,7 +577,6 @@ figure {
 
 .view-switcher {
   @include font-size(1.4rem);
-
   display: flex;
   flex-wrap: wrap;
   font-weight: 500;