Menu icon Foundation
I need assistance for using dropdown js , the dropdown menu does not works ..? 

 

 

My Navigation.jsx and webpack.config.js files are as below 

var React = require('react');
var PropTypes = React.PropTypes;
var {IndexLink , Link} = require('react-router');

var Navigation  = React.createClass({

  render: function() {
    return (
      <div>
        <p> Navigation</p>
          <div  className = "top-bar">
                  <div className = "top-bar-left">
                    <ul className="vertical dropdown menu"  data-dropdown-menu style={{maxWidth: 20}} >
                          <li> <a href="#">Site 1</a>
                            <ul className ="vertical menu nested">
                                  <li id="menu-text-color"className = "menu-text">guhan</li>
                                    <li><IndexLink to="/" activeClassName="active" activeStyle={{fontWeight:'bolder'}, {fontStyle:'italic'},{color:'#a8a8a8'}}>Rainbow6Siege</IndexLink></li>
                                    <li><Link to="/gta5" activeClassName="active" activeStyle={{fontWeight:'bold'}, {fontStyle:'italic' },{color:'#a8a8a8'}}>GTA5</Link>  </li>
                                    <li><Link to="/nfs" activeClassName="active" activeStyle={{fontWeight:'bold'}, {fontStyle:'italic' },{color:'#a8a8a8'}}>NeedForSpeed</Link>  </li>
                                    <li><Link to="/about" activeClassName="active" activeStyle={{fontWeight:'bold'}, {fontStyle:'italic' },{color:'#a8a8a8'}}>About</Link> </li>
                            </ul>
                          </li>
                    </ul>
                  </div>
         </div>

    </div>

    );
  }

});

module.exports = Navigation ;
var webpack = require('webpack');

module.exports = {
  entry: [
    'script!jquery/dist/jquery.min.js',
    'script!foundation-sites/dist/js/foundation.min.js',
    './app/app.jsx'
  ],
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery'
    })
  ],
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    alias: {
      Main: 'app/components/Main.jsx',
      applicationStyles: 'app/styles/app.scss',
      Navigation : 'app/components/Navigation.jsx'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      },
    ]
  },

  devtool: 'cheap-module-eval-source-map'
};

 

I need asssitance for using dropdown jsthe dropdown menu does not works .. ?

 

 

My Navigation.jsx and webpack.config.js files are as below 

var React = require('react');
var PropTypes = React.PropTypes;
var {IndexLink , Link} = require('react-router');

var Navigation  = React.createClass({

  render: function() {
    return (
      <div>
        <p> Navigation</p>
          <div  className = "top-bar">
                  <div className = "top-bar-left">
                    <ul className="vertical dropdown menu"  data-dropdown-menu style={{maxWidth: 20}} >
                          <li> <a href="#">Site 1</a>
                            <ul className ="vertical menu nested">
                                  <li id="menu-text-color"className = "menu-text">guhan</li>
                                    <li><IndexLink to="/" activeClassName="active" activeStyle={{fontWeight:'bolder'}, {fontStyle:'italic'},{color:'#a8a8a8'}}>Rainbow6Siege</IndexLink></li>
                                    <li><Link to="/gta5" activeClassName="active" activeStyle={{fontWeight:'bold'}, {fontStyle:'italic' },{color:'#a8a8a8'}}>GTA5</Link>  </li>
                                    <li><Link to="/nfs" activeClassName="active" activeStyle={{fontWeight:'bold'}, {fontStyle:'italic' },{color:'#a8a8a8'}}>NeedForSpeed</Link>  </li>
                                    <li><Link to="/about" activeClassName="active" activeStyle={{fontWeight:'bold'}, {fontStyle:'italic' },{color:'#a8a8a8'}}>About</Link> </li>
                            </ul>
                          </li>
                    </ul>
                  </div>
         </div>

    </div>

    );
  }

});

module.exports = Navigation ;
var webpack = require('webpack');

module.exports = {
  entry: [
    'script!jquery/dist/jquery.min.js',
    'script!foundation-sites/dist/js/foundation.min.js',
    './app/app.jsx'
  ],
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery'
    })
  ],
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    alias: {
      Main: 'app/components/Main.jsx',
      applicationStyles: 'app/styles/app.scss',
      Navigation : 'app/components/Navigation.jsx'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      },
    ]
  },

  devtool: 'cheap-module-eval-source-map'
};