How do I have the side bar be collapsed and then open on hover. where and how is the collapsed view being computed ?
I am using angular 18 with Metronic 9.
I went through some docs I found online and also went through the html template for demo1. I was wondering how do I get the sidebar to collapse and become the minimied version?
I did follow the integration guide to the dot as mentioned in the documentation.
Am I missing some step?
My hunch is that the KTLayout isn't being initialised properly because it is in a JS file while my project is in typescript.( I do not see any errors though) Is this a possible cause.
Replies (2)
Hi Nandadev M.
Sorry for the delay. Use the HTML structure from the demo1 layout, including the proper toggle button with correct data attributes.
Make sure to include the necessary Metronic scripts in your angular.json file:
"scripts": [
"node_modules/metronic/dist/core/helpers/dom.js",
"node_modules/metronic/dist/core/components/toggle/toggle.js",
"node_modules/metronic/dist/app/layouts/demo1.js"
]Includes the demo1.css styles which contain the sidebar collapse styling and animations.
Hi Nandadev M.
Verify that the Metronic layout’s JS file(s) (containing KTLayout) are added to your angular.json in the scripts section.
Make sure that your sidebar element has the proper IDs, classes, and data attributes. For example:
<div class="aside aside-fixed aside-minimize aside-hoverable" data-kt-drawer="true" ...>
<!-- Sidebar content -->
</div>In your Angular component that manages the layout, make sure to initialize the layout once the view is ready. Example:
import { AfterViewInit, Component } from "@angular/core";
declare var KTLayout: any;
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
if (KTLayout && KTLayout.init) {
KTLayout.init();
}
}
}Make sure your Angular application properly includes and initializes JS code after the Angular view is rendered.
Thanks
