@eui/cli 23.0.0-alpha.1 → 23.0.0-alpha.3

package/README.md

@@ -48,13 +48,40 @@ The CLI will prompt you to configure your application:
 
 4. **Dependency Installation**: Choose whether to install dependencies automatically
 5. **Package Manager**: Select Yarn 1.x or Pnpm (experimental)
+6. **eui-skills Setup**: Optionally install [eui-skills](https://sdlc.webcloud.ec.europa.eu/csdr/eui-skills.git) after generation
+   - **Install all** (`--all`): install all skills to all agents without prompts
+   - Or configure individually:
+     - **Agent(s)**: target specific agents (e.g. `cursor`, `claude-code`, or `*` for all)
+     - **Skill(s)**: specific skill names to install (or `*` for all)
+     - **Global**: install at user-level instead of project-level
+     - **Skip confirmations**: auto-confirm all skills prompts
+
+#### CLI Flags
+
+Skip prompts by passing flags directly:
+
+```sh
+# Generate with skills setup (interactive sub-prompts)
+eui-cli new --skills
+
+# Install all skills to all agents without prompts
+eui-cli new --skills --skillsAll
+
+# Target specific agents and skip confirmations
+eui-cli new --skills --skillsAgent "cursor claude-code" --skillsYes
+
+# Install a specific skill globally
+eui-cli new --skills --skillsSkill "pr-review" --skillsGlobal
+```
+
+> Skills sub-options (`--skillsAgent`, `--skillsSkill`, `--skillsGlobal`, `--skillsYes`, `--skillsAll`) require `--skills` to be set, otherwise the CLI will exit with an error.
 
 #### Automated Mode
 
-Generate an application without prompts using a configuration file:
+Generate an application without prompts using a configuration string:
 
 ```sh
-eui-cli new --config <path-to-config> --targetPath <output-directory>
+eui-cli new --config <config-string> --targetPath <output-directory>
 ```
 
 Configuration format:
@@ -70,6 +97,12 @@ Available options:
 - `appOptionsEclTheme`: `ecl-ec`, `ecl-eu`
 - `npmInstall`: `true`, `false`
 - `packageManager`: `yarn`, `pnpm`
+- `skills`: `true`, `false`
+- `skillsAll`: `true`, `false`
+- `skillsAgent`: agent name(s), space-separated or `*`
+- `skillsSkill`: skill name(s), space-separated or `*`
+- `skillsGlobal`: `true`, `false`
+- `skillsYes`: `true`, `false`
 
 ### Build application
 
@@ -82,7 +115,7 @@ Options:
 - `--skipTest` - Skip testing step
 - `--skipCompile` - Skip compilation step
 - `-c, --configuration <config>` - Angular build configuration
-- `--baseHref <href>` - Base href for the application
+- `--baseHref, --base-href <href>` - Base href for the application
 - `--statsJson` - Generate stats.json file
 - `--sourceMap` - Generate source maps
 

package/bin/eui-cli.js

@@ -53,6 +53,15 @@ program
   .description('Generate a new eUI application')
   .option('-c, --config <path>', 'Path to configuration file')
   .option('-t, --targetPath <path>', 'Target path for the generated application')
+  .option('--skills', 'Setup eui-skills after generation')
+  .option('--skillsAgent <agents>', 'Agents to install skills to, requires --skills (e.g. "claude-code cursor", or "*" for all)')
+  .option('--skillsSkill <skills>', 'Skill names to install, requires --skills (e.g. "pr-review commit", or "*" for all)')
+  .option('--skillsGlobal', 'Install skills globally instead of project-level, requires --skills')
+  .option('--skillsYes', 'Skip skills confirmation prompts, requires --skills')
+  .option('--skillsAll', 'Install all skills to all agents without prompts, requires --skills')
+  .addHelpText('after', `
+  Skills sub-options (require --skills):
+    --skillsAgent, --skillsSkill, --skillsGlobal, --skillsYes, --skillsAll`)
   .action((options, command) => handleCommand('./scripts/new', options, command));
 
 program

package/bin/scripts/new.js

@@ -11,6 +11,14 @@ module.exports = function run() {
   utils.logBigTitle('eUI CLI');
   utils.logAccent(` --- v${config.version} ---\n`);
 
+  // Validate skills sub-options dependency
+  const skillsSubOptions = ['skillsAgent', 'skillsSkill', 'skillsGlobal', 'skillsYes', 'skillsAll'];
+  const usedSkillsSubOptions = skillsSubOptions.filter(opt => args[opt] !== undefined && args[opt] !== false);
+  if (usedSkillsSubOptions.length > 0 && !args.skills) {
+    utils.logError(`The following options require --skills to be set: --${usedSkillsSubOptions.join(', --')}`);
+    process.exit(1);
+  }
+
   // remapping config if passed as argument - automated mode
   let inputConfig = config.parseInputConfig(args.config);
 

package/lib/build.js

@@ -63,17 +63,9 @@ const copyAngular = (targetPath, cliConfig, overwrite = true) => {
         utils.copydir(config.angularBaseMobilePath, targetPath, overwrite);
       }
 
-      if (cliConfig.appOptions && cliConfig.appOptions.length !== 0) {
-        cliConfig.appOptions.forEach((item) => {
-          if (item !== 'ecl') {
-            console.log('Applying option : ' + item);
-            utils.copydir(config.optionsPath[item], targetPath, true);
-          }
-        })
-        if (cliConfig.appOptions.includes('ecl') && cliConfig.appOptionsEclTheme) {
-          console.log(`eUI ECL theme selected : ` + cliConfig.appOptionsEclTheme);
-          utils.copydir(config.optionsPath[cliConfig.appOptionsEclTheme], targetPath, true);
-        }
+      if (cliConfig.appOptions === 'ecl') {
+        console.log(`eUI ECL theme selected : ` + cliConfig.appOptionsEclTheme);
+        utils.copydir(config.optionsPath[cliConfig.appOptionsEclTheme], targetPath, true);
       }
 
       if (cliConfig.packageManager === 'pnpm') {

package/lib/cli.js

@@ -4,7 +4,7 @@ const defaultConfig = {
   appName: 'my-app',
   appScope: '@app',
   appType: 'angular',
-  appOptions: [],
+  appOptions: 'eui',
   appOptionsEclTheme: 'ecl-ec',
   appFeatures: [],
   groupId: 'ec.europa.digit',
@@ -12,6 +12,12 @@ const defaultConfig = {
   packageManager: 'yarn',
   npmInstall: true,
   appStart: true,
+  skills: false,
+  skillsAgent: null,
+  skillsSkill: null,
+  skillsGlobal: false,
+  skillsYes: false,
+  skillsAll: false,
 };
 
 module.exports.start = async (options) => {
@@ -83,20 +89,21 @@ module.exports.start = async (options) => {
     }
 
     if (answers.appType !== 'mobile') {
-      const appOptionsPrompt = new MultiSelect({
+      const appOptionsPrompt = new Select({
         name: 'appOptions',
         message: 'Select one or more additional configuration options :',
         choices: [
-          { name: 'eUI ECL app-shell template and configuration - for ec.europa.eu apps', value: 'ecl' }
+          { name: 'eUI default app-shell', value: '' },
+          { name: 'eUI ECL app-shell - for ec.europa.eu apps', value: 'ecl' }
         ],
-        initial: defaultConfig.appOptions,
-        result(names) {
-          return Object.values(this.map(names));
+        initial: 0,
+        result(name) {
+          return this.find(name).value;
         }
       });
       answers.appOptions = await appOptionsPrompt.run();
 
-      if (answers.appOptions && answers.appOptions.includes('ecl')) {
+      if (answers.appOptions === 'ecl') {
         const eclThemePrompt = new Select({
           name: 'appOptionsEclTheme',
           message: 'Select which eUI ECL theme flavor you need :',
@@ -143,6 +150,76 @@ module.exports.start = async (options) => {
       answers.packageManager = await packageManagerPrompt.run();
     }
 
+    const skillsPrompt = new Select({
+      name: 'skills',
+      message: 'Setup eui-skills for this project :',
+      choices: [
+        { name: 'Yes', value: true },
+        { name: 'No', value: false }
+      ],
+      initial: 1,
+      result(name) {
+        return this.find(name).value;
+      }
+    });
+    answers.skills = await skillsPrompt.run();
+
+    if (answers.skills === true) {
+      const skillsAllPrompt = new Select({
+        name: 'skillsAll',
+        message: 'Install all skills to all agents without prompts :',
+        choices: [
+          { name: 'Yes (--all)', value: true },
+          { name: 'No, let me configure', value: false }
+        ],
+        initial: 0,
+        result(name) { return this.find(name).value; }
+      });
+      answers.skillsAll = await skillsAllPrompt.run();
+
+      if (!answers.skillsAll) {
+        const skillsAgentPrompt = new Input({
+          name: 'skillsAgent',
+          message: 'Agents to install to (space-separated, * for all, leave empty for default) :',
+          initial: ''
+        });
+        const agentVal = await skillsAgentPrompt.run();
+        answers.skillsAgent = agentVal.trim() || null;
+
+        const skillsSkillPrompt = new Input({
+          name: 'skillsSkill',
+          message: 'Skill names to install (space-separated, * for all, leave empty for all) :',
+          initial: ''
+        });
+        const skillVal = await skillsSkillPrompt.run();
+        answers.skillsSkill = skillVal.trim() || null;
+
+        const skillsGlobalPrompt = new Select({
+          name: 'skillsGlobal',
+          message: 'Install skills globally (user-level) :',
+          choices: [
+            { name: 'No', value: false },
+            { name: 'Yes', value: true }
+          ],
+          initial: 0,
+          result(name) { return this.find(name).value; }
+        });
+        answers.skillsGlobal = await skillsGlobalPrompt.run();
+
+        const skillsYesPrompt = new Select({
+          name: 'skillsYes',
+          message: 'Skip skills confirmation prompts :',
+          choices: [
+            { name: 'Yes', value: true },
+            { name: 'No', value: false }
+          ],
+          initial: 0,
+          result(name) { return this.find(name).value; }
+        });
+        answers.skillsYes = await skillsYesPrompt.run();
+      }
+    }
+
     const outputConfig = {
       ...defaultConfig,
       ...answers

package/lib/generators.js

@@ -39,6 +39,24 @@ const appGenerate = (options) => {
           config: cliConfig,
           targetPath: options.targetPath,
         });
+      // Setup eui-skills
+      // ----------------
+        if (cliConfig.skills) {
+          utils.logInfo('*****************************************************************');
+          utils.logInfo(' Setting up eui-skills...');
+          utils.logInfo('*****************************************************************');
+          const wd = path.resolve(utils.getAngularPath(options.targetPath, cliConfig.appName, cliConfig.appType, cliConfig.artifactId));
+          const skillsArgs = ['add', 'https://sdlc.webcloud.ec.europa.eu/csdr/eui-skills.git'];
+          if (cliConfig.skillsAll) {
+            skillsArgs.push('--all');
+          } else {
+            if (cliConfig.skillsAgent) skillsArgs.push('--agent', cliConfig.skillsAgent);
+            if (cliConfig.skillsSkill) skillsArgs.push('--skill', cliConfig.skillsSkill);
+            if (cliConfig.skillsGlobal) skillsArgs.push('--global');
+            if (cliConfig.skillsYes) skillsArgs.push('--yes');
+          }
+          execSync(`npx skills ${skillsArgs.join(' ')}`, { cwd: wd, stdio: 'inherit' });
+        }
       // starting app
         if (!cliConfig.appStart || typeof cliConfig.npmInstall !== 'boolean' || !cliConfig.npmInstall) {
           return;

package/lib/skeletons/_angular/base/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "23.0.0-alpha.1",
+    "version": "23.0.0-alpha.3",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -20,7 +20,7 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "23.0.0-alpha.1"
+        "@eui/deps-base": "23.0.0-alpha.3"
     },
     "devDependencies": {
         "npm-run-all": "4.1.5",

package/lib/skeletons/_angular/base/src/app/app.component.spec.ts

@@ -6,10 +6,10 @@ import { routes } from './app.routes';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AppStarterService } from './app-starter.service';
-import { CONFIG_TOKEN, I18nService, I18nState, UserService} from '@eui/core';
+import { CONFIG_TOKEN, I18nService, I18nState, translateConfig, UserService } from '@eui/core';
 import { EuiAppConfig } from '@eui/core';
 import { Observable, of } from 'rxjs';
-import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateService } from '@ngx-translate/core';
 import { describe, it, beforeEach, expect, vi } from 'vitest';
 
 // eslint-disable-next-line
@@ -26,8 +26,8 @@ describe('AppComponent', () => {
         type GetStateReturnType<T> = T extends keyof I18nState ? Observable<I18nState[T]> : Observable<I18nState>;
 
         userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
-        i18nServiceMock = { 
-            init: vi.fn(), 
+        i18nServiceMock = {
+            init: vi.fn(),
             getState: vi.fn(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
                 if (typeof key === 'string') {
                     return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
@@ -41,7 +41,7 @@ describe('AppComponent', () => {
             imports: [
                 RouterModule.forRoot(routes),
                 ...EUI_LAYOUT,
-                TranslateModule.forRoot(),
+                provideTranslateService(translateConfig),
             ],
             providers: [
                 provideHttpClient(withInterceptorsFromDi()),

package/lib/skeletons/_angular/base/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 import { EUI_LANGUAGE_SELECTOR } from '@eui/components/eui-language-selector';
 import { EUI_USER_PROFILE } from '@eui/components/eui-user-profile';
 import { EUI_ICON } from '@eui/components/eui-icon';
@@ -10,7 +10,7 @@ import { EUI_LAYOUT } from '@eui/components/layout';
     selector: 'app-root',
     templateUrl: './app.component.html',
     imports: [
-        TranslateModule,
+        TranslatePipe,
         ...EUI_LAYOUT,
         ...EUI_ICON,
         ...EUI_USER_PROFILE,

package/lib/skeletons/_angular/base/src/app/app.config.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { routes } from './app.routes';
 import { AppStarterService } from './app-starter.service';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateService } from '@ngx-translate/core';
 
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
@@ -75,8 +75,8 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(withInterceptorsFromDi()),
         importProvidersFrom(
             EuiCoreModule.forRoot(),
-            TranslateModule.forRoot(translateConfig)
         ),
+        provideTranslateService(translateConfig),
         AppStarterService,
         provideRouter(routes),
         provideAnimations(),

package/lib/skeletons/_angular/base/src/app/features/home/home.component.ts

@@ -1,12 +1,12 @@
 import { Component, inject } from '@angular/core';
 import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
 import { EUI_PAGE } from '@eui/components/eui-page';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './home.component.html',
     imports: [
-        TranslateModule,
+        TranslatePipe,
         ...EUI_PAGE,
     ],
 })

package/lib/skeletons/_angular/base-mobile/angular.json

@@ -118,18 +118,18 @@
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
                     "options": {
-                        "browserTarget": "app:build"
+                        "buildTarget": "app:build"
                     },
                     "configurations": {
                         "proxy-mock": {
-                            "browserTarget": "app:build:development",
+                            "buildTarget": "app:build:development",
                             "proxyConfig": "proxy-mock.conf.json"
                         },
                         "production": {
-                            "browserTarget": "app:build:production"
+                            "buildTarget": "app:build:production"
                         },
                         "development": {
-                            "browserTarget": "app:build:development"
+                            "buildTarget": "app:build:development"
                         }
                     },
                     "defaultConfiguration": "development"

package/lib/skeletons/_angular/base-mobile/package.json

@@ -1,27 +1,41 @@
 {
     "name": "eui-angular-app",
-    "version": "23.0.0-alpha.1",
+    "version": "23.0.0-alpha.3",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
         "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
-        "start-serve": "eui-scripts serve-app --configuration=proxy-mock",
+        "start-serve": "eui-cli serve-app --configuration=proxy-mock --configEnvTarget=mock",
         "start": "npm-run-all --parallel start-mock-server start-serve",
-        "start-proxy": "eui-scripts serve-app --configuration=proxy",
-        "start-local": "eui-scripts serve-app",
-        "build": "eui-scripts build-app",
-        "build-dev": "eui-scripts build-app --configuration=development --configEnvTarget=DEV",
-        "build-prod": "eui-scripts build-app --configuration=production-optimized --configEnvTarget=PROD",
-        "build-prod-skip-test": "eui-scripts build-app --configuration=production-optimized --configEnvTarget=PROD --skipTest",
-        "build-prod-stats": "eui-scripts build-app --configuration=production-optimized --configEnvTarget=PROD --statsJson",
-        "app:build": "eui-scripts build-app",
-        "app:inject-config": "eui-scripts inject-config-app",
-        "generate-changelog": "eui-scripts generate-changelog"
+        "start-proxy": "eui-cli serve-app --configuration=proxy",
+        "start-local": "eui-cli serve-app",
+        "build": "eui-cli build-app",
+        "build-dev": "eui-cli build-app --configuration=development --configEnvTarget=dev",
+        "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "build-prod-skip-test": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipTest",
+        "build-prod-stats": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "app:build": "eui-cli build-app",
+        "app:inject-config": "eui-cli inject-config-app",
+        "generate-sprite": "eui-cli generate-sprite"
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "18.2.20",
-        "@eui/mobile-core": "18.1.4",
-        "@eui/mobile-styles": "18.1.4"
+        "@eui/deps-base-next": "19.3.17",
+        "@eui/mobile-core": "20.0.2",
+        "@eui/mobile-styles": "20.0.2"
+    },
+    "resolutions": {
+        "js-yaml": ">=3.13.1",
+        "pdfjs-dist": "4.10.38",
+        "tar": ">=6.2.1",
+        "katex": ">=0.16.10",
+        "follow-redirects": ">=1.15.4",
+        "word-wrap": ">=1.2.4",
+        "postcss": ">=8.4.31",
+        "semver": ">=7.5.2",
+        "express": "4.21.2",
+        "path-to-regexp": "1.9.0",
+        "tablesort": "5.6.0",
+        "yargs": "17.7.2"
     }
 }

package/lib/skeletons/_angular/base-mobile/src/app/app-routing.module.ts

@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-    { path: '', redirectTo: 'screen/home', pathMatch: 'full' },
+    { path: '', redirectTo: 'screen/welcome', pathMatch: 'full' },
     { path: 'index.jsp', redirectTo: 'screen/home' },
-    { path: 'screen/home', loadChildren: () => import('./features/home/home.module').then(m => m.Module) },
-    { path: 'screen/module1', loadChildren: () => import('./features/module1/module1.module').then(m => m.Module) },
-    { path: 'screen/module2', loadChildren: () => import('./features/module2/module2.module').then(m => m.Module) },
-    { path: 'screen/about', loadChildren: () => import('./features/about/about.module').then(m => m.Module) },
+    { path: 'screen/home', loadChildren: () => import('./features/home/home.routes').then(m => m.HOME_ROUTES) },
+    { path: 'screen/module1', loadChildren: () => import('./features/module1/module1.routes').then(m => m.MODULE1_ROUTES) },
+    { path: 'screen/about', loadChildren: () => import('./features/about/about.routes').then(m => m.ABOUT_ROUTES) },
+    { path: 'screen/welcome', loadChildren: () => import('./features/welcome/welcome.routes').then(m => m.WELCOME_ROUTES) },
 ];
 
 @NgModule({

package/lib/skeletons/_angular/base-mobile/src/app/app.component.html

@@ -2,7 +2,7 @@
     <euim-sidebar id="mainSidebar">
         <euim-user-profile>
             <euim-user-profile-avatar>
-                <euim-avatar color="branding" size="m" fill="solid">
+                <euim-avatar color="branding">
                     <euim-avatar-icon>
                         <ion-icon name="person-circle"></ion-icon>
                     </euim-avatar-icon>
@@ -21,26 +21,48 @@
             </euim-user-profile-action>
         </euim-user-profile>
         <euim-sidebar-content>
-            <ng-container *ngFor="let menuItem of sidebarItems">
-                <ion-item-divider *ngIf="menuItem?.isSection">
-                    <ion-label>{{menuItem?.label}}</ion-label>
-                </ion-item-divider>
-                <ion-item *ngIf="!menuItem?.isSection"
-                          (click)="onItemClick(menuItem)"
-                          button
-                          lines="none">
-                    <ion-icon [color]="menuItem.iconColor" [name]="menuItem.icon"
-                              slot="start"></ion-icon>
-                    <ion-label>
-                        <div euimDark euimLabel>{{menuItem?.label}}</div>
-                    </ion-label>
-                </ion-item>
-            </ng-container>
+            @for (item of items; track item) {
+                @if (item?.isSection) {
+                    <ion-item-divider>
+                        <ion-label>{{item?.label}}</ion-label>
+                    </ion-item-divider>
+                }
+
+                @if (!item?.isSection) {
+                    <ion-item (click)="onItemClick(item)"
+                              button
+                              lines="none">
+                        <ion-icon [name]="item.icon"
+                                  slot="start"></ion-icon>
+                        <ion-label>
+                            <div euimLabel>{{item?.label}}</div>
+                        </ion-label>
+
+                        @if (item.hasBadge) {
+                            <ion-badge color="light" slot="end">v21</ion-badge>
+                        }
+                    </ion-item>
+                }
+            }
         </euim-sidebar-content>
         <ion-footer>
-            <ion-item>
-                <div euimDark euimLabel euimSizeM>eUl/Mobile</div>
-                <div euimDefault euimLabel euimSizeS slot="end"></div>
+            <ion-item button lines="none" href="screen/about">
+                <ion-icon name="phone-portrait-outline" slot="start"></ion-icon>
+                <ion-label>
+                    <div euimLabel>About</div>
+                </ion-label>
+            </ion-item>
+            <ion-item button lines="none" href="screen/welcome">
+                <ion-icon name="bulb-outline" slot="start"></ion-icon>
+                <ion-label>
+                    <div euimLabel>Welcome</div>
+                </ion-label>
+            </ion-item>
+            <ion-item button lines="none">
+                <ion-icon name="power-outline" slot="start"></ion-icon>
+                <ion-label>
+                    <div euimLabel>Sign Out</div>
+                </ion-label>
             </ion-item>
         </ion-footer>
     </euim-sidebar>

package/lib/skeletons/_angular/base-mobile/src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Store } from '@ngrx/store';
 import {
     getUserState,
     UserState,
@@ -10,6 +9,7 @@ import { NavController } from "@ionic/angular";
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
+    standalone: false,
 })
 export class AppComponent implements OnDestroy {
     userInfos: UserState;
@@ -18,43 +18,42 @@ export class AppComponent implements OnDestroy {
     // an array to keep all subscriptions and easily unsubscribe
     subs: Subscription[] = [];
 
-    public sidebarItems: MenuItem[] = [
+    public items: MenuItem[] = [
         {
             label: 'Home', url: 'screen/home', icon: 'home-outline',
-            iconColor: 'dark',
         },
         {
             isSection: true,
-            label: 'MODULE 1',
+            label: 'DOCUMENTATION',
         },
-        { label: 'Module Page', url: 'screen/module1',
-        icon: 'document-outline', iconColor: 'dark', },
-        { label: 'Page 1', url: 'screen/module1/page1',
-            icon: 'document-outline', iconColor: 'dark', },
-        { label: 'Page 2', url: 'screen/module1/page2',
-            icon: 'document-outline', iconColor: 'dark', },
+        { label: 'Design System', url: 'https://eui.ecdevops.eu/eui-showcase-ux-components-21.x/showcase-design-system/home',
+            icon: 'color-palette-outline', hasBadge: true, },
+        { label: 'Components', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home/components?segment=alphabetical',
+            icon: 'cube-outline', },
+        { label: 'Patterns', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-patterns-20.x/home',
+            icon: 'library-outline', },
+        { label: 'Applications', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-patterns-20.x/home/patterns?segment=apps',
+            icon: 'apps-outline', },
+        { label: 'Plugins & Services', url: 'https://eui.ecdevops.eu/eui-showcase-mobile-20.x/home/plugins-services',
+            icon: 'hardware-chip-outline', },
         {
             isSection: true,
-            label: 'MODULE 2',
+            label: 'SAMPLE CONTENT',
         },
-        { label: 'Module Page', url: 'screen/module2',
-            icon: 'document-outline', iconColor: 'dark', },
+        { label: 'Module Page', url: 'screen/module1',
+            icon: 'document-outline', },
         {
-            label: 'About this app', url: 'screen/about',
-            icon: 'phone-portrait-outline', iconColor: 'dark',
+            label: 'Page One', url: 'screen/module1/page1',
+            icon: 'reader-outline',
+        },
+        {
+            label: 'Page Two', url: 'screen/module1/page2',
+            icon: 'reader-outline',
         },
 
     ];
 
-    constructor(
-        private store: Store<any>,
-        private navCtrl:NavController,
-    ) {
-            this.userState = this.store.select(getUserState);
-            this.subs.push(this.userState.subscribe((user: UserState) => {
-                this.userInfos = { ...user };
-            }));
-    }
+    constructor(private navCtrl:NavController,) {}
 
     ngOnDestroy() {
         this.subs.forEach((s: Subscription) => s.unsubscribe());
@@ -78,4 +77,5 @@ export interface MenuItem {
     label: string;
     url?: string;
     isSection?: boolean;
+    hasBadge?: boolean;
 }