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'})
]
});
tobyr free answered 5 years ago
Copied the Advanced Double Navigation with slim Side-nav nad fixed Navbar: regarding the HTML
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Piotr Glejzer staff commented 5 years ago
Does Sidenav only not work or other jquery components in phoenix framework doesn't work too?