//@flow
import React from "react";

import { Ul, Li, Nav } from "./styled-components";
import { ListItem } from "./ListItem";

export const DesktopNav = () => (
  <Nav>
    <Ul>
      <ListItem>Projects</ListItem>
      <ListItem>About</ListItem>
      <Li>Downloads</Li>
      <ListItem>Contact</ListItem>
    </Ul>
  </Nav>
);

//@flow
import React from "react";

import { Ul, Li, Nav } from "./styled-components";
import { Highlight } from "../../../../../elements/highlight";
import { Chevron } from "../../../../../elements/chevron";
import theme from "../../../../../global/style/mainTheme";

export const DesktopNav = props => (
  <Nav>
    <Ul>
      <Li><Highlight {...props} url="/">Projects</Highlight></Li>
      <Li><Highlight {...props}>About</Highlight></Li>
      <Li>
        <Highlight highlightColor="transparent" {...props}>
          <Chevron {...props}>Download</Chevron>
        </Highlight>
      </Li>
      <Li><Highlight {...props}>Contact</Highlight></Li>
    </Ul>
  </Nav>
);

Add Highlight and Chevron to desktop-nav items
Add Highlight and Chevron to desktop-nav items

