Tbc-panda-mobile-navigation NPM

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.