psx-app-switcher v0.4.0

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:

The PsxAppSwitcherConfig interface has the following fields:

The PsxAppSwitcherMenuItem interface has the following fields:

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:

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