React Navbar Dark Theme

React Router > React Navbar Dark Theme

React router's useLocation to determine pathname and theme

Here we've updated our NavBar to have multiple themes, dark and light. This is not a global theme across our whole app, although we could extend this concept to the rest of the app. We simply determine the theme by using React router's useLocation hook. If the path is / (home), then we want to use the "light" theme, else we are "in the app", and using a dark theme on the NavBar. Try it out- click on "Missions", "Logs" or "Account".

We're handling the different styles by checking the theme prop inside of styled-components. This a prop we pass into each of our components in the NavBar.

useLocation returns an object, and we destructure pathname off of useLocation.

Lesson 15/26

import styled from "styled-components";
import { NavLink, useLocation } from "react-router-dom";
import colors from "../styles/colors";
const { BLACK, WHITE } = colors;

const NavBarOuterContainer = styled.div`
  margin: auto; 
  background-color: ${({ theme }) => (theme === "dark" ? BLACK : WHITE)};
  padding: 20px;
`;

const NavBarInner = styled.div`
  display: flex;
  max-width: 800px; 
  margin: auto; 
`;

const NavItem = styled(NavLink)`
  text-decoration: none;
  color: ${({ theme }) => (theme === "dark" ? WHITE : BLACK)};

  &.active {
    border-bottom: 1px solid
      ${({ theme }) => (theme === "dark" ? WHITE : BLACK)};
  }
`;

const LeftNav = styled.div`
  flex-grow: 1;
  display: flex;

  ${NavItem} {
    margin-right: 10px;
  }
`;

const lightThemePaths = ["/"];

function NavBar() {
  const { pathname } = useLocation();
  const theme = lightThemePaths.includes(pathname) ? "light" : "dark";

  return (
    <NavBarOuterContainer theme={theme}>
      <NavBarInner>
        <LeftNav>
          <NavItem to="/" end theme={theme}>
            Home
          </NavItem>
          <NavItem to="missions" theme={theme}>
            Missions
          </NavItem>
          <NavItem to="logs" theme={theme}>
            Logs
          </NavItem>
        </LeftNav>
        <NavItem to="account" theme={theme}>
          Account
        </NavItem>
      </NavBarInner>
    </NavBarOuterContainer>
  );
}

export default NavBar;

Open Sandbox