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.

Installation

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

npm install psx-app-switcher

Usage

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

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:

<psx-app-switcher [psXAppSwitcherConfig]="psXAppSwitcherConfig"></psx-app-switcher>

3. Provide the psXAppSwitcherConfig object in your component:

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
}

API

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.

Styling

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:

<div class="psx-app-switcher">
	<button class="menu-button">
		<mat-icon class="menu-button-icon"></mat-icon>
	</button>
	<mat-menu class="menu">
		<button>
			<span class="menu-item">
				<mat-icon class="menu-item-icon"></mat-icon>
			</span>
		</button>
	</mat-menu>
</div>

Example:

/* 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 */
    }
}