Ngx Menubar component

Simple basic menubar with step-into view display menu items(not tree view display).

This component without size change while state changed, as you can define in your custom parent element as more freedom.

Open Menubar demo preview.

Installation

1. Install: npm i ngx-menubar;

2. Add to module or standalone component:

   import {CyxMenubarComponent} from "ngx-menubar";
      
   @NgModule({
     // ...
     imports: [
       // ...
       CyxMenubarComponent
     ]
   })

   or

   import {CyxMenubarComponent} from "ngx-menubar";
      
   @Component({
     // ...
     imports: [
       CyxMenubarComponent
     ]
     // ...
   })
   export class AppComponent {
      
   }

Example

app.component.css

.container {
  width: 350px;
  height: 500px;
  transition: width .2s ease-out;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, .45);
}

.container.close {
  width: 50px;
}

app.component.html

<div class="container" [class.close]="!menubar.isExpand">
  <cyx-menubar #menubar [datasource]="items">
    <!-- some elements can be here if property 'enableDocPanel' set to true. -->
  </cyx-menubar>
</div>

app.component.ts

@Component({...})
export class AppComponent {
  items: IMenuItem[] = [
    {id: 1, title: 'runtime', icon: 'deployed_code', children: []},
    {
      id: 2, title: 'main', children: [
        {id: 5, title: 'app-routing.module.ts', children: []},
        {id: 6, title: 'app.module.ts', children: []},
        {id: 7, title: 'app.component.ts', children: []}
      ]
    },
    //...
  ]
}

Directives

| Name | Default value | Description | |------------------------------------------------------|-------------------------------|--------------------------------------------------------------| | @Input() title: string | 'Menu' | Default Top menu title. | | @Input() datasource: IMenuItem[] | [] | Menu items. | | @Input() color: string | 'dark' | Theme color, 'dark' or 'light'. | | @Input() minimizable: boolean | true | Enable minimizable or not, if false (expand) will not work. | | @Input() enableDocPanel: boolean | false | Show bottom doc panel. | | @Input() iconParser: Function | (icon: string) => icon | Parse icon which from menu item data field IMenuItem#icon. | | @Input() searchConfig: SearchConfig | {...} | Global menu item search configuration. | | @Output() expand: EventEmitter<boolean> | | Menubar display state change event. | | @Output() itemClick: EventEmitter<IMenuItem> | | Menu item click event. |

Properties

| Name | Default value | Description | |-------------------------|---------------|-------------------------------| | selectedItem: IMenuItem | null | Selected item. | | isExpand: boolean | true | Is menubar expanded or not. | | get isTopMenu | true | Is menu top level. | | get docDisplayClass | 'hide' | Doc panel display class name. |

Appendix

IconParser

Example of parse icon name to icon html.

// menu item data.
// {id: 1, title: '...', icon: 'deployed_code'}

// font icon.
icon => `<span class="material-symbols-sharp">${icon}</span>`
// svg icon.
icon => `<svg viewBox="...">...</svg>`

IMenuItem

Menubar menu item type.

export interface IMenuItem {
  id: number | string;
  title: string;
  icon?: string;
  children?: IMenuItem[];
  data?: { [key: string]: any }
}

SearchConfig

export interface SearchConfig {
  placeHolder?: string;
  predicate?: (keyword: string, item: IMenuItem) => boolean;
}

DefaultSearchConfig

{
  placeHolder: 'search',
    predicate
:
  (keyword, item) => item.title.toLowerCase().includes(keyword.toLowerCase())
}