bug fix: menu not visible on small screens

front-ui/Gruntfile.js

@@ -85,7 +85,9 @@ module.exports = function(grunt) {
                 dest: 'build/ribica.css'
             },
             js: {
-                src: ['node_modules/jquery/dist/jquery.min.js', 'node_modules/bootstrap/dist/css/bootstrap.min.js', 'build/ribica.bundle.js'],
+                src: ['node_modules/jquery/dist/jquery.min.js',
+                'build/bootstrap.min.js',
+                'build/ribica.bundle.js'],
                 dest: 'build/ribica.js'
             }
         }

front-ui/app/components/shared/menuItemListComponent.js

@@ -4,6 +4,7 @@ var React = require('react'),
     Backbone = require('backbone'),
     NavigationStore = require('../../stores/navigationStore'),
     MenuItemStore = require('../../stores/menuItemStore'),
+    CartStore = require('../../stores/cartStore.js');
     MenuItemActions = require('../../actions/menuItemActions'),
     NavigationActions = require('../../actions/navigationActions');
 
@@ -18,7 +19,10 @@ var MenuItemListComponent = React.createClass({
     },
 
     getInitialState: function() {
-      return MenuItemStore.getState();
+      var state = MenuItemStore.getState();
+      var cartState = CartStore.getWholeCartState();
+      state.cartCount = cartState;
+      return state;
     },
 
     componentDidMount: function() {
@@ -39,17 +43,9 @@ var MenuItemListComponent = React.createClass({
       NavigationActions.goToMenuItem(menuItem);
       event.preventDefault();
     },
-    //onCategoryClick: function(category, section) {
+    _onCartClick: function() {
-      //MenuItemActions.unsetSectionHover();
+      NavigationActions.goToCart();
-      //NavigationActions.goToCategory(new Category(category), section);
+    },
-      //event.preventDefault();
-    //},
-    //onSubcategoryClick: function(subcategory) {
-      //// implement in navigation actions
-      //// and call
-      //// when ready
-      //return false;
-    //},
     render: function() {
       var self = this;
       var style = {
@@ -62,8 +58,19 @@ var MenuItemListComponent = React.createClass({
         <div className="navbar navbar-default navbar-static-top">
         <div className="container">
           <ul className='nav nav-pills'>
-
+            <div className="navbar-header">
-            <div className="navbar-collapse collapse ">
+              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+          <span className="icon-bar" />
+          <span className="icon-bar" />
+          <span className="icon-bar" />
+        </button>
+        <a className="navbar-brand hidden-lg hidden-md" href="#"><img style={{marginTop: '-4px'}} height={24} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></a>
+        <ul className="mynav hidden-lg hidden-md " style={{listStyle: 'none'}}>
+          <li><a href="#">0,00 KM</a></li>
+          <li onClick={this._onCartClick}><a style={{marginLeft: 10}} className="mybutton" href="#">Završi narudžbu</a></li>
+        </ul>
+      </div>
+    <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>
@@ -109,7 +116,7 @@ var MenuItemListComponent = React.createClass({
           {this.state.menuItems.map(function(menuItem) {
             return <li className="mydropdown menu-large"  onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)}>
                 <a href="#" className="dropdown-toggle " id={menuItem.get('title').toLowerCase()} onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a>
-            <ul className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hdropdown-menu megamenu row hide": "dropdown-menu megamenu row"}>
+            <ul className={menuItem.get('id') !== self.state.hoveredMenuItem ? "dropdown-menu megamenu row hide": "dropdown-menu megamenu row"}>
               {menuItem.get('menu_sub_items').map(function(menuSubItem) {
                 return (
                   <li className="col-sm-3" key={menuSubItem.id}>
@@ -120,7 +127,7 @@ var MenuItemListComponent = React.createClass({
                     return (<li><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubSubItem)}>{menuSubSubItem.title}</a></li>)
                   })}
                 </ul>
-                  </li>
+              </li>
                 )
               })}
             </ul>
@@ -128,6 +135,7 @@ var MenuItemListComponent = React.createClass({
           })}
         </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>
@@ -171,11 +179,32 @@ var MenuItemListComponent = React.createClass({
           <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>
+            return <li className="dropdown menu-large">
+                <a href="#" className="dropdown-toggle " data-toggle="dropdown" role="button" aria-expanded="false">
+                  {menuItem.get('title')} <b className="caret" /> </a>
+                <ul className="dropdown-menu megamenu row">
+
+              {menuItem.get('menu_sub_items').map(function(menuSubItem) {
+                return (
+                  <li className="col-sm-3" key={menuSubItem.id}>
+
+                <ul>
+                  <li className="dropdown-header"><a href="kategorija.html" onClick={self.onMenuItemClick.bind(self, menuSubItem)}><p>{menuSubItem.title}</p></a></li>
+                  {menuSubItem.menu_sub_sub_items.map(function(menuSubSubItem) {
+                    return (<li><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubSubItem)}>{menuSubSubItem.title}</a></li>)
+                  })}
+                </ul>
+                  </li>
+                )
+              })}
+            </ul>
+              </li>
           })}
         </ul>
-      </div>
+        </div>
       </ul>
         </div>
       </div>