psx-app-switcher

psx-app-switcher-menu

The psx-app-switcher-menu is a customizable Angular component that provides a menu with links to other projects or web pages. You can easily integrate it into
your Angular project by following the steps below.

$3

To install the psx-app-switcher, use npm:

``bash
npm install psx-app-switcher
`

$3

1. Import the PsxAppSwitcherModule and the required interfaces in your app.module.ts:

`typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {PsxAppSwitcherModule} from 'psx-app-switcher-menu'; // Import the module
import {PsxAppSwitcherConfig, PsxAppSwitcherMenuItem} from 'psx-app-switcher-menu'; // Import the interfaces

@NgModule({
imports: [
BrowserModule,
PsxAppSwitcherModule // Add the module to imports
],
// ...
})
export class AppModule {
}
`

2. Use the psx-app-switcher component in your template:

`html


`

3. Provide the psXAppSwitcherConfig object in your component:

`typescript
import {Component} from '@angular/core';
import {PsxAppSwitcherConfig, PsxAppSwitcherMenuItem} from 'psx-app-switcher-menu';

@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
psXAppSwitcherConfig: PsxAppSwitcherConfig = {
matIconButton: 'menu', // Replace with the desired Material icon or text
menuItems: [
{
name: 'Project 1',
url: '/project1',
icon: 'folder' // Replace with the desired icon name or leave it empty
},
{
name: 'Project 2',
url: '/project2',
iconClass: 'custom-icon-class' // Add a custom CSS class for the icon or leave it empty
},
// Add more menu items as needed
]
};

// Add other component logic as needed
}
`

$3

The psx-app-switcher component has the following input properties:

| Input | Type | Default | Description |
|------------------------|----------------------|---------|---------------------------------------------------------------------------------------------------|
| menuOpen | boolean | false | Determines whether the menu is open or closed. |
| psXAppSwitcherConfig | PsxAppSwitcherConfig | null | Configuration object for the switcher menu. See the PsxAppSwitcherConfig interface for details. |

The PsxAppSwitcherConfig interface has the following fields:

| Field | Type | Description |
|-----------------|-------------------------------|---------------------------------------------------------------------------------|
| matIconButton | string | The Material icon or text to be displayed inside the trigger button. |
| menuItems | Array | An array of menu items. See the PsxAppSwitcherMenuItem interface for details. |

The PsxAppSwitcherMenuItem interface has the following fields:

| Field | Type | Description |
|-------------|--------------------------------------------------------|-----------------------------------------------------------------------------------------------|
| name | string | The name of the menu item. |
| url | string | The URL to navigate when the menu item is clicked. |
| icon | string | (Optional) The name of the Material icon to be displayed with the menu item. |
| iconClass | string | (Optional) The CSS class to apply for a custom icon style. |
| target | '_blank' | '_self' | '_parent' | '_top' | (Optional) The target attribute for the link when the menu item is clicked. Default: '_blank' |

The psx-app-switcher component also emits an itemSelected event when a menu item is clicked.

$3

You can customize the appearance of the psx-app-switcher-menu component using the provided CSS classes:

| CSS Class | Description |
|---------------------|--------------------------------------------|
| .menu-button | Styles the trigger button for the menu. |
| .menu-button-icon | Styles the icon inside the trigger button. |
| .menu | Styles the menu itself. |
| .menu-item | Styles a menu item. |
| .menu-item-icon | Styles the icon inside a menu item. |

HTML Structure:
`HTML



`
Example:

`scss
/ styles.scss (global) or component-specific styles /

.psx-app-switcher{
.menu-button {
background-color: #2196F3;
color: white;
/ Add more styles as needed /
}

.menu-button-icon {
font-size: 24px;
/ Add more styles as needed /
}

.menu {
border: 1px solid #ccc;
background-color: #f9f9f9;
/ Add more styles as needed /
}

.menu-item {
padding: 8px 16px;
/ Add more styles as needed /
}

.item-icon {
margin-right: 8px;
/ Add more styles as needed /
}
}
``