issue-333 Fix header navigation hover state

cardano-foundation · Sep 21, 2020 · e72cc18 · e72cc18
1 parent 8164e74
commit e72cc18
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/source/features/navigation/ui/LocalizedLink.tsx b/source/features/navigation/ui/LocalizedLink.tsx
@@ -1,3 +1,4 @@
+import { omit } from 'lodash';
 import Link, { LinkProps } from 'next/link';
 import React from 'react';
 import { useI18nFeature } from '../../i18n/context';
@@ -6,16 +7,20 @@ import styles from './LocalizedLink.module.scss';
 export const LocalizedLink = (
   props: LinkProps & {
     children: React.ReactNode;
+    className?: string;
   }
 ) => {
   const i18n = useI18nFeature();
+  const linkProps = omit(props, ['class', 'className']);
   return (
-    <Link
-      {...props}
-      href={`/[locale]${props.href}`}
-      as={`/${i18n.store.locale}${props.href}`}
-    >
-      <a className={styles.link}>{props.children}</a>
-    </Link>
+    <span className={props.className}>
+      <Link
+        {...linkProps}
+        href={`/[locale]${props.href}`}
+        as={`/${i18n.store.locale}${props.href}`}
+      >
+        <a className={styles.link}>{props.children}</a>
+      </Link>
+    </span>
   );
 };
diff --git a/source/widgets/layout/Header.module.scss b/source/widgets/layout/Header.module.scss
@@ -180,8 +180,11 @@
         text-transform: uppercase;
       }
 
-      .activeTab {
+      .activeTab a {
         color: var(--solid-text-color);
+        &:hover {
+          cursor: default;
+        }
       }
 
       .tabLeftLine {

diff --git a/source/widgets/layout/Header.tsx b/source/widgets/layout/Header.tsx
@@ -24,21 +24,19 @@ export const Header = observer((props: IHeaderProps) => {
       ? styles.enlargedHeaderContainer
       : styles.shrinkedHeaderContainer;
   const headerContainerStyles = cx([styles.headerContainer, brandTypeStyle]);
-  const indexClassName = !navigation?.store.path.includes('stake-pools')
-    ? styles.activeTab
-    : '';
-  const stakePoolsClassName = navigation?.store.path.includes('stake-pools')
-    ? styles.activeTab
-    : '';
+  const isStakePoolsPath = navigation?.store.path.includes('stake-pools');
   const testnetSubtitle =
     environment.CARDANO.NETWORK !== CardanoNetwork.MAINNET ? (
       <div className={styles.networkTitle}>
         {environment.CARDANO.NETWORK.replace(/-/g, ' ')}
       </div>
     ) : null;
   const stakePoolLink = (
-    <LocalizedLink href="/stake-pools">
-      <span className={stakePoolsClassName}>Stake Pools</span>
+    <LocalizedLink
+      href="/stake-pools"
+      className={isStakePoolsPath ? styles.activeTab : ''}
+    >
+      Stake Pools
     </LocalizedLink>
   );
   const stakePoolTriangleStyle = stakePoolLink ? '' : styles.stakePoolTriangle;
@@ -56,7 +54,7 @@ export const Header = observer((props: IHeaderProps) => {
             </LocalizedLink>
           </div>
           <div className={styles.titleContainer}>
-            <LocalizedLink href="">
+            <LocalizedLink href="/">
               <span className={styles.cardanoTitle}>Cardano</span>
               <span className={styles.explorerTitle}>
                 {translate('header.explorer')}
@@ -68,10 +66,11 @@ export const Header = observer((props: IHeaderProps) => {
             <div className={styles.tabs}>
               <div className={styles.tabLeftLine} />
               <div className={styles.tabCircle} />
-              <LocalizedLink href="">
-                <span className={indexClassName}>
-                  {translate('header.epochsBlocks')}
-                </span>
+              <LocalizedLink
+                href="/"
+                className={!isStakePoolsPath ? styles.activeTab : ''}
+              >
+                {translate('header.epochsBlocks')}
               </LocalizedLink>
               <div className={styles.tabCircle} />
               {stakePoolLink}