Not kod fazlalığı olmasın diye entegre ettiğim kısımlar yok fakat kodlarda bir sorun yok sadece menu.ts yi menus.service.ts ye çevirip menü sistemini dinamik yaptığımda patlıyorum
https://ibb.co/TvLLfYF / saçmalık olan menü resmi
menu.model:
export interface MenuItem {
id?: number;
label?: string;
icon?: string;
link?: string;
expanded?: boolean;
subItems?: any;
isTitle?: boolean;
badge?: any;
parentId?: number;
}menu.tsimport { MenuItem } from './menu.model';
export const MENU: MenuItem[] = [
{
label: 'Main',
isTitle: true,
},
{
label: 'Dashboard',
icon: 'home',
link: '/dashboard',
},
{
label: 'İnstagram',
icon: 'instagram',
subItems: [
{
label: 'All Services',
link: 'media/instagram/otherservices',
},
{
label: 'Followers',
link: 'media/instagram/followers',
},
{
label: 'Likes/Dislikes',
link: 'media/instagram/likes',
},
{
label: 'Views',
link: 'media/instagram/views',
},
{
label: 'Other Services',
link: 'media/instagram/otherservices',
},
],
},
];sidebar.component.tsimport {
Component,
OnInit,
ViewChild,
ElementRef,
AfterViewInit,
Renderer2,
Inject,
} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import MetisMenu from 'metismenujs';
import { MenuItem } from './menu.model';
import { Router, NavigationEnd } from '@angular/router';
import { MenusService } from './menus.service';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent implements OnInit, AfterViewInit {
@ViewChild('sidebarToggler') sidebarToggler: ElementRef;
menuItems: MenuItem[] = [];
@ViewChild('sidebarMenu') sidebarMenu: ElementRef;
constructor(
@Inject(DOCUMENT) private document: Document,
private renderer: Renderer2,
private menusService: MenusService,
router: Router
) {
router.events.forEach((event) => {
if (event instanceof NavigationEnd) {
/**
* Activating the current active item dropdown
*/
this._activateMenuDropdown();
/**
* closing the sidebar
*/
if (window.matchMedia('(max-width: 991px)').matches) {
this.document.body.classList.remove('sidebar-open');
}
}
});
}
ngOnInit(): void {
this.menuItems = this.menusService.MENU;
/**
* Sidebar-folded on desktop (min-width:992px and max-width: 1199px)
*/
const desktopMedium = window.matchMedia(
'(min-width:992px) and (max-width: 1199px)'
);
desktopMedium.addEventListener('change', () => {
this.iconSidebar;
});
this.iconSidebar(desktopMedium);
}
ngAfterViewInit() {
// activate menu item
new MetisMenu(this.sidebarMenu.nativeElement);
this._activateMenuDropdown();
}
/**
* Toggle sidebar on hamburger button click
*/
toggleSidebar(e: Event) {
this.sidebarToggler.nativeElement.classList.toggle('active');
this.sidebarToggler.nativeElement.classList.toggle('not-active');
if (window.matchMedia('(min-width: 992px)').matches) {
e.preventDefault();
this.document.body.classList.toggle('sidebar-folded');
} else if (window.matchMedia('(max-width: 991px)').matches) {
e.preventDefault();
this.document.body.classList.toggle('sidebar-open');
}
}
/**
* Toggle settings-sidebar
*/
toggleSettingsSidebar(e: Event) {
e.preventDefault();
this.document.body.classList.toggle('settings-open');
}
/**
* Open sidebar when hover (in folded folded state)
*/
operSidebarFolded() {
if (this.document.body.classList.contains('sidebar-folded')) {
this.document.body.classList.add('open-sidebar-folded');
}
}
/**
* Fold sidebar after mouse leave (in folded state)
*/
closeSidebarFolded() {
if (this.document.body.classList.contains('sidebar-folded')) {
this.document.body.classList.remove('open-sidebar-folded');
}
}
/**
* Sidebar-folded on desktop (min-width:992px and max-width: 1199px)
*/
iconSidebar(mq: MediaQueryList) {
if (mq.matches) {
this.document.body.classList.add('sidebar-folded');
} else {
this.document.body.classList.remove('sidebar-folded');
}
}
/**
* Returns true or false if given menu item has child or not
* @param item menuItem
*/
hasItems(item: MenuItem) {
return item.subItems !== undefined ? item.subItems.length > 0 : false;
}
/**
* Reset the menus then hilight current active menu item
*/
_activateMenuDropdown() {
this.resetMenuItems();
this.activateMenuItems();
}
/**
* Resets the menus
*/
resetMenuItems() {
const links = document.getElementsByClassName('nav-link-ref');
for (let i = 0; i < links.length; i++) {
const menuItemEl = links[i];
menuItemEl.classList.remove('mm-active');
const parentEl = menuItemEl.parentElement;
if (parentEl) {
parentEl.classList.remove('mm-active');
const parent2El = parentEl.parentElement;
if (parent2El) {
parent2El.classList.remove('mm-show');
}
const parent3El = parent2El?.parentElement;
if (parent3El) {
parent3El.classList.remove('mm-active');
if (parent3El.classList.contains('side-nav-item')) {
const firstAnchor = parent3El.querySelector('.side-nav-link-a-ref');
if (firstAnchor) {
firstAnchor.classList.remove('mm-active');
}
}
const parent4El = parent3El.parentElement;
if (parent4El) {
parent4El.classList.remove('mm-show');
const parent5El = parent4El.parentElement;
if (parent5El) {
parent5El.classList.remove('mm-active');
}
}
}
}
}
}
/**
* Toggles the menu items
*/
activateMenuItems() {
const links: any = document.getElementsByClassName('nav-link-ref');
let menuItemEl = null;
for (let i = 0; i < links.length; i++) {
// tslint:disable-next-line: no-string-literal
if (window.location.pathname === links[i]['pathname']) {
menuItemEl = links[i];
break;
}
}
if (menuItemEl) {
menuItemEl.classList.add('mm-active');
const parentEl = menuItemEl.parentElement;
if (parentEl) {
parentEl.classList.add('mm-active');
const parent2El = parentEl.parentElement;
if (parent2El) {
parent2El.classList.add('mm-show');
}
const parent3El = parent2El.parentElement;
if (parent3El) {
parent3El.classList.add('mm-active');
if (parent3El.classList.contains('side-nav-item')) {
const firstAnchor = parent3El.querySelector('.side-nav-link-a-ref');
if (firstAnchor) {
firstAnchor.classList.add('mm-active');
}
}
const parent4El = parent3El.parentElement;
if (parent4El) {
parent4El.classList.add('mm-show');
const parent5El = parent4El.parentElement;
if (parent5El) {
parent5El.classList.add('mm-active');
}
}
}
}
}
}
}Yukardaki menu.ts yapısında olay bitiyor menu.ts bu yapıda kaldığında menülerin toggle işlemi çalışıyor fakat menus.service.ts yapısına getirmek istediğimde (amacım menüleri db den çekip dinamip yapmak) menüler açık kalıyor 
Anlamadığım kısım burda-----------------------------------------------
menus.service.ts
// menus.service.ts
import { Injectable } from '@angular/core';
import { SocialMediaCacheService } from 'src/app/services/cache/socialMediaCache.service';
import { MediaSubCategoryCacheService } from 'src/app/services/cache/mediaSubCategoryCache.service';
import { MenuItem } from './menu.model';
@Injectable({
providedIn: 'root',
})
export class MenusService {
private socialMediaList: any[]; // Assuming the type, please replace it with the actual type
private mediaSubCategoryList: any[]; // Assuming the type, please replace it with the actual type
constructor(
private socialMediaCacheService: SocialMediaCacheService,
private mediaSubCategoryCacheService: MediaSubCategoryCacheService
) {}
async loadMenuItems(): Promise<MenuItem[]> {
const staticMenus: MenuItem[] = [
{
label: 'Dashboard',
icon: 'home',
link: '/dashboard',
},
];
this.socialMediaList =
await this.socialMediaCacheService.getAllSocialMedia();
const dynamicMenus: MenuItem[] = await Promise.all(
this.socialMediaList.map(async (socialMedia) => {
let icon;
if (socialMedia.socialMediaName.toLowerCase() == 'tiktok') {
icon = 'music';
} else if (socialMedia.socialMediaName.toLowerCase() == 'facebook') {
icon = 'facebook';
} else if (socialMedia.socialMediaName.toLowerCase() == 'twitter') {
icon = 'twitter';
} else if (socialMedia.socialMediaName.toLowerCase() == 'spotify') {
icon = 'rss';
} else if (socialMedia.socialMediaName.toLowerCase() == 'telegram') {
icon = 'send';
} else {
icon = socialMedia.socialMediaName.toLowerCase();
}
this.mediaSubCategoryList =
await this.mediaSubCategoryCacheService.getAllMediaSubCategory(
socialMedia.id
);
const subItems: MenuItem[] = this.mediaSubCategoryList.map(
(subCategory) => ({
id: null,
label: subCategory.mediaSubCategoryName,
link: `/media/${socialMedia.socialMediaName.toLowerCase()}/${subCategory.mediaSubCategoryName.toLowerCase()}`,
parentId: 0 as number,
expanded: false,
isTitle: false,
subItems: [],
badge: null,
})
);
return {
label: socialMedia.socialMediaName,
icon: icon,
link: '/media/' + socialMedia.socialMediaName.toLowerCase(),
subItems: [...this.getStaticSubMenus(socialMedia), ...subItems], // Add static sub-menus
};
})
);
return [...staticMenus, ...dynamicMenus];
}
private getStaticSubMenus(socialMedia: any): MenuItem[] {
// Add your static sub-menus here based on the social media type
// Example for Instagram
return [
{
label: 'All Services',
link: '/media/' + socialMedia.socialMediaName.toLowerCase(),
},
];
}
}Not kod fazlalığı olmasın diye entegre ettiğim kısımlar yok fakat kodlarda bir sorun yok sadece menu.ts yi menus.service.ts ye çevirip menü sistemini dinamik yaptığımda patlıyorum