@emergy/components-navigation
v1.0.17
Published
## Introduction
Downloads
21
Readme
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"
License
MIT © mlescaudron