From 452a2cd5f47a73c8a03945bbf13d559742d1c716 Mon Sep 17 00:00:00 2001
From: Edin Dazdarevic <edin.dazdarevic@gmail.com>
Date: Mon, 13 Apr 2015 23:16:33 +0200
Subject: [PATCH] basic version of the menu

---
 .../shared/menuItemListComponent.js           | 142 +++++++++++++++---
 1 file changed, 117 insertions(+), 25 deletions(-)

diff --git a/front-ui/app/components/shared/menuItemListComponent.js b/front-ui/app/components/shared/menuItemListComponent.js
index 43d421b..72d4d60 100644
--- a/front-ui/app/components/shared/menuItemListComponent.js
+++ b/front-ui/app/components/shared/menuItemListComponent.js
@@ -16,7 +16,7 @@ var MenuItemListComponent = React.createClass({
         this.setState(MenuItemStore.getState());
       }
     },
-  
+
     getInitialState: function() {
       return MenuItemStore.getState();
     },
@@ -41,12 +41,12 @@ var MenuItemListComponent = React.createClass({
     },
     //onCategoryClick: function(category, section) {
       //MenuItemActions.unsetSectionHover();
-      //NavigationActions.goToCategory(new Category(category), section);    
+      //NavigationActions.goToCategory(new Category(category), section);
       //event.preventDefault();
     //},
     //onSubcategoryClick: function(subcategory) {
       //// implement in navigation actions
-      //// and call 
+      //// and call
       //// when ready
       //return false;
     //},
@@ -59,33 +59,125 @@ var MenuItemListComponent = React.createClass({
         position: 'absolute'
       };
       return (
-          <div>
+        <div className="navbar navbar-default navbar-static-top">
+        <div className="container">
           <ul className='nav nav-pills'>
+
+            <div className="navbar-collapse collapse ">
+        <ul className="nav navbar-nav hidden-sm hidden-xs ">
+          {/*
+          <li id="myhome"><a href="home.html">Današnja ponuda</a></li>
+          <li className="mydropdown menu-large">
+            <a href="#" id="beba" className="dropdown-toggle "> Beba </a>
+            <ul className="dropdown-menu megamenu row">
+              <li className="col-sm-3">
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
+                  <li><a href="kategorija.html">Majice</a></li>
+                  <li><a href="kategorija.html">Pantalone</a></li>
+                  <li><a href="kategorija.html">Trenerke</a></li>
+                  <li><a href="kategorija.html">Dukserice</a></li>
+                  <li><a href="kategorija.html">Skafanderi</a></li>
+                  <li><a href="kategorija.html">Kape</a></li>
+                  <li><a href="kategorija.html">Bodići</a></li>
+                  <li><a href="kategorija.html">Pidžame</a></li>
+                  <li><a href="kategorija.html">Ostalo</a></li>
+                </ul>
+              </li>
+              <li className="col-sm-3">
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
+                  <li><a href="kategorija.html">Tekstil</a></li>
+                  <li><a href="kategorija.html">Namještaj</a></li>
+                  <li><a href="kategorija.html">Ostalo</a></li>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
+                </ul>
+              </li>
+              <li className="col-sm-3">
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
+                  <li><a href="kategorija.html">Sokovi</a></li>
+                  <li><a href="kategorija.html">Adaptirana mlijeka</a></li>
+                  <li><a href="kategorija.html">Kašice</a></li>
+                  <li><a href="kategorija.html">Ostalo</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>*/}
+
           {this.state.menuItems.map(function(menuItem) {
+            return <li className="mydropdown menu-large">
+                <a href="#" className="dropdown-toggle " id={menuItem.get('title').toLowerCase()} onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a>
+            <ul className="dropdown-menu megamenu row">
+              {menuItem.get('menu_sub_items').map(function(menuSubItem) {
+                return (
+                  <li className="col-sm-3" key={menuSubItem.id}>
 
-                                                       return (
-                                                         <li key={menuItem.get('id')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)} role='presentation' style={style}>
-                                                         <a href="#"  onClick={self.onMenuItemClick.bind(self, menuItem)} >
-                                                         { menuItem.get('title') }
-
-                                                         </a>
-                                                         <div style={abStyle} className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hide section-cat-list": "section-cat-list"}  >
-
-                                                         <ul  >
-                                                         {menuItem.get('menu_sub_items').map(function(menuSubItem) {
-                                                                                                             return (
-                                                                                                               <li key={menuSubItem.id}>
-                                                                                                               <a onClick={self.onMenuItemClick.bind(self, menuSubItem)}>{menuSubItem.title}</a>
-                                                                                                               </li>
-                                                                                                               )
-                                                                                                           })}
-                                                       </ul>
-                                                         </div>
-                                                         </li>
-                                                         )
-                                                     })}
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html" onClick={self.onMenuItemClick.bind(self, menuSubItem)}><p>{menuSubItem.title}</p></a></li>
+                  <li><a href="kategorija.html">Podkategorija 1</a></li>
+                  <li><a href="kategorija.html">Podkategorija 2</a></li>
+                </ul>
+                  </li>
+                )
+              })}
+            </ul>
+              </li>
+          })}
+        </ul>
+        <ul className="nav navbar-nav hidden-lg hidden-md ">
+          <li id="myhome"><a href="#">Današnja ponuda</a></li>
+          <li className="dropdown menu-large">
+            <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Beba <b className="caret" /> </a>
+            <ul className="dropdown-menu megamenu row">
+              <li className="col-sm-3">
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
+                  <li><a href="kategorija.html">Majice</a></li>
+                  <li><a href="kategorija.html">Pantalone</a></li>
+                  <li><a href="kategorija.html">Trenerke</a></li>
+                  <li><a href="kategorija.html">Dukserice</a></li>
+                  <li><a href="kategorija.html">Skafanderi</a></li>
+                  <li><a href="kategorija.html">Kape</a></li>
+                  <li><a href="kategorija.html">Bodići</a></li>
+                  <li><a href="kategorija.html">Pidžame</a></li>
+                  <li><a href="kategorija.html">Ostalo</a></li>
+                </ul>
+              </li>
+              <li className="col-sm-3">
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
+                  <li><a href="kategorija.html">Tekstil</a></li>
+                  <li><a href="kategorija.html">Namještaj</a></li>
+                  <li><a href="kategorija.html">Ostalo</a></li>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
+                </ul>
+              </li>
+              <li className="col-sm-3">
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
+                  <li><a href="kategorija.html">Sokovi</a></li>
+                  <li><a href="kategorija.html">Adaptirana mlijeka</a></li>
+                  <li><a href="kategorija.html">Kašice</a></li>
+                  <li><a href="kategorija.html">Ostalo</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li><a href="kategorija.html">Dijete</a></li>
+          <li><a href="kategorija.html">Mama</a></li>
+          <li><a href="kategorija.html">Made in BiH</a></li>
+          <li><a href="kategorija.html">Tržišna marka</a></li>
+          {this.state.menuItems.map(function(menuItem) {
+            return <li> <a href="#" onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a></li>
+          })}
+        </ul>
+      </div>
       </ul>
         </div>
+      </div>
         );
     }
 });