# @emergy/components-navigation

> ## Introduction

Latest version **1.0.17** (published 2020-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @emergy/components-navigation
pnpm add @emergy/components-navigation
yarn add @emergy/components-navigation
bun add @emergy/components-navigation
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.17 |
| Published | 2020-02-20 |
| First published | 2019-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 24.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mlescaudron |
| Maintainers | mlescaudron |

## Links

- npm: https://www.npmjs.com/package/@emergy/components-navigation
- npm.io page: https://npm.io/package/@emergy/components-navigation

## Recent versions

- 1.0.17 (latest) — 2020-02-20
- 1.0.16 — 2020-02-19
- 1.0.15 — 2020-02-13
- 1.0.14 — 2020-02-13
- 1.0.13 — 2020-02-07
- 1.0.12 — 2019-12-20
- 1.0.11 — 2019-12-20
- 1.0.10 — 2019-12-20
- 1.0.9 — 2019-12-20
- 1.0.8 — 2019-12-19
- 1.0.7 — 2019-12-19
- 1.0.6 — 2019-12-19
- 1.0.4 — 2019-12-19
- 1.0.3 — 2019-12-19
- 1.0.2 — 2019-12-19
- … 1 more at https://npm.io/package/@emergy/components-navigation/versions

## README

# components-navigation

## Introduction

Create a basic and customizable header

## Install

```bash
yarn add components-navigation
```

## Usage

```tsx
import * as React from "react";
import { useTranslation } from "@emergy/components-translations";
import { Navigation, Footer } from "@emergy/components-navigation";
import { withRouter } from "next/router";

const Layout: React.FC = () => {
  const headerLinks = [
    { href: "/about", value: "About" },
    { href: "/contact", value: "Contact" }
  ];

  const footerLinks = {
    section1: [
      { href: "/contact", value: t("contact") },
      { href: "/privacy", value: t("privacy") }
  ];

  const websiteUrl = "emergy.cc";
  return (
    <div>
      <Navigation title="Emergy" links={headerLinks} withRouter={withRouter} />
      <Footer links={footerLinks} websiteUrl={websiteUrl}>
    </div>
  );
};

export default Layout;
```

### Usage with translation

```tsx
import * as React from "react";
import { useTranslation } from "@emergy/components-translations";
import { Navigation } from "@emergy/components-navigation";
import { withRouter } from "next/router";

const Layout: React.FC = () => {
  const headerLinks = [
    { href: "/about", value: t("about") },
    { href: "/contact", value: t("contact") }
  ];
  return (
    <div>
      <Navigation title="Emergy" links={headerLinks} withRouter={withRouter} />
    </div>
  );
};

export default Layout;
```

### Using module CSS

Scss:

```scss
// styles.scss
@import "../node_modules/@emergy/components-navigation/dist/index.es.css";
```

### Using PurgeCSS

```js
const CpntNav = require("next-optimized-images");
const purgeCssWhiteList = [].concat(CpntNav.purgeCss); // To activate mobile headers

// next.config.js
const purgeCssPaths = [
  "pages/**/*",
  "components/**/*",
  "node_modules/@emergy/components-navigation/dist/**/*",
];

withPurgeCss({
  purgeCssPaths,
  purgeCss: {
    whitelist: () => purgeCssWhiteList,
  },
  ...
});
```

## Test

Basic test are created and executed for each build.  
The test with enzyme doesn't work properly yet.

## More details

In order to make it work properly, I had to link the project who's using the components-translations to the components-navigation:

```
# In the root folder of my project
cd node_modules/@emergy/components-translation
yarn link

cd <components-navigation-root-path>
yarn link "@emergy/components-translations"
```

## License

MIT © [mlescaudron](https://github.com/mlescaudron)

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