# SiB Notifications

sib-notifications is a component that displays all elements of an inbox, i.e. a notification container.

When the user clicks one of the notifications, a 'navigate' event is triggered with the object of the notification given as the resource parameter.

The component listens to 'read' events. These events details contain a resource. When such an event is triggered, it sets all notifications with that resource as read, and saves these notifications back to the container.
To send an event, you can dispatch it like this:
```javascript
window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))
```

## Usage
In your template, insert the following line where you want to display the component.
```html
<sib-notifications bind-user id-suffix="inbox"></sib-notifications>
```

If you want to use the `bind-user` attribute, do not forget to use `sib-oidc` for authentication.

### Routing
To redirect to specific pages when you click on a notification, you should:  
1. Choose a route to be the default view for a resource type. To do this, add the attribute `rdf-type` to a `sib-route` (ex: `<sib-route name="project" rdf-type="doap:project"></sib-route>`)
2. Add an `extra-context` to the sib-conversation component, so it can understands the `rdf_type` you used before.

For more informations, please see the example at `index.html`


### Design
To customize your component, you can set the css variable `--sib-notifications-theme` anywhere in your stylesheet to the color you want.
For example:

```css
:root{
  --sib-notifications-theme: #ffd759;
}
```