Topic: Side Nav Not Working

tobyr free asked 5 years ago


Installed via npm with git+http oauth into phoenix webpack application.

Full size everything renders fine, however $(".button-collapse").sideNav(); is not defined, so clicking the side nav button does nothing.

**app.css**
@import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
@import "../node_modules/mdbootstrap/css/bootstrap.min.css";
@import "../node_modules/mdbootstrap/css/mdb.min.css";

**app.js**
import "mdbootstrap/js/jquery-3.4.1.min.js"
import "mdbootstrap/js/popper.min.js"
import "mdbootstrap/js/bootstrap.min.js"
import "mdbootstrap/js/mdb.min.js"

**webpack.config.js**
const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
            name: '[name].[ext]',
            outputPath: '../fonts/',  
            publicPath: '../fonts' 
            }
        }]
      },

      {
        test: /.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          useRelativePath: true,
        },
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
      Waves: 'node-waves',
      _: 'underscore',
      Promise: 'es6-promise'})
  ]
});

Piotr Glejzer staff commented 5 years ago

Does Sidenav only not work or other jquery components in phoenix framework doesn't work too?


tobyr free answered 5 years ago


Copied the Advanced Double Navigation with slim Side-nav nad fixed Navbar: regarding the HTML



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.10
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No