import React, { Component } from 'react'

import './Header.css'

import logo from './logo.svg'

class Header extends Component {
  render() {
    return (
      <div className="Header uk-background-primary uk-light">
        <div className="uk-grid uk-flex-center">
          <div className="uk-width-1-2@l">
            <nav className="uk-navbar ">
              <div className="uk-navbar-item re-navbar-item">
                <a href="/" className="uk-logo">
                  <img src={logo} alt="logo" className="re-logo"/>
                </a>
              </div>
              <div className="uk-navbar-item re-navbar-item uk-width-expand">
                <input type="text" className="uk-input re-navbar-search" placeholder="Quick search" />
              </div>
              <div className="uk-navbar-item re-navbar-item uk-navbar-right">
                <ul className="uk-iconnav">
                  <li><a href="#" className="uk-button" data-uk-icon="icon: plus" title="Add a reminder" data-uk-tooltip /></li>
                  <li><a href="#" className="uk-button" data-uk-icon="icon: cog" title="Settings" data-uk-tooltip /></li>
                  <li><a href="#" className="uk-button" data-uk-icon="icon: sign-out" title="Sign out" data-uk-tooltip /></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    )
  }
}

export default Header

@@ -148,16 +148,30 @@
 eturn (%0A
+      %3Cdiv%3E%0A  
       %3Cd
@@ -224,32 +224,34 @@
 light%22%3E%0A        
+ 
+ 
 %3Cdiv className=%22
@@ -277,32 +277,34 @@
 ter%22%3E%0A          
+  
 %3Cdiv className=%22
@@ -332,16 +332,18 @@
         
+ 
+ 
 %3Cnav cla
@@ -363,16 +363,18 @@
 vbar %22%3E%0A
+  
         
@@ -443,16 +443,18 @@
         
+ 
+ 
 %3Ca href=
@@ -478,16 +478,18 @@
 -logo%22%3E%0A
+  
         
@@ -567,13 +567,17 @@
     
+  
 %3C/a%3E%0A
+  
     
@@ -599,32 +599,34 @@
 %3E%0A              
+  
 %3Cdiv className=%22
@@ -673,16 +673,18 @@
 xpand%22%3E%0A
+  
         
@@ -784,39 +784,43 @@
 %3E%0A              
+  
 %3C/div%3E%0A
+  
               %3Cd
@@ -897,16 +897,18 @@
         
+  
 %3Cul clas
@@ -927,16 +927,18 @@
 onnav%22%3E%0A
+  
         
@@ -1068,32 +1068,34 @@
                 
+  
 %3Cli%3E%3Ca href=%22#%22 
@@ -1192,32 +1192,34 @@
                 
+ 
+ 
 %3Cli%3E%3Ca href=%22#%22 
@@ -1331,14 +1331,18 @@
     
+  
 %3C/ul%3E%0A
+  
     
@@ -1370,16 +1370,18 @@
         
+  
 %3C/nav%3E%0A 
@@ -1381,39 +1381,464 @@
 /nav%3E%0A          
+ 
+ 
 %3C/div%3E%0A
+          %3C/div%3E%0A        %3C/div%3E%0A        %3Cdiv className=%22uk-nav uk-dropdown-nav%22 data-uk-dropdown=%22pos: bottom-center; boundary: .uk-iconnav; boundary-align: true%22%3E%0A          %3Cul className=%22uk-nav uk-nav-default%22%3E%0A            %3Cli%3E%3Ca href=%22#%22%3EHelp &amp; support%3C/a%3E%3C/li%3E%0A            %3Cli%3E%3Ca href=%22#%22%3ESettings%3C/a%3E%3C/li%3E%0A            %3Cli className=%22uk-nav-divider%22 /%3E%0A            %3Cli%3E%3Ca href=%22#%22%3ESign out%3C/a%3E%3C/li%3E%0A          %3C/ul%3E%0A
         %3C/div%3E%0A 

Add dropdown menu