menu item ready

src/app/app.component.html

@@ -1,9 +1,11 @@
 <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu>
 <div class=topMenuBar >
-<kendo-menu [items]="items"> </kendo-menu>
+  <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
+  <kendo-menu [items]="items"> </kendo-menu>
 </div>
 
 <router-outlet></router-outlet>
+
 <div #target class="target">
   <p class="placeholder">Right-click to open Context menu</p>
 </div>

src/app/dist/main-menu-items.js

@@ -3,14 +3,53 @@ exports.__esModule = true;
 exports.mainMenuItems = void 0;
 exports.mainMenuItems = [
     {
-        text: 'Item1a中文',
-        items: [{ text: 'Item1.1', url: '/dashboard' }, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }]
+        text: 'I'
     },
     {
-        text: 'Item2',
-        items: [{ text: 'Item2.1', url: 'https://google.com.au' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
+        text: 'SFM',
+        items: [{ text: 'Summary', url: '/dashboard' }, { text: 'Logout', url: '/login' }]
     },
     {
-        text: 'Item3'
+        text: 'Loans',
+        items: [
+            { text: 'Add', url: 'https://google.com.au' },
+            { text: 'List All', url: 'https://google.com.au' },
+            { text: '--', separator: "true" },
+            { text: 'Export All Loans' },
+            { text: '--', separator: "true" },
+            { text: 'Search' }
+        ]
+    },
+    {
+        text: 'Trails',
+        items: [
+            { text: 'List All', url: 'https://google.com.au' },
+            { text: '--', separator: "true" },
+            { text: 'Import From ...' }
+        ]
+    },
+    {
+        text: 'Clients',
+        items: [
+            { text: 'Add ', url: 'https://google.com.au' },
+            { text: 'List All' },
+            { text: '--', separator: "true" },
+            { text: 'Search' },
+            { text: '--', separator: "true" },
+            { text: 'Broadcast' },
+        ]
+    },
+    {
+        text: 'Brokers',
+        items: [
+            { text: 'Add ', url: 'https://google.com.au' },
+            { text: 'List All' },
+            { text: '--', separator: "true" },
+            { text: 'Search' },
+            { text: '--', separator: "true" },
+            { text: 'Broadcast' },
+            { text: '--', separator: "true" },
+            { text: 'UnPaid' },
+        ]
     }
 ];

src/app/main-menu-items.ts

@@ -1,13 +1,53 @@
 export const mainMenuItems: any[] = [
     {
-        text: 'Item1a中文',
-        items: [{ text: 'Item1.1', url: '/dashboard'}, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }]
+        text: 'I'
     },
     {
-        text: 'Item2',
-        items: [{ text: 'Item2.1', url: 'https://google.com.au' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
+        text: 'SFM',
+        items: [{ text: 'Summary', url: '/dashboard'}, { text: 'Logout', url: '/login'}]
     },
     {
-        text: 'Item3'
+        text: 'Loans',
+        items: [
+            { text: 'Add', url: 'https://google.com.au' }, 
+            { text: 'List All', url: 'https://google.com.au' }, 
+            { text: '--', separator: "true"  }, 
+            { text: 'Export All Loans' }, 
+            { text: '--', separator: "true"  }, 
+            { text: 'Search' }
+        ]
+    },
+    {
+        text: 'Trails',
+        items: [
+            { text: 'List All', url: 'https://google.com.au' }, 
+            { text: '--', separator: "true"  }, 
+            { text: 'Import From ...'}
+        ]
+    },
+    {
+        text: 'Clients',
+        items: [
+            { text: 'Add ', url: 'https://google.com.au' }, 
+            { text: 'List All' }, 
+            { text: '--', separator: "true"  }, 
+            { text: 'Search' },
+            { text: '--', separator: "true"  }, 
+            { text: 'Broadcast' },
+        ]
+    },
+
+    {
+        text: 'Brokers',
+        items: [
+            { text: 'Add ', url: 'https://google.com.au' }, 
+            { text: 'List All' }, 
+            { text: '--', separator: "true"  }, 
+            { text: 'Search' },
+            { text: '--', separator: "true"  }, 
+            { text: 'Broadcast' },
+            { text: '--', separator: "true"  }, 
+            { text: 'UnPaid' },
+        ]
     }
 ];