# hyper-titlebar

> Note: Prerelease, Version: 0.0.1

Latest version **0.0.1** (published 2019-03-04) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install hyper-titlebar
pnpm add hyper-titlebar
yarn add hyper-titlebar
bun add hyper-titlebar
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-03-04 |
| First published | 2019-03-04 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alija Sabic |
| Maintainers | alija |
| Keywords | hyper, hyper.app, hyper-plugin |

## Links

- npm: https://www.npmjs.com/package/hyper-titlebar
- Repository: https://github.com/sabicalija/hyper-titlebar
- Homepage: https://github.com/sabicalija/hyper-titlebar#readme
- Issues: https://github.com/sabicalija/hyper-titlebar/issues
- npm.io page: https://npm.io/package/hyper-titlebar

## Dependencies (6)

- [color](https://npm.io/package/color.md) ^3.1.0
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.15
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.7.2
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) ^5.7.2
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^5.7.2

## Recent versions

- 0.0.1 (latest) — 2019-03-04

## README

# hyper-titlebar

Note: Prerelease, Version: 0.0.1

## Preview

<div style="align: center;">
  <img src="img/preview.gif" style="width: 100%;"/>
</div>

<div style="align: center;">
  <img src="img/preview2.gif" style="width: 100%;"/>
</div>

## Usage

Add following line to `.hyper.js`:

```js
plugins: [
  'hyper-titlebar'
],
```

## Configuration

For customization of the `hyper-titlebar` plugin, add your lines to `.hyper.js`:

```js
config: {
  titlebar: {
    buttonSize: '42px',
    buttonRadius: '42%',
    closeButtonBg: '#FD6261',
    minimizeButtonBg: '#FEBA59',
    maximizeButtonBg: '#1CC65B',
    optionsButtonBg: '#aaaaaa'
  }
  plugins. [
    'hyper-titlebar'
  ]
  
```

The reference below, show the default configuration.

### Titlebar

```js
titlebar: {
  color: '#303030',
  height: '34px',
  radius: false,
}
```

### Buttons

```js
titlebar: {
  /* General */
  buttonSize: '20px',
  buttonRadius: '50%',
  /* Individual */
  closeButtonBg: '#f25056',
  minimizeButtonBg: '#fac536',
  maximizeButtonBg: '#39ea49',
  optionsButtonBg: '#ffffff',
}
```

### Icons

`hyper-titlebar` integrates support for [FontAweomse](https://fontawesome.com) icons.
A list of available icons can be found [here](https://fontawesome.com/icons).

```js
titlebar: {
  /* General */
  iconSize: '60%',
  /* Icons */
  closeIcon: 'fas fa-times',
  minimizeIcon: 'fas fa-minus',
  maximizeIcon: 'fas fa-plus',
  optionsIcon: 'fas fa-bars',
  /* Icon Colors */
  closeIconCol: '#2f343f',
  minimizeIconCol: '#2f343f',
  maximizeIconCol: '#2f343f',
  optionsIconCol: '#2f343f',
  /* Rotation Effect */
  rotateSpeed: '0.25s',
  /* Glare Effect */
  glare: false,
  glareScale: 0.25
}
```

## TODO

* burger menu positioning
* glare effect

---
_Source: https://npm.io/package/hyper-titlebar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._