Black Friday Super Sale!
Limited Time 50% OFF for All-Access Plans
Save 50% Now
sidedrawer not closing on navigation click in METRONIC REACT THEME
can anyone guide me how i close side drawer on navigation select because its not working when i click on navigations. i have also attached screenshot. thanks
Replies (11)
Ok, let's have another solution:
Please re-download the v7.2.9 (the last of v7) version, and update all files in the folder. It should help then.
Regards,
Keenthemes support
Hi Adnan,
You can download them from GitHub
https://github.com/KeenthemesHub/Metronic/tree/Metronic-v7
Do you have access to it? Fill out this form to get GitHub access.
https://keenthemes.com/metronic/github
Thanks
I've checked the commits history and your issue was fixed in version v7.2.3
There were changes in the file:
react/demo1/src/_metronic/_assets/js/components/wizard.js
/* eslint-disable */
"use strict";
import { KTUtil } from "./util";
// Component Definition
var KTWizard = function(elementId, options) {
// Main object
var the = this;
var init = false;
// Get element object
var element = KTUtil.getById(elementId);
var body = KTUtil.getBody();
if (!element) {
return;
}
// Default options
var defaultOptions = {
startStep: 1,
clickableSteps: false, // to make steps clickable this set value true and add data-wizard-clickable="true" in HTML for class="wizard" element
navigation: true
};
////////////////////////////
// ** Private Methods ** //
////////////////////////////
var Plugin = {
/**
* Construct
*/
construct: function(options) {
if (KTUtil.data(element).has("wizard")) {
the = KTUtil.data(element).get("wizard");
} else {
// reset menu
Plugin.init(options);
// build menu
Plugin.build();
KTUtil.data(element).set("wizard", the);
}
return the;
},
/**
* Init wizard
*/
init: function(options) {
the.element = element;
the.events = [];
// merge default and user defined options
the.options = KTUtil.deepExtend({}, defaultOptions, options);
// Elements
the.steps = KTUtil.findAll(element, "[data-wizard-type="step"]");
the.btnNext = KTUtil.find(element, "[data-wizard-type="action-next"]");
the.btnPrev = KTUtil.find(element, "[data-wizard-type="action-prev"]");
the.btnSubmit = KTUtil.find(element, "[data-wizard-type="action-submit"]");
// Variables
the.events = [];
the.lastStep = 0;
the.currentStep = 1;
the.newStep = 0;
the.stopped = false;
the.totalSteps = the.steps.length;
// Init current step
if (the.options.startStep > 1) {
Plugin.goTo(the.options.startStep);
}
// Init UI
Plugin.updateUI();
},
/**
* Build Form Wizard
*/
build: function() {
if (the.options.navigation) {
// Next button event handler
KTUtil.addEvent(the.btnNext, "click", function(e) {
e.preventDefault();
// Set new step number
Plugin.setNewStep(Plugin.getNextStep());
// Trigger change event
if (Plugin.eventTrigger("change") !== false) {
Plugin.goTo(Plugin.getNextStep());
}
});
// Prev button event handler
KTUtil.addEvent(the.btnPrev, "click", function(e) {
e.preventDefault();
// Set new step number
Plugin.setNewStep(Plugin.getPrevStep());
// Trigger change event
if (Plugin.eventTrigger("change") !== false) {
Plugin.goTo(Plugin.getPrevStep());
}
});
// Submit button event handler
KTUtil.addEvent(the.btnSubmit, "click", function(e) {
e.preventDefault();
Plugin.eventTrigger("submit");
});
}
if (the.options.clickableSteps === true) {
KTUtil.on(element, "[data-wizard-type="step"]", "click", function() {
var index = KTUtil.index(this) + 1;
if (index !== the.currentStep) {
Plugin.setNewStep(index);
// Trigger change event
if (Plugin.eventTrigger("change") !== false) {
Plugin.goTo(index);
}
}
});
}
},
/**
* Handles wizard click wizard
*/
goTo: function(number) {
// Skip if stopped
if (the.stopped === true) {
the.stopped = false;
return;
}
// Skip if this step is already shown
if (number === the.currentStep || number > the.totalSteps || number < 0) {
return;
}
// Validate step number
number = parseInt(number);
// Set current step
the.lastStep = the.currentStep;
the.currentStep = number;
the.newStep = 0;
Plugin.updateUI();
Plugin.eventTrigger("changed");
return the;
},
/**
* Stop wizard
*/
stop: function() {
the.stopped = true;
},
/**
* Resume wizard
*/
resume: function() {
the.stopped = false;
},
/**
* Check last step
*/
isLastStep: function() {
return the.currentStep === the.totalSteps;
},
/**
* Check first step
*/
isFirstStep: function() {
return the.currentStep === 1;
},
/**
* Check between step
*/
isBetweenStep: function() {
return Plugin.isLastStep() === false && Plugin.isFirstStep() === false;
},
/**
* Update wizard UI after step change
*/
updateUI: function() {
var stepType = "";
var index = the.currentStep - 1;
if (Plugin.isLastStep()) {
stepType = "last";
} else if (Plugin.isFirstStep()) {
stepType = "first";
} else {
stepType = "between";
}
KTUtil.attr(the.element, "data-wizard-state", stepType);
// Steps
var steps = KTUtil.findAll(the.element, "[data-wizard-type="step"]");
if (steps && steps.length > 0) {
for (var i = 0, len = steps.length; i < len; i++) {
if (i == index) {
KTUtil.attr(steps[i], "data-wizard-state", "current");
} else {
if (i < index) {
KTUtil.attr(steps[i], "data-wizard-state", "done");
} else {
KTUtil.attr(steps[i], "data-wizard-state", "pending");
}
}
}
}
// Steps Info
var stepsInfo = KTUtil.findAll(the.element, "[data-wizard-type="step-info"]");
if (stepsInfo &&stepsInfo.length > 0) {
for (var i = 0, len = stepsInfo.length; i < len; i++) {
if (i == index) {
KTUtil.attr(stepsInfo[i], "data-wizard-state", "current");
} else {
KTUtil.removeAttr(stepsInfo[i], "data-wizard-state");
}
}
}
// Steps Content
var stepsContent = KTUtil.findAll(the.element, "[data-wizard-type="step-content"]");
if (stepsContent&& stepsContent.length > 0) {
for (var i = 0, len = stepsContent.length; i < len; i++) {
if (i == index) {
KTUtil.attr(stepsContent[i], "data-wizard-state", "current");
} else {
KTUtil.removeAttr(stepsContent[i], "data-wizard-state");
}
}
}
},
/**
* Get next step number
*/
getNextStep: function() {
if (the.totalSteps >= (the.currentStep + 1)) {
return the.currentStep + 1;
} else {
return the.totalSteps;
}
},
/**
* Get prev step number
*/
getPrevStep: function() {
if ((the.currentStep - 1) >= 1) {
return the.currentStep - 1;
} else {
return 1;
}
},
/**
* Get new step number
*/
getNewStep: function() {
return the.newStep;
},
/**
* Set new step
*/
setNewStep: function(step) {
the.newStep = step;
},
/**
* Trigger events
*/
eventTrigger: function(name, nested) {
//KTUtil.triggerCustomEvent(name);
for (var i = 0; i < the.events.length; i++) {
var event = the.events[i];
if (event.name == name) {
if (event.one == true) {
if (event.fired == false) {
the.events[i].fired = true;
return event.handler.call(this, the);
}
} else {
return event.handler.call(this, the);
}
}
}
},
addEvent: function(name, handler, one) {
the.events.push({
name: name,
handler: handler,
one: one,
fired: false
});
return the;
}
};
//////////////////////////
// ** Public Methods ** //
//////////////////////////
/**
* Set default options
*/
the.setDefaults = function(options) {
defaultOptions = options;
};
/**
* Go to the next step
*/
the.goNext = function() {
return Plugin.goTo(Plugin.getNextStep());
};
/**
* Go to the prev step
*/
the.goPrev = function() {
return Plugin.goTo(Plugin.getPrevStep());
};
/**
* Go to the last step
*/
the.goLast = function() {
return Plugin.goTo(Plugin.getLastStep());
};
/**
* Go to the first step
*/
the.goFirst = function() {
return Plugin.goTo(Plugin.getFirstStep());
};
/**
* Go to a step
*/
the.goTo = function(number) {
return Plugin.goTo(number);
};
/**
* Stop wizard
*/
the.stop = function() {
return Plugin.stop();
};
/**
* Resume wizard
*/
the.resume = function() {
return Plugin.resume();
};
/**
* Get current step number
*/
the.getStep = function() {
return the.currentStep;
};
/**
* Get new step number
*/
the.getNewStep = function() {
return Plugin.getNewStep();
};
/**
* Set new step number
*/
the.setNewStep = function(number) {
Plugin.setNewStep(number);
};
/**
* Check last step
*/
the.isLastStep = function() {
return Plugin.isLastStep();
};
/**
* Check first step
*/
the.isFirstStep = function() {
return Plugin.isFirstStep();
};
/**
* Attach event("change", "changed", "submit")
*/
the.on = function(name, handler) {
return Plugin.addEvent(name, handler);
};
/**
* Attach event that will be fired once
*/
the.one = function(name, handler) {
return Plugin.addEvent(name, handler, true);
};
// Construct plugin
Plugin.construct.apply(the, [options]);
return the;
};
// webpack support
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
// module.exports = KTWizard;
}
export default KTWizard;its also not working with that code. kindly mention what changes do i need to close the drawer on sidebar item select
please check image. drawer is not closing on any navigation item select and on close icon click. please help me out
Which version/demo_number of the Metronic do you use?
I've checked even in the Metronic 7 (current is 8.1.5), and it works fine https://preview.keenthemes.com/metronic/react/demo1/dashboard.
Regards,
Keenthemes support
Hi,
We don't see your screenshot, could you please re-upload it and share the link then?
Regards,
Keenthemes support
