ToolBar Component

what you can do in this component ?

The ToolbarComponent is a customizable component designed for use in the top navigation bar of your Angular application. It allows you to toggle the sidebar and optionally display an icon. The component also supports dynamic content insertion through slots, giving you flexibility in how the toolbar is structured and what content it holds.

How to use the component in your app :

1. import the component :

import { ToolbarComponent} from '@tradinos/cms-frontend-layout';

1. The selector for component , like it :

<lib-toolbar slot="topContent">
</lib-toolbar>

Features :

• Toggle Sidebar: The toolbar has a built-in method for toggling the visibility of the sidebar by emitting the SidebarEvent.toggle event through an event bus.

• Customizable Icon: The toolbar can optionally display an icon. This behavior is controlled through the withIcon input property.

• Content Slots: The component provides named slots for inserting content in specific areas of the toolbar. These include:

  • topContentStart

  • topContentCenter

  • topContentEnd

  Inputs:

Input	Type	Description
withIcon	boolean	Optional input that determines whether the toolbar should include an icon. Defaults to true.

For example:

To configure the toolbar to display an icon:

<lib-toolbar [withIcon]="true"></lib-toolbar> // to hide icon set it "false"

Methods:

toggleMenu() This method toggles the visibility of the sidebar when triggered. It uses the NgEventBus service to emit a SidebarEvent.toggle event, which controls the sidebar's open/close state.

Slots:

The ToolbarComponent provides three content slots for inserting dynamic content into specific areas of the toolbar. These slots allow you to insert content like logos, titles, or any other UI elements.

Slots:

slot	Descraption
topContentStart	Content that will be displayed at the start of the toolbar.
topContentCenter	Content displayed in the center of the toolbar.
topContentEnd	Content displayed at the end of the toolbar.

For example:

<lib-toolbar [withIcon]="true">
  <div slot="topContentStart">Logo</div>
  <div slot="topContentCenter">Sections </div>
  <div slot="topContentEnd">Theme switcher , language toggle</div>
</lib-toolbar>