@emergy/components-navigation NPM

components-navigation

Introduction

Create a basic and customizable header

Install

yarn add components-navigation

Usage

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

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:

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

Using PurgeCSS

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"