TBC Panda React App Mobile Navigation

Navigation for all TBC Panda Mobile React apps. This includes a Header component and a Footer component, with primary navigation being in the Footer.

Install

npm install --save tbc-panda-mobile-navigation

Styles

To use the components included in this module, the following style file will need to be imported/included into the main App.scss after the colors.scss import:

@import "tbc-panda-mobile-navigation/dist/Component/styles/mobilenav.scss";

pagesObject

Both the Header and Footer components of this package requires a pagesObject which describes what items appear in the header and footer.

It is recommended that a pagesConfig.js file be created which hosts this object.

The pagesObject is made up of:

| Key | Type | Default | Description | | ------------------- | ------ | ------- | ----------------------------------------------------------------------------------------------------- | | pages | Array | [] | key containing an array of page objects (see below for details) | | utilsComponents | Array | [] | key contains an array of utility button components (items that appear in the far right of the header) | | default | Number | 0 | value (index) used to determine the default page index |

The objects within the pages key contains:

| Key | Type | Required | Description | | ------------- | --------------- | -------- | ----------------------------------------------------- | | path | String | REQUIRED | used for key and local path (if local link) | | name | String | REQUIRED | short name (used in header and home tab) | | longName | String | OPTIONAL | long name (used in home tab) | | icon | String | REQUIRED | icon classes for links | | component | React.Component | OPTIONAL | the container component for internal pages | | link | String | OPTIONAL | external URL | | target | String | OPTIONAL | anchor target for external URLs (defaults to "_new") | | className | String | OPTIONAL | optional class string applied to navigation link |

See below for sample pagesConfig.js file.

Sample pagesConfig.js file

/** @module pagesConfig */

import React from "react";

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import UtilButton from "./UtilButton";

const pagesObject = {
    default: 0,
    pages: [
        {
            path: "tab1",
            name: "Tab 1",
            icon: "far fa-dice-one",
            component: () => <Tab1 />
        },
        {
            path: "tab2",
            name: "Tab 2",
            icon: "far fa-dice-two",
            component: () => <Tab2 />
        },
        {
            path: "sdo",
            name: "SDO",
            longName: "Seed Dealer Orders",
            icon: "fas fa-store-alt",
            link: "http://seed-staging.trinidadbenham.com",
            className: "sdo_button"
        }
    ],
    utilComponents: [<UtilButton />]
};

export default pagesObject;

Header Component:

Default Mobile Header contains logo, button for copyright modal, and utility button (as defined in pagesObject).

import Header from "tbc-panda-mobile-navigation/dist/Component/Header";

Then, in the highest level presentational component, place the following where it should appear:

<Header pagesObject={pagesObject} />

This should be above any routing tags.

Header is 53px tall.

Footer Component:

By default, navigation is handled by the footer. It is not recommended to have more than four options.

import Footer from "tbc-panda-mobile-navigation/dist/Component/Footer";

Then, in the highest level presentational component, place the following where it should appear:

<Footer pagesObject={pagesObject} />

This should be below any routing tags.

Footer is 61px tall.

NavHeader Component:

In instances where more than four options are required for navigation, navigation should be moved to the NavHeader component, which is more inline with Panda desktop application designs. It contains the logo, a hamburger button with list of navigation options within, and the utility button. Copyright isn't included, so separate Panda-Footer component should be installed and used instead.

import NavHeader from "tbc-panda-mobile-navigation/dist/Component/NavHeader";

Then, in the highest level presentational component, place the following where it should appear:

<NavHeader pagesObject={pagesObject} />

This should be above any routing tags.

NavHeader is also 53px tall.

Required NPM Packages

npm install --save bootstrap reactstrap @material-ui/core lodash

Testing

For any unit test file that deep renders ("mounts") this imported component, add the following:

jest.mock("tbc-panda-mobile-navigation/dist/Component/Header", () => "div");