# primo-explore-search-bar-sub-menu

> Add a nav bar underneath the search bar to provide additional links in the primo-explore UI.

Latest version **1.0.14** (published 2021-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install primo-explore-search-bar-sub-menu
pnpm add primo-explore-search-bar-sub-menu
yarn add primo-explore-search-bar-sub-menu
bun add primo-explore-search-bar-sub-menu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2021-09-10 |
| First published | 2018-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Barnaby Alter |
| Maintainers | barnaby.alter, etgrieco |
| Keywords | primo-explore |

## Links

- npm: https://www.npmjs.com/package/primo-explore-search-bar-sub-menu
- Repository: https://github.com/nyulibraries/primo-explore-search-bar-sub-menu
- Homepage: https://github.com/nyulibraries/primo-explore-search-bar-sub-menu#readme
- Issues: https://github.com/nyulibraries/primo-explore-search-bar-sub-menu/issues
- npm.io page: https://npm.io/package/primo-explore-search-bar-sub-menu

## Recent versions

- 1.0.14 (latest) — 2021-09-10
- 1.0.13 — 2021-06-30
- 1.0.12 — 2021-04-30
- 1.0.11 — 2021-03-10
- 1.0.9 — 2020-12-03
- 1.0.8 — 2019-07-25
- 1.0.7 — 2018-07-26
- 1.0.6 — 2018-04-16
- 1.0.2 — 2018-03-28
- 1.0.1 — 2018-02-22
- 1.0.0 — 2018-02-08

## README

# primo-explore-search-bar-sub-menu

[![Build Status](https://travis-ci.org/NYULibraries/primo-explore-search-bar-sub-menu.svg?branch=master)](https://travis-ci.org/NYULibraries/primo-explore-search-bar-sub-menu)
[![npm version](https://img.shields.io/npm/v/primo-explore-search-bar-sub-menu.svg)](https://www.npmjs.com/package/primo-explore-search-bar-sub-menu)
[![Coverage Status](https://coveralls.io/repos/github/NYULibraries/primo-explore-search-bar-sub-menu/badge.svg?branch=master)](https://coveralls.io/github/NYULibraries/primo-explore-search-bar-sub-menu?branch=master)

## Description

Add a nav bar underneath the search bar to provide additional links in the primo-explore UI.

### Screenshot

![screenshot](screenshot.png)

## Installation

1. Assuming you've installed and are using [primo-explore-devenv](https://github.com/ExLibrisGroup/primo-explore-devenv).

2. Navigate to your template/central package root directory. For example:
    ```
    cd primo-explore/custom/MY_VIEW_ID
    ```
3. If you do not already have a package.json file in this directory, create one:
    ```
    npm init -y
    ```
4. Install this package:
    ```
    yarn add primo-explore-search-bar-sub-menu --dev
    # OR
    npm install primo-explore-search-bar-sub-menu --save-dev
    ```

## Usage

Once installed, inject `searchBarSubMenu` as a dependency:

```js
let app = angular.module('viewCustom', ['searchBarSubMenu'])
```

**Note:** If you're using the --browserify build option, you will need to first import the module with:

```js
import 'primo-explore-search-bar-sub-menu';
```

Then add the `search-bar-sub-menu` directive to the `prmSearchBarAfter` component:

```js
app.component('prmSearchBarAfter', {
  template: '<search-bar-sub-menu></search-bar-sub-menu>'
})
```

### Config

You'll need to configure the module by passing it an array of objects as an angular `constant`:

| name | type | usage |
|------|-------------|--------|
| `cssClasses` | string | extra css classes to put on the buttons, i.e. 'button-over-dark' if your background color is dark |
| `name` | string | the text that will appear as the button link |
| `description` | string | for the aria label |
| `action` | string | url for the link. always opens in a new window. |
| `icon` | object | defines the icon for the link. must be chosen from <https://material.io/icons/>. you need to specify both the name of the action "set" (see link) and the icon itself, in the form "ic_person_outline_24px". note that all icons do not work so you may have to experiment some |
| `show_xs` | boolean | true is you want to continue to show button text in xs screens and only show the icons. false by default |

### Translations

You can use translations to access back office text by wrapping the value in curly braces, e.g. `{nui.menu.librarycard}`. Anything that works in the primo templates link this `<span translate="nyu.menu.librarycard"></span>` will work if it's available in the current scope.

### Styles

Change the background color of the menu bar:

```css
search-bar-sub-menu div.search-bar-sub-menu {
  background-color: green !important;
}
```

Change the padding between the search bar the menu bar, these are the default values:

```css
prm-search-bar {
  padding-bottom: 58.5px;
}
.__sm prm-search-bar {
  padding-bottom: 49.5px;
}
.__xs prm-search-bar {
  padding-bottom: 36px;
}
```

Where `36px` is the default height of the menu bar.

### Example

```js
app.constant('searchBarSubMenuItems',
  [
    {
      name: "Back to Primo Classic",
      description: "Back to Primo Classic",
      action: "http://primo.school.edu/primo_library/libweb/action/search.do?vid=" + viewName,
      icon: {
        set: 'navigation',
        icon: 'ic_arrow_back_24px'
      },
      show_xs: true,
      cssClasses: 'button-over-dark'
    },
    {
      name: "Library Hours",
      description: "Library Hours",
      action: "https://school.edu/library-hours",
      icon: {
        set: 'av',
        icon: 'ic_av_timer_24px'
      },
      cssClasses: 'button-over-dark'
    }
  ]
);

```

## Tests

We are using Yarn to manage dev dependencies.

```
yarn
yarn test
```

---
_Source: https://npm.io/package/primo-explore-search-bar-sub-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._