Metronic -- Aside
When the secondary aside is enabled and minimized please make it to where when you click on an icon it displays the secondary aside content.
Replies (16)
Hi,
May I know which demo are you referring to?
Regards.
Demo 7 - CRM Dashboard
Hi,
You should refer to Metronic KTToggle API and toggle the aside state through the bottom toggle element's JS object:
var toggleElement = document.querySelector("#kt_aside_toggle);
var toggle = KTToggle.getInstance(toggleElement);
toggle.enable(); // change toggle state to enabled.Add
kt_aside_toggle ID to the aside toggle button.Regards.
I've added this to the button data-kt-toggle="true" data-kt-toggle-state="active" data-kt-toggle-target="body" data-kt-toggle-name="aside-minimize" though it now opens the aside but when I click a different aside nav item it minimizes, then clicking again re-opens. How do I always keep it open when clicking the button? I only want the standard toggle to be able to minimize.
As an example: In demo 7 CRM Dashboard, when I click on any of the following: Projects, Menu, Subscription, Tasks, Notifications, Authors it will change the content on click but will not show the secondary aside bar. I have now made the edits posted above but all they do is toggle it to where if open it will minimize and if closed it will maximize. How do I make it to where the toggle is always an active state (maximized) and only the button by the profile image would minimize and maximize on click?
I can upload a video if needed if this doesn't make sense as to what I'm asking lol.
Sorry for the misleading you. You should use toggle.disable(); instead to always open(disable the toggle mode) the aside.
You can follow below code:
1) Assign kt_aside_toggle id to the aside toggle button.
2) Assign kt_aside_nav_tabs id to the primary aside's tabs(UL) element.
3) Add aside.js in themes/
src/js/layout/aside.js
"use strict";
// Class definition
var KTLayoutAside = function() {
// Private variables
var toggleElement;
var tabsElement;
// Private functions
var handleToggle = function() {
var toggle = KTToggle.getInstance(toggleElement);
var tabs = [].slice.call(tabsElement.querySelectorAll("[data-bs-toggle="tab"]"));
tabs.map(function (tab) {
tab.addEventListener("click", function (event) {
if (toggle.isEnabled() === true) {
toggle.disable();
}
})
});
}
// Public methods
return {
init: function() {
toggleElement = document.querySelector("#kt_aside_toggle");
tabsElement = document.querySelector("#kt_aside_nav_tabs");
if (!toggleElement) {
return;
}
handleToggle();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTLayoutAside.init();
});
// Webpack support
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
module.exports = KTLayoutAside;
}Recompile the assets folder with Gulp or Webpack. For more info about using Metronic please check the Theme Documentation
and Video Tutorials
Regards.
I still don't think I'm doing this correctly. I have assigned the id's as suggested and recompiled the update though it's still not working. Is this correct? Please notice the ul class and the a href linking class
<!--begin::Nav Wrapper-->
<div class="aside-nav d-flex flex-column align-items-center flex-column-fluid pt-0 pb-5" >
<!--begin::Nav scroll-->
<div class="hover-scroll-y" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_aside_logo, #kt_aside_footer" data-kt-scroll-offset="20px">
<!--begin::Nav-->
<ul class="nav flex-column" role="tablist" >
<!--begin::Item-->
<li class="nav-item mb-1" title="Features">
<a href="#%22%20%20class=%22nav-link%20w-40px%20h-40px%20w-lg-50px%20h-lg-50px%20btn%20btn-icon%20btn-color-gray-500%20btn-active-color-primary%20btn-active-light%20active%22%20data-bs-toggle=%22tab%22%20data-bs-target=%22#kt_aside_tab_1%22%20role=%22tab" target="_blank">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2x">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</a>
<!--end::Item-->I still don't think I'm doing this correctly, I have added the id's to the html portion and recompiled the webpack after adding aside.js though it's still not working. Is my html correct? (I put a / through id because it wouldn't let me post it in the code function of this support page.)
<!--begin::Nav-->
<ul class="nav flex-column" role="tablist" i/d="kt_aside_nav_tabs">
<!--begin::Item-->
<li class="nav-item mb-1" title="Features">
<a href="#%22%20i/d=%22kt_aside_toggle%22%20class=%22nav-link%20w-40px%20h-40px%20w-lg-50px%20h-lg-50px%20btn%20btn-icon%20btn-color-gray-500%20btn-active-color-primary%20btn-active-light%20active%22%20data-bs-toggle=%22tab%22%20data-bs-target=%22#kt_aside_tab_1%22%20role=%22tab" target="_blank">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2x">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</a>
<!--end::Item-->Additionally I'm throwing the error var tabs = [].slice.call(tabsElement.querySelectorAll('[data-bs-toggle="tab"]')); tabs.map(function (tab) {
cannot read properties of null (reading 'querySelectorAll')
Okay I got it to work by adding back in: data-kt-toggle="true" data-kt-toggle-state="active" data-kt-toggle-target="body" data-kt-toggle-name="aside-minimize"
Though, now my issue is that it adds data-kt-drawer-aside="on" data-kt-drawer="on" to the body and grays out the content as though it is opening a drawer. Is there anyway to make this not gray out the content section?
When clicking on the same button again it will remove the gray but keep the extended menu open which is perfect.. Though I do not want the first gray to appear.
Wouldn't it be easier to find a way to just remove data-kt-aside-minimize="on" when clicking on any of the aside-nav?
Hi,
Can use this approach also but in this case, you will need to change the aside toggle button state as well. So better to use the toggle button API.
Regards.
Ah okay, is there a way we can fix this issue?
"Though, now my issue is that it adds data-kt-drawer-aside="on" data-kt-drawer="on" to the body and grays out the content as though it is opening a drawer. Is there anyway to make this not gray out the content section?
When clicking on the same button again it will remove the gray but keep the extended menu open which is perfect.. Though I do not want the first gray to appear."
Hi,
Do you mean to remove the drawer overlay? If yes, please use data-kt-drawer-overlay="false" to hide the overlay when drawer. For more info please check: KTDrawer Options.
Regards.
Wow, totally didn't think of that. Works perfectly! Thank you Sean!
My pleasure. All the best with your project 
i want to download demo 3 please help I have bought the metronic last year now the site is downloading just demo 1 but i need demo 3
