@c8y/tutorial 1021.52.0 → 1021.54.2

package/cumulocity.config.ts

@@ -457,6 +457,13 @@ export default {
         description: 'An example for hooking into the left drawer.',
         scope: 'self'
       },
+      {
+        name: 'User menu hook sample',
+        module: 'TutorialUserMenuModule',
+        path: './src/hooks/user-menu-item/user-menu.module.ts',
+        description: 'An example for hooking into the user menu items.',
+        scope: 'self'
+      },
       {
         name: 'Version hook sample',
         module: 'TutorialVersionModule',

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1021.52.0",
+  "version": "1021.54.2",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1021.52.0",
-    "@c8y/ngx-components": "1021.52.0",
-    "@c8y/client": "1021.52.0",
-    "@c8y/bootstrap": "1021.52.0",
+    "@c8y/style": "1021.54.2",
+    "@c8y/ngx-components": "1021.54.2",
+    "@c8y/client": "1021.54.2",
+    "@c8y/bootstrap": "1021.54.2",
     "@angular/cdk": "^18.2.10",
     "ngx-bootstrap": "18.0.0",
     "leaflet": "1.9.4",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1021.52.0",
-    "@c8y/devkit": "1021.52.0"
+    "@c8y/options": "1021.54.2",
+    "@c8y/devkit": "1021.54.2"
   },
   "peerDependencies": {
     "@angular/common": ">=18 <19"

package/src/hooks/user-menu-item/custom-user-menu-factory.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ExtensionFactory, UserMenuItem } from '@c8y/ngx-components';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class CustomUserMenuFactory implements ExtensionFactory<UserMenuItem> {
+  protected userMenuItem: UserMenuItem = {
+    icon: 'user',
+    label: 'Example',
+    click: () => console.log('I am the first example'),
+    priority: 100
+  };
+
+  /**
+   * The Item will be shown in the right drawer user menu.
+   * @description Returns the user menu item. The returned menu item could be a Promise, Observable, or a static object.
+   * @returns The user menu item.
+   */
+  get(): Observable<UserMenuItem> {
+    return of(this.userMenuItem);
+  }
+}

package/src/hooks/user-menu-item/index.ts

@@ -0,0 +1 @@
+export * from './user-menu.module';

package/src/hooks/user-menu-item/user-menu.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { hookUserMenu } from '@c8y/ngx-components';
+import { CustomUserMenuFactory } from './custom-user-menu-factory.service';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [],
+  providers: [
+    // Both examples will be shown in the right drawer user menu. Note that they will not be shown in codex.
+    hookUserMenu(CustomUserMenuFactory),
+    hookUserMenu({
+      icon: 'user',
+      label: 'Example 2',
+      click: () => console.log('I am the second example'),
+      priority: 100
+    })
+  ]
+})
+export class TutorialUserMenuModule {}