refactor(header): add highlighter for non 'home' routes

Author: mydearxym

components/Navigator/BriefView.js

@@ -21,7 +21,7 @@ import MainEntries from './MainEntries'
 
 const CommunityLogoHolder = `${ICON_CMD}/community_logo_holder.svg`
 
-const BriefView = ({ community }) => (
+const BriefView = ({ community, curRoute }) => (
   <Wrapper>
     <Popover
       placement="bottomLeft"
@@ -44,7 +44,7 @@ const BriefView = ({ community }) => (
     </Popover>
     <Breadcrumbs>
       <BetaLogo src={`${ICON_CMD}/beta.svg`} />
-      <MainEntries />
+      <MainEntries curRoute={curRoute} />
     </Breadcrumbs>
   </Wrapper>
 )

components/Navigator/DigestView.js

@@ -14,7 +14,7 @@ import {
 
 import MainEntries from './MainEntries'
 
-const DigestView = () => (
+const DigestView = ({ curRoute }) => (
   <Breadcrumbs>
     <Logo />
     <Popover
@@ -31,7 +31,7 @@ const DigestView = () => (
       <LogoText href="/home/posts">coderplanets</LogoText>
     </Popover>
     <BetaLogo src={`${ICON_CMD}/beta.svg`} />
-    <MainEntries />
+    <MainEntries curRoute={curRoute} />
   </Breadcrumbs>
 )
 

components/Navigator/MainEntries.js

@@ -8,14 +8,15 @@ import DiscussLinker from '@components/DiscussLinker'
 import { Wrapper, DotDivider, SiteLink } from './styles/main_entries'
 
 const splitMargin = '8px'
-const MainEntries = () => (
+
+const MainEntries = ({ curRoute: { mainPath } }) => (
   <Wrapper>
     <Link href="/home/posts" prefetch passHref>
       <SiteLink>首页</SiteLink>
     </Link>
     <DotDivider space={splitMargin} />
     <Link href="/communities" prefetch passHref>
-      <SiteLink>社区</SiteLink>
+      <SiteLink active={mainPath === 'communities'}>社区</SiteLink>
     </Link>
     <DotDivider space={splitMargin} />
     <Popover

components/Navigator/index.js

@@ -24,15 +24,15 @@ const Navigator = ({ curCommunity, layout, curRoute }) => {
     R.contains(mainPath, [ROUTE.USER, ROUTE.COMMUNITIES]) ||
     R.contains(subPath, [ROUTE.POST, ROUTE.JOB, ROUTE.VIDEO, ROUTE.REPO])
   ) {
-    return <DigestView />
+    return <DigestView curRoute={curRoute} />
   }
 
   return (
     <React.Fragment>
       {layout === C11N.DIGEST ? (
-        <DigestView />
+        <DigestView curRoute={curRoute} />
       ) : (
-        <BriefView community={curCommunity} />
+        <BriefView community={curCommunity} curRoute={curRoute} />
       )}
     </React.Fragment>
   )

components/Navigator/styles/main_entries.js

@@ -15,6 +15,13 @@ export const DotDivider = styled(DotDividerBase)`
 `
 export const SiteLink = styled.a`
   color: ${theme('banner.desc')};
+  background: ${({ active }) =>
+    active ? theme('banner.numberHoverBg') : 'transparent'};
+  padding: ${({ active }) => (active ? '5px 3px 3px 3px' : '0')};
+  border-bottom: ${({ active }) => (active ? '2px solid' : 'none')};
+  border-bottom-color: ${({ active }) =>
+    active ? theme('tabs.headerActive') : ''};
+
   cursor: pointer;
   &:hover {
     text-decoration: underline;

containers/Header/styles/header.js

@@ -29,7 +29,6 @@ export const InnerWrapper = styled.div`
 export const RouterWrapper = styled.div`
   ${cs.flexGrow('align-center')};
   height: 100%;
-  margin-top: 1px;
 `
 export const HeaderSearchIcon = styled(HeaderSearchSVG).attrs(props => ({
   'data-testid': props.testid,