Multilevel menu ... #31

ngx-multi-level-push-menu/src/multi-level-push-menu/multi-level-push-menu.model.ts

@@ -1,38 +1,41 @@
 export class MultiLevelPushMenuOptions {
     constructor(
-        public collapsed?:              boolean,                             // Initialize menu in collapsed/expanded mode
-        public menuID?:                 string,                              // ID of <nav> element.
-        public wrapperClass?:           string,                              // Wrapper CSS class.
-        public menuInactiveClass?:      string,                              // CSS class for inactive wrappers.
-        public menu?:                   MultiLevelPushMenu,                  // JS array of menu items (if markup not provided).
-        public menuWidth?:              string,                              // Wrapper width (integer, '%', 'px', 'em').
-        public menuHeight?:             string,                              // Menu height (integer, '%', 'px', 'em').
-        public backText?:               string,                              // Text for 'Back' menu item.
-        public backItemClass?:          string,                              // CSS class for back menu item.
-        public backItemIcon?:           string,                              // FontAvesome icon used for back menu item.
-        public groupIcon?:              string,                              // FontAvesome icon used for menu items contaning sub-items.
-        public mode?:                   string,                              // Menu sliding mode?: overlap/cover.
-        public overlapWidth?:           string,                              // Width in px of menu wrappers overlap
-        public preventItemClick?:       boolean,                             // set to false if you do not need event callback functionality per item click
-        public preventGroupItemClick?:  boolean,                             // set to false if you do not need event callback functionality per group item click
-        public direction?:              string,                              // set to 'rtl' for reverse sliding direction
-        public fullCollapse?:           boolean,                             // set to true to fully hide base level holder when collapsed
-        public swipe?:                  string                               // or 'touchscreen', or 'desktop', or 'none'. everything else is concidered as 'none'
-    ) {}
+        public collapsed?: boolean, // Initialize menu in collapsed/expanded mode
+        public menuID?: string, // ID of <nav> element.
+        public wrapperClass?: string, // Wrapper CSS class.
+        public menuInactiveClass?: string, // CSS class for inactive wrappers.
+        public menu?: MultiLevelPushMenu, // JS array of menu items (if markup not provided).
+        public menuWidth?: string, // Wrapper width (integer, '%', 'px', 'em').
+        public menuHeight?: string, // Menu height (integer, '%', 'px', 'em').
+        public backText?: string, // Text for 'Back' menu item.
+        public backItemClass?: string, // CSS class for back menu item.
+        public backItemIcon?: string, // FontAvesome icon used for back menu item.
+        public groupIcon?: string, // FontAvesome icon used for menu items contaning sub-items.
+        public mode?: string, // Menu sliding mode?: overlap/cover.
+        public overlapWidth?: string, // Width in px of menu wrappers overlap
+        public preventItemClick?: boolean, // set to false if you do not need event callback functionality per item click
+        public preventGroupItemClick?: boolean, // set to false if you do not need event callback functionality per group item click
+        public direction?: string, // set to 'rtl' for reverse sliding direction
+        public fullCollapse?: boolean, // set to true to fully hide base level holder when collapsed
+        public swipe?: string // or 'touchscreen', or 'desktop', or 'none'. everything else is concidered as 'none'
+    ) { }
 }
 
 export class MultiLevelPushMenu {
     constructor(
-        public title?: string, 
-        public id?: string, 
-        public icon?: string, 
+        public title?: string,
+        public id?: string,
+        public icon?: string,
         public items?: Array<MultiLevelPushMenuItem>
     ) { }
 }
 
 export class MultiLevelPushMenuItem {
     constructor(
-        public name?: string, 
-        public link?: string
+        public title?: string,
+        public name?: string,
+        public icon?: string,
+        public link?: string,
+        public items?: Array<MultiLevelPushMenuItem>
     ) { }
 }

src/app/app.component.ts

@@ -18,8 +18,19 @@ export class AppComponent implements OnInit {
   constructor(private multiLevelPushMenuService: MultiLevelPushMenuService) {}
 
   ngOnInit() {
-    this.defaultItems.push(new MultiLevelPushMenuItem('Home', 'home'));
-    this.defaultItems.push(new MultiLevelPushMenuItem('About us', 'about-us'));
+    this.defaultItems.push(new MultiLevelPushMenuItem('Home', 'Home', null, 'home'));
+    this.defaultItems.push(new MultiLevelPushMenuItem('About us', 'About us', null, 'about-us'));
+
+    const company = new MultiLevelPushMenuItem('Company', 'Company', null, 'company');
+    company.items = new Array<MultiLevelPushMenuItem>();
+    const companySubMenu = new MultiLevelPushMenuItem('Company', 'Company', null, '#');
+    companySubMenu.items = new Array<MultiLevelPushMenuItem>();
+    companySubMenu.items.push(new MultiLevelPushMenuItem('Contact', 'Contact', null, 'contact'));
+    companySubMenu.items.push(new MultiLevelPushMenuItem('Imprint', 'Imprint',  null, 'imprint'));
+    company.items.push(companySubMenu);
+
+    this.defaultItems.push(company);
+
     const options: MultiLevelPushMenuOptions = new MultiLevelPushMenuOptions();
     options.mode = 'cover';
     options.menu = new MultiLevelPushMenu('Explorer', 'explorer', 'fa fa-reorder', this.defaultItems);