//@flow
import React from "react";

import { Ul, Li, Nav } from "./styled-components";
import { LinkedInIcon } from "../../../../elements/linkedin-icon";
import { OctocatIcon } from "../../../../elements/octocat-icon";
import { Highlight } from "../../../../elements/highlight";
import { Chevron } from "../../../../elements/chevron";
import Bubble from "../../../../elements/bubble";
import theme from "../../../../global/style/mainTheme";

export const MainNav = (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>
          <Bubble
            {...props}
            textItems={[
              { label: "Resume", target: "#" },
              { label: "Portfoliontopolov", target: "#" }
            ]}
          />
        </Highlight>
      </Li>
      <Li><Highlight {...props}>Contact</Highlight></Li>
    </Ul>
    <Ul>
      <Li><LinkedInIcon /></Li>
      <Li><OctocatIcon /></Li>
    </Ul>

  </Nav>
);

//@flow
import React from "react";

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

export const MainNav = (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>
    <Ul>
      <Li><LinkedInIcon /></Li>
      <Li><OctocatIcon /></Li>
    </Ul>

  </Nav>
);

--- 
+++ 
@@ -6,6 +6,7 @@
 import { OctocatIcon } from "../../../../elements/octocat-icon";
 import { Highlight } from "../../../../elements/highlight";
 import { Chevron } from "../../../../elements/chevron";
+import Bubble from "../../../../elements/bubble";
 import theme from "../../../../global/style/mainTheme";
 
 export const MainNav = (props: {}) => (
@@ -16,10 +17,16 @@
       <Li>
         <Highlight highlightColor="transparent" {...props}>
           <Chevron {...props}>Download</Chevron>
+          <Bubble
+            {...props}
+            textItems={[
+              { label: "Resume", target: "#" },
+              { label: "Portfoliontopolov", target: "#" }
+            ]}
+          />
         </Highlight>
       </Li>
       <Li><Highlight {...props}>Contact</Highlight></Li>
-
     </Ul>
     <Ul>
       <Li><LinkedInIcon /></Li>
Include Bubble dropdown in navigation

