npm package: @mediahackza/outlier-components
Description: A package of elements used across multiple Outlier websites.
Latest version: 0.3.3

# Outlier Components

A package of elements used across multiple Outlier websites.

## Version notes

0.1.20 - Adds OutlierMenu component. Based on the mobile menu it is positioned along the bottom of the screen.

- Set the OutlierHeader showTopMenu prop to false by default. This hides the top menu bar in preparation for the OutlierMenu inclusion listed above.

- 0.1.22 - Adds default menu items list, removes menuItems as a required prop

- 0.1.23 - Adding three columns to drop-down top menu

- 0.1.3 - Switching to Wordpress menu system

- 0.2.0 - New OutlierNav component, a simplified navigation system for all Outlier and MHC sites.

- 0.2.3 - Adding options for light or dark theme, and option to switch logo on or off

- 0.2.4 - Linked "Outlier Navigation" in The Outlier Wordpress to navigation.

- 0.3.0 - Switched to Sanity.io menu system

- 0.3.3 - Added Fathom track events to main nav called "main-nav-[menuitem]"

## Installation

    npm install @mediahackza/outlier-components

## Usage

Notes: Added OutlierMenu component which is mobile-style menu at the base of the page. It only positioned on the bottom of the page for now. In future versions there will be a desktop (top of the page) and a mobile (bottom of the page) style, which will be automatic.

    import { OutlierHeader } from '@mediahackza/outlier-components'
    import { OutlierFooter } from '@mediahackza/outlier-components'
    import { OutlierMobileMenu } from '@mediahackza/outlier-components'
    import { OutlierMenu } from '@mediahackza/outlier-components'

## Components

## OutlierNav

OutlierNav is a simple navigation component for all sites.

### Props

**background**
Default is 'blue'
Options: 'red', 'blue', 'black'
Not required

**logo**
Show or hide the Outlier logo
Default is true (show logo)
Options: true, false
Not required

**theme**
Change the displayed logo from white on black to black on white
Default is 'light'
Options: 'light', 'dark'
Not required

## OutlierHeader

OutlierHeader is a simple header component that includes core navigation, logo and optional log-in button.

#### Props

- **showTopMenu**
  Default is false. To add the top menu set to true. Note: This also requires that a menuItems prop is passed to the header.
  Default is false
  Not required

- **headerWidth**
  Default is 90%, you can pass most values here eg. 100px, 100vw, 100%
  Not required

- **loginRequired**
  Login button: requires a 'user' data object if set to true
  Default is false
  Not required

- **showSubs**
  Shows subscription for for The Outlier if true
  Default is false

#### Data

- user
  Not required if member is false
  This is the user login status
  Data object needs at least a "loggedin" property = true/false

- menuItems
  Not required
  A default menu items list is included. Set menuItem={obj} to override the default
  menuItems is an object with a Primary and Secondary set of menu items
  Example menuItems object:

  ```
  {
   "Primary": [
      {
         "name": "Charts",
         "link": "https://charts.theoutlier.co.za"
      },
      {
         "name": "Tools",
         "link": "https://tools.theoutlier.co.za"
      },
        {
             "name": "Games",
             "link": "https://games.theoutlier.co.za"
        },
        {
             "name": "Newsletters",
             "link": "https://newsletters.theoutlier.co.za"
        }
   ],
   "Secondary": [
      {
         "name": "Local Government",
         "link": "/section/local-government"
      },
      {
         "name": "Sports",
         "link": "/section/sports"
      },

   ]
  }
  ```

## OutlierFooter

Currently no props

## OutlierMobileMenu

Currently no props

## OutlierMenu

No props.
Based on mobile menu above, with the intention of becoming the primary navigation. For now it is always positioned along the bottom of the screen but uin future versions will alternate between top (desktop) and bottom (mobile).

### Breakpoints

- < 800px
  Mobile view which
  - Drops too-left menu dropdown
  - Drop subscription form in header