opc-nav Component 👋

!Version
!Build Status

Opc-Nav is a fully customizable web component developed using Lit elements for Red Hat One Platform. Its primarily used as the navigation bar that contains links, menu buttons, and logo.

Prerequisites

Opc-Nav is implement under Red Hat design guidelines. Therefore the component uses Red Hat official font. This can be easily imported with google cdn at the top of HTML document.

``html


href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
rel="stylesheet"
/>
href="https://fonts.googleapis.com/css2?family=Red+Hat+Text&display=swap"
rel="stylesheet"
/>
`

Guidelines

Slots

There are total 4 slots of which 3 are optional and one is mandatory

$3

- opc-nav-logo: To set the logo of the application in navbar. Suggested component would be an

$3

- opc-nav-menu-links: Container component that contains various nav links. If not given and links attribute will be shown.

- opc-nav-search: Container component that contains the search component.

- opc-nav-btn: The buttons at end of the navbar used for various actions. If not provided by default Notification Bell Button and Menu Button will be shown with corresponding events.

Attributes

$3

- links
- Type: Array
- Default value: [ ]

`js
document.querySelector('opc-nav').links = [{ name: 'Blog', href: '#' }];
`

- activeButton
- Type: menu | notification
- Default value: null

`js
document.querySelector('opc-nav').activeMenu = 'menu';
`

$3

- value
- Type: String
- Default value: ""

`js
document.querySelector('opc-nav-search').value = 'Search';
`

- placeholder
- Type: String
- Default value: Search application, documents, contents etc

`js
document.querySelector('opc-nav-search').placeholder = 'Search';
`

Events

$3

There are two events emitted by opc-nav both are dispatched on click of navbar notification(bell icon) and menu(grid icon) button.

1. opc-nav-btn-menu:click

Dispatched on menu(grid icon) button click.

Example:

`js
document
.querySelector('opc-nav')
.addEventListener('opc-nav-btn-menu:click', function (event) {
alert('menu got clicked');
});
`

2. opc-nav-btn-notification:click

Dispatched on notification(bell icon) button click.

Example:

`js
document
.querySelector('opc-nav')
.addEventListener('opc-nav-btn-notification:click', function (event) {
alert('notification got clicked');
});
`

$3

1. opc-nav-search:change

Dispatched on input change of search.

Example:

`js
document
.querySelector('opc-nav-search')
.addEventListener('opc-nav-search:change', function (event) {
console.log(event.detail.value);
});
`

2. opc-nav-btn-notification:click

Dispatched on notification(bell icon) button click.

Example:

`js
document
.querySelector('opc-nav')
.addEventListener('opc-nav-search:submit', function (event) {
alert(event.detail.value);
});
`

CSS Variables

$3

| CSS Variable name | Value |
| ------------------------------- | ----------------- |
| --opc-nav-height | 60px |
| --opc-nav-width | 100% |
| --opc-nav-position-top | 0 |
| --opc-nav-position-left | 0 |
| --opc-nav-transition--defaul | 120ms ease-in-out |
| --opc-nav-menu__spacing-size | 24px |
| --opc-nav-menu__link-color | #151515 |
| --opc-nav-container__z-index | 9 |
| --opc-nav-btn__padding | 16px |
| --opc-nav-display | block |
| --opc-nav-btn__hover-color | #316dc11a |
| --opc-nav-link__hover-color | #0066cc |

$3

| CSS Variable name | Value |
| --------------------------------- | --------- |
| --opc-nav-search-bg | #f3f3f3 |
| --opc-nav-search__padding | 12px 17px |
| --opc-nav-search__border-radius | 8px |

Install

`sh
npm install
`

Usage

$3

`sh
npm install --save @one-platform/opc-nav
`

$3

- Import component

`js
import '@one-platform/opc-nav/dist/opc-nav';
`

- Add component in html

`html

`

$3

- In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component

`js
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-nav/dist/opc-nav';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`

- Add component in any component html template

`html

`

$3

- Import the component in App.js

`js
import '@one-platform/opc-nav/dist/opc-nav';
`

- Add component in any component html render

`html

`

$3

- Run development server

`sh
npm run dev opc-nav
`

$3

`sh
npm run build opc-nav
`

Run tests

`sh
npm run test
``

🤝 Contributors

👤 akhilmhdh