[www] Add active state to top navigation (gatsbyjs#7933)

* add: active state to top navigation * clean up styles
gold356 · Sep 7, 2018 · f12689b · f12689b
1 parent df1db25
commit f12689b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
@@ -12,28 +12,40 @@ import { vP, vPHd, vPVHd, vPVVHd } from "./gutters"
 const navItemStyles = {
   ...scale(-1 / 3),
   boxSizing: `border-box`,
-  display: `inline-block`,
   color: `inherit`,
   textDecoration: `none`,
   textTransform: `uppercase`,
   letterSpacing: `0.03em`,
   lineHeight: `calc(${presets.headerHeight} - 6px)`,
-  padding: `6px ${rhythm(1 / 4)} 0 ${rhythm(1 / 2)}`,
   position: `relative`,
   top: 0,
   transition: `color .15s ease-out`,
   "&:hover": {
     opacity: 0.8,
   },
+  display: `flex`,
+  alignItems: `center`,
+  justifyContent: `center`,
+  borderBottom: `2px solid transparent`,
 }
+
+const activeNavItemStyles = {
+  // fontWeight: 600,
+  borderBottomColor: `#663399`,
+}
+
+const assignActiveStyles = ({ isPartiallyCurrent }) =>
+  isPartiallyCurrent ? { style: activeNavItemStyles } : {}
+
 const NavItem = ({ linkTo, children }) => (
   <li
     css={{
       display: `inline-block`,
       margin: 0,
+      padding: `6px ${rhythm(1 / 4)} 0 ${rhythm(1 / 2)}`,
     }}
   >
-    <Link to={linkTo} css={navItemStyles}>
+    <Link to={linkTo} getProps={assignActiveStyles} css={navItemStyles}>
       {children}
     </Link>
   </li>
@@ -42,6 +54,7 @@ const NavItem = ({ linkTo, children }) => (
 export default ({ pathname }) => {
   const isHomepage = pathname === `/`
   const isBlog = pathname === `/blog/`
+
   let styles = {}
   if (isHomepage) {
     styles.backgroundColor = `rgba(255,255,255,0)`
@@ -59,6 +72,7 @@ export default ({ pathname }) => {
   }
   const socialIconsStyles = {
     color: colors.lilac,
+    padding: `6px ${rhythm(1 / 4)} 0 ${rhythm(1 / 2)}`,
     [presets.Phablet]: {
       color: isHomepage ? colors.ui.light : false,
     },
@@ -91,7 +105,7 @@ export default ({ pathname }) => {
         borderBottom: `1px solid ${colors.ui.light}`,
         backgroundColor: `rgba(255,255,255,0.975)`,
         position: isHomepage ? `absolute` : `relative`,
-        height: presets.headerHeight,
+        // height: presets.headerHeight,
         zIndex: `2`,
         left: 0,
         right: 0,
@@ -140,8 +154,8 @@ export default ({ pathname }) => {
             display: `none`,
             [presets.Tablet]: {
               display: `flex`,
+              alignItems: `center`,
               margin: 0,
-              padding: 0,
               listStyle: `none`,
               flexGrow: 1,
               overflowX: `auto`,
@@ -196,8 +210,8 @@ export default ({ pathname }) => {
           <div
             css={{
               display: `none`,
-              [presets.Desktop]: { display: !isHomepage && `inline-block` },
-              [presets.Hd]: { display: `inline-block` },
+              [presets.Desktop]: { display: !isHomepage && `flex` },
+              [presets.Hd]: { display: `flex` },
             }}
           >
             <a

diff --git a/www/src/components/sidebar/sidebar.js b/www/src/components/sidebar/sidebar.js
@@ -285,7 +285,7 @@ const styles = {
   },
   sidebarScrollContainerTablet: {
     backgroundColor: colors.ui.whisper,
-    top: `calc(${presets.headerHeight} + ${presets.bannerHeight} - 1px)`,
+    top: `calc(${presets.headerHeight} + ${presets.bannerHeight})`,
   },
   list: {
     margin: 0,

diff --git a/www/src/components/sidebar/sticky-responsive-sidebar.js b/www/src/components/sidebar/sticky-responsive-sidebar.js
@@ -113,7 +113,7 @@ const styles = {
       maxWidth: `none`,
       opacity: `1 !important`,
       pointerEvents: `auto`,
-      top: `calc(${presets.headerHeight} + ${presets.bannerHeight} - 1px)`,
+      top: `calc(${presets.headerHeight} + ${presets.bannerHeight})`,
       width: rhythm(10),
     },
     [presets.Desktop]: {