How to make a dynamic sidebar menu?

[hleder-web]

im trying to use use a json on the place of nav.ts to make the nav itens dynamic depending on the user, but i dont know how can i do it.

interface NavAttributes {
[propName: string]: any;
}
interface NavWrapper {
attributes: NavAttributes;
element: string;
}
interface NavBadge {
text: string;
variant: string;
}
interface NavLabel {
class?: string;
variant: string;
}

export interface NavData {
name?: string;
url?: string;
icon?: string;
badge?: NavBadge;
title?: boolean;
children?: NavData[];
variant?: string;
attributes?: NavAttributes;
divider?: boolean;
class?: string;
label?: NavLabel;
wrapper?: NavWrapper;
}

export const navItems: NavData[] = [
---------json here--------------

];

[xidedix]

Hi @hleder-web
Please take a look here: #143

[Hagith]

The easiest option is to create an Observable which emits current sidebar items depending on your custom logic. Example:

sidebar-service.ts

@Injectable()
class AppSidebarService {
  items$: Observable<INavData[]>;

  constructor(private user: UserService) {
    this.items$ = this.user.state$.pipe(
      map(user => this.getSidebarItems(user)),
    );
  }

  private getSidebarItems(user: User): INavData[] {
    // logic depending on user context
    return [ /* sidebar items */];
  }
}

sidebar.html

<app-sidebar-nav [navItems]="sidebar.items$ | async"></app-sidebar-nav>

[RNKushwaha]

How sidebar.items$ is available in html? In my case it says Property 'sidebar' does not exist on type 'DefaultLayoutComponent'.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions