Merge pull request #1620 from kdembler/atlas-navbar

always display navigation in the navbar

src/components/Navbar/Navbar.style.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled'
 
 import { Icon, Searchbar } from '@/shared/components'
-import { colors, sizes } from '@/shared/theme'
+import { breakpoints, colors, sizes } from '@/shared/theme'
 import { ReactComponent as UnstyledLogo } from '@/assets/logo.svg'
-
-const BREAKPOINT = '600px'
+import { Link } from '@reach/router'
 
 type NavbarStyleProps = {
   hasFocus: boolean
@@ -22,7 +21,7 @@ export const NavigationContainer = styled.div`
 
   > * + * {
     margin-left: ${sizes.b3}px;
-    @media screen and (min-width: ${BREAKPOINT}) {
+    @media screen and (min-width: ${breakpoints.medium}) {
       margin-left: ${sizes.b6}px;
     }
   }
@@ -34,18 +33,44 @@ export const StyledSearchbar = styled(Searchbar)`
 `
 export const SearchbarContainer = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
 
-  justify-self: center;
   width: 100%;
   max-width: 1156px;
 `
 export const StyledIcon = styled(Icon)`
   color: ${colors.gray[300]};
+`
+export const StyledLink = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  color: ${colors.gray[300]};
+  font-weight: 500;
+
+  text-decoration: none;
+
+  span {
+    display: none;
+    margin-left: ${sizes.b2}px;
+  }
+  @media screen and (min-width: ${breakpoints.medium}) {
+    span {
+      display: inline-block;
+    }
+  }
+
+  &[data-active='true'] {
+    ${StyledIcon} {
+      color: ${colors.gray[100]};
+    }
+    color: ${colors.gray[100]};
+  }
   &:hover {
+    ${StyledIcon} {
+      color: ${colors.white};
+    }
     color: ${colors.white};
-    cursor: pointer;
   }
 `
 
@@ -53,11 +78,11 @@ export const Header = styled.header<NavbarStyleProps>`
   display: grid;
   width: 100%;
 
-  grid-template-columns: ${({ hasFocus }) => (hasFocus ? '1fr' : '1fr 2fr')};
-  padding: ${(props) => (props.hasFocus ? `${sizes.b2}px` : `${sizes.b2}px ${sizes.b4}px`)};
-  @media screen and (min-width: ${BREAKPOINT}) {
-    grid-template-columns: ${({ hasFocus }) => (hasFocus ? '1fr' : '1fr 2fr 1fr')};
-    padding: ${(props) => (props.hasFocus ? `${sizes.b2}px` : `${sizes.b3}px ${sizes.b8}px`)};
+  grid-template-columns: 1fr 2fr;
+
+  padding: ${sizes.b2}px ${sizes.b4}px;
+  @media screen and (min-width: ${breakpoints.medium}) {
+    padding: ${sizes.b2}px ${sizes.b8}px;
   }
   border-bottom: 1px solid ${colors.gray[800]};
   background-color: ${(props) => (props.hasFocus ? colors.gray[900] : colors.black)};

src/components/Navbar/Navbar.tsx

@@ -1,8 +1,16 @@
 import React, { useState } from 'react'
-import { RouteComponentProps, Link, navigate } from '@reach/router'
+import { RouteComponentProps, Link, navigate, LinkGetProps } from '@reach/router'
 
 import routes from '@/config/routes'
-import { Header, NavigationContainer, StyledIcon, StyledSearchbar, SearchbarContainer, Logo } from './Navbar.style'
+import {
+  Header,
+  NavigationContainer,
+  StyledIcon,
+  StyledSearchbar,
+  SearchbarContainer,
+  Logo,
+  StyledLink,
+} from './Navbar.style'
 
 type NavbarProps = RouteComponentProps
 
@@ -36,19 +44,19 @@ const Navbar: React.FC<NavbarProps> = () => {
   }
   return (
     <Header hasFocus={isFocused}>
-      {!isFocused && (
-        <NavigationContainer>
-          <Link to="/">
-            <Logo />
-          </Link>
-          <Link to="/">
-            <StyledIcon name="home" />
-          </Link>
-          <Link to={routes.browse()}>
-            <StyledIcon name="binocular" />
-          </Link>
-        </NavigationContainer>
-      )}
+      <NavigationContainer>
+        <Link to="/">
+          <Logo />
+        </Link>
+        <StyledLink to="/" getProps={isActive}>
+          <StyledIcon name="home" />
+          <span>Home</span>
+        </StyledLink>
+        <StyledLink to={routes.browse()} getProps={isActive}>
+          <StyledIcon name="binocular" />
+          <span>Browse</span>
+        </StyledLink>
+      </NavigationContainer>
       <SearchbarContainer>
         <StyledSearchbar
           placeholder="Search..."
@@ -65,4 +73,8 @@ const Navbar: React.FC<NavbarProps> = () => {
   )
 }
 
+const isActive = ({ isCurrent }: LinkGetProps) => {
+  return isCurrent ? { 'data-active': 'true' } : {}
+}
+
 export default Navbar

src/config/routes.ts

@@ -2,5 +2,5 @@ export default {
   video: (id = ':id') => `/video/${id}`,
   search: (searchStr = ':search') => `/search/${searchStr}`,
   channel: (id = ':id') => `/channel/${id}`,
-  browse: () => 'browse',
+  browse: () => '/browse',
 }