masspa-navigation

Masspa package to make menu navigation

Install

npm install --save masspa-navigation

Usage

import React, { Component } from "react";

import MasspaNavigation from "masspa-navigation";

class Example extends Component {
  render() {
    return <MasspaNavigation />;
  }
}

Properties

Prop	Description	Default
listNavigation	List item to show in navigation	[]
listSocialNetwork	List social icon to show in navigation	[]
logo	Logo to show in top header	Masspa Logo
iconBackNode	Node back icon in navigation	<FaArrowAltCircleRight/>
iconArrowDown	Node icon collapse down in navigation	<FaAngleDown/>
iconArrowUp	Node icon collapse up in navigation	<FaAngleUp/>
textColor	Color text	#FFFFFF
backgroundColor	Color background	rgba(40, 24, 15, 0.8)
funcNav	function trigger when click on Nav background	console.log("click")
funcSubnav	function trigger when click on Sub Nav background	console.log("click Sub Nav")

Example

Check full example in the Example folder.

import React, { Component } from "react";
import MasspaNavigation from "masspa-navigation";
import {
  FaInstagram,
  FaFacebookSquare,
  FaTwitter,
  FaAngleDoubleDown,
  FaAngleDoubleUp
} from "react-icons/fa";
import logo from "./img/home1.png";

const listNavigation = [
  {
    name: "Trang Chủ",
    subMenu: [],
    onClick: () => console.log("click")
  },
  {
    id: "5",
    name: "Dịch Vụ",
    subMenu: [
      {
        id: "2eef8dbe-3725-4448-a83f-fac2ecc1cc94",
        serviceCode: "0548caa0-a47b-11e9-b6ea-cd470457ddbc",
        name: "Nuôi Cấy Mô Da + Fillter ",
        parentCode: "",
        createdAt: 1564374853128,
        updatedAt: 1564374853128,
        subMenu: []
      },
      {
        id: "6ad7b240-990c-400f-ab74-35c77be9ce2b",
        serviceCode: "0548caa0-a47b-11e9-b6ea-cd470457ddbc",
        name: "Thư Giãn ",
        parentCode: "",
        createdAt: 1564374769795,
        updatedAt: 1564374769795,
        subMenu: {
          isFulfilled: true,
          isRejected: false,
          fulfillmentValue: [
            {
              id: "5a78a9fc-e286-488b-9d0f-75c71f70315f",
              serviceCode: "0548caa0-a47b-11e9-b6ea-cd470457ddbc",
              name: "Chăm Sóc Body",
              parentCode: "6ad7b240-990c-400f-ab74-35c77be9ce2b",
              createdAt: 1564381904891,
              updatedAt: 1564381904891,
              subMenu: []
            },
            {
              id: "77340f06-f61a-4bfb-82a8-c44731ad0245",
              serviceCode: "0548caa0-a47b-11e9-b6ea-cd470457ddbc",
              name: "Chăm Sóc Da Mặt ",
              parentCode: "6ad7b240-990c-400f-ab74-35c77be9ce2b",
              createdAt: 1564381869522,
              updatedAt: 1564381869522,
              subMenu: []
            }
          ]
        }
      },
      {
        id: "6c59db51-f1cd-4361-8fcb-7c0c41f23d64",
        serviceCode: "0548caa0-a47b-11e9-b6ea-cd470457ddbc",
        name: "Dịch Vụ Đặc Biệt",
        parentCode: "",
        createdAt: 1564374784686,
        updatedAt: 1564374784686,
        subMenu: []
      }
    ],
    onClick: () => console.log("click")
  },
  {
    name: "Sản Phẩm",
    subMenu: [],
    onClick: () => console.log("click")
  }
];
const listSocialNetwork = [
  {
    node: <FaFacebookSquare className="menu_icon" />,
    link: "https://www.facebook.com/kimspa185/"
  },
  {
    node: <FaTwitter className="menu_icon" />,
    link: "https://twitter.com/?lang=vi"
  },
  {
    node: <FaInstagram className="menu_icon" />,
    link: "https://www.instagram.com/"
  }
];

class Example extends Component {
  onClickSubNav = item => {
    console.log(item.name);
  };
  onClickNav = item => {
    console.log(item.name);
  };
  render() {
    return (
      <MasspaNavigation
        logo={logo}
        listNavigation={listNavigation}
        listSocialNetwork={listSocialNetwork}
        iconBackNode={<img src={iconBack} className="menu_icon_back" />}
        textColor="#9CDCFE"
        backgroundColor="rgb(40, 24, 15)"
        iconArrowDown={<FaAngleDoubleDown className="w-50" />}
        iconArrowUp={<FaAngleDoubleUp className="w-50" />}
        funcNav={this.onClickNav}
        funcSubnav={this.onClickSubNav}
      />
    );
  }
}

Demo

License

MIT © Masspa