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