# README

## Taskbar Plugin

Adds internationalization through (react-intl-redux)\[<https://github.com/ratson/react-intl-redux>].

### Usage

Run the following command in the plugin directoy:

#### Installation

```
npm i --save @blueeast/bluerain-plugin-taskbar
```

Then in your boot function, pass the plugin like this:

```javascript
import BR from '@blueeast/bluerain-os';
import TaskbarPlugin from '@blueeast/bluerain-plugin-taskbar';

BR.boot({
    plugins: [TaskbarPlugin]
})
```

#### Initializing  Plugin

Boot you function like this:

```javascript
BR.boot({

    plugins: [IntlPlugin]
})
```

#### Add Task bar Fillter

```
ctx.Filters.add('bluerain.system.app.layout', function taskbar(schema) {
            schema.children.unshift({ component: withSystemNav(Taskbar) });
            return schema;
        });

ctx.Filters.add('bluerain.redux.reducers.bluerain', function           
AddSystemNavReducers(reducers) {
            return Object.assign({}, reducers, {
                systemNav: reducer
            });
    });
```

#### Adding Translations

```
ctx.Filters.add('bluerain.intl.messages', function eng(messages) {
            const en = require('./lang/en.ts');
            const ur = require('./lang/ur.ts');

            messages.en =  Object.assign(messages.en ? messages.en : {}, en);
            messages.ur = Object.assign(messages.ur ? messages.ur : {}, ur);

            return messages;
        });
```

#### Initial State

```
ctx.Filters.add('bluerain.redux.initialState', function ActivateTaskbar(state) {
            const size = ctx.Plugins.get('window-info');
            const taskbarState = getResponsiveState(size);
            return Object.assign({}, state, {
                bluerain: {
                    systemNav: taskbarState
                }
            });
        });
```

#### Events

Make sure you have access to the BlueRain context. Then do this:

```javascript
 ctx.Events.on('plugin.window_info.resize', (size, prevSize) => {
            const state = getResponsiveState(size);
            ctx.refs.store.dispatch(setStateSystemNav(state));
        });
```

### Components

This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:

* NavAppItem
* NavDividerItem
* NavSpacerItem

### Filters

#### bluerain.intl.messages

This hook gives the ability to add custom intl messages.

**Parameters:**

| Name     | Type   | Description     |
| -------- | ------ | --------------- |
| messages | Object | The messages db |

**Returns:**

| Name     | Type   | Description     |
| -------- | ------ | --------------- |
| messages | Object | The messages db |

**Example:**

This example registers custom english and urdu messages to the system.

```javascript
BR.Filters.add('bluerain.intl.messages', function eng(messages) {
    const en = require('./lang/en.json');
    const ur = require('./lang/ur.json');

    messages.en =  Object.assign(messages.en ? messages.en : {}, en);
    messages.ur = Object.assign(messages.ur ? messages.ur : {}, ur);

    return messages;
});
```

## Bluerain Plugin Task Bar

A plugin for Task Bar that shows Platform Logo and Navigation items. Platform Logo and Navigation items are passed through Bluerain-os configurations. **Extends Plugin**

Adds Task Bar to BlueRain Apps.

### Usage

```
npm i --save @blueeast/bluerain-plugin-taskbar
```

Then in your boot function, pass the plugin like this:

```javascript
import BR from '@blueeast/bluerain-os';
import TaskbarPlugin from '@blueeast/bluerain-plugin-taskbar';

BR.boot({
    plugins: [TaskbarPlugin]
})
```

### API

#### configuration

**Logos**

```
    logos: {
        default: {
      src: "https://s3-us-west-2.amazonaws.com/bluerainimages/mevris-logo.svg",
      type: "image/svg+xml"
    },
        headerLogo: {
      src: "https://s3-us-west-2.amazonaws.com/bluerainimages/mevris-logo-expended.svg",
      type: "image/svg+xml"
    },
        headerLogoSquare: {
      src: "https://s3-us-west-2.amazonaws.com/bluerainimages/mevris-logo-icon.svg",
      type: "image/svg+xml"
    },
    },
```

**NavItems**

```
        'taskbar': {
        showHeader: true,
        items: [{
            type: 'link',
            label: 'Launcher',
            slug: 'launcher',
            iconComponentName: 'rocket',
            path: '/'
          },
          {
            type: 'app',
            label: 'Sites',
            slug: 'sites',
            iconComponentName: 'lightbulb-on-outline',
            path: '/app/sites'
          },
          '->',
          {
            type: 'component',
            component: 'NavUserInfoButton',
            props: {
              items: [{
                title: 'Account Settings',
                path: '/app/settings'
              }, {
                title: 'Logout',
                path: '/logout'
              }]
            }
          }
        ]
      },
```

#### Components

This plugin registers following components in component registry.

* NavAppItem
* NavDividerItem
* NavSpacerItem

#### Filters

* It adds task bar by adding a function in 'bluerain.system.app.layout' filter.
* It adds systemNav reducers in 'bluerain.redux.reducers.bluerain' filter.&#x20;

#### SystemNav

**Actions** Following Actions can be dispatched

* enable,
* disable,
* open,&#x20;
* close,
* toggle,
* dock,
* undock,
* hideLabels,
* showLabels

**Initial State**

```javascript
const initialState =  {
    disabled: false,
    open: true,
    docked: true,
    hideLabels: false,
};
```

#### Responsiveness

This Plugin is responsive on desktop and mobile. It shows only icons on Desktop and icon with Labels on mobile screen.

## bluerain-plugin-taskbar


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blueeast.gitbook.io/bluerain-plugin-taskbar/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.