import React from 'react';
import {
  Nav,
  NavItem,
  Navbar,
  Image,
  FormGroup,
  FormControl,
  Button
} from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { IndexLink } from 'react-router';

export default ({header, items}) => (
  <Navbar inverse={true}>
    <Navbar.Header>
      <Navbar.Brand>
        <IndexLink>
          <Image
            className="logo"
            src="https://template.digikala.com/digikala/Image/Public/vtwo/digikala-logo-slogan.png"
          />
        </IndexLink>
      </Navbar.Brand>
    </Navbar.Header>
    <Nav>
      {
        items.map((item, id) => (
          <LinkContainer key={id} to={{ pathname: item.link }}>
            <NavItem>{item.title}</NavItem>
          </LinkContainer>
        ))
      }
    </Nav>
    <Navbar.Form pullLeft>
      <FormGroup>
        <FormControl type="text" placeholder="جستجو..." />
      </FormGroup>
      <Button type="submit">جستجو</Button>
    </Navbar.Form>
  </Navbar>
);
@@ -287,15 +287,25 @@
 erse
-=%7Btrue%7D
+ collapseOnSelect
 %3E%0A  
@@ -561,24 +561,48 @@
 vbar.Brand%3E%0A
+      %3CNavbar.Toggle /%3E%0A
     %3C/Navbar
@@ -618,18 +618,44 @@
     %3CNav
-%3E%0A
+bar.Collapse%3E%0A      %3CNav%3E%0A  
       %7B%0A
@@ -662,16 +662,18 @@
         
+  
 items.ma
@@ -690,16 +690,18 @@
 d) =%3E (%0A
+  
         
@@ -764,24 +764,26 @@
             
+  
 %3CNavItem%3E%7Bit
@@ -812,16 +812,18 @@
         
+ 
+ 
 %3C/LinkCo
@@ -839,16 +839,18 @@
         
+  
 ))%0A     
@@ -854,21 +854,27 @@
     
+  
 %7D%0A    
+ 
+ 
 %3C/Nav%3E%0A
+  
     
@@ -898,24 +898,26 @@
 Left%3E%0A      
+  
 %3CFormGroup%3E%0A
@@ -920,24 +920,26 @@
 up%3E%0A        
+ 
+ 
 %3CFormControl
@@ -973,24 +973,26 @@
 %D8%B3%D8%AA%D8%AC%D9%88...%22 /%3E%0A
+  
       %3C/Form
@@ -1004,16 +1004,18 @@
 %3E%0A      
+  
 %3CButton 
@@ -1043,24 +1043,26 @@
 Button%3E%0A    
+ 
+ 
 %3C/Navbar.For
@@ -1064,16 +1064,39 @@
 r.Form%3E%0A
+    %3C/Navbar.Collapse%3E%0A
   %3C/Navb

make navbar collapsable in small sizes