A React component modeling the Official Overwatch website side-navigation.

npm install --save overwatch-side-nav

This font is used by Activision Blizzard for much of Overwatch's design. For this component to match the Overwatch design, including the font is required. It can be licensed from MyFonts.

When using CSS font-face, the font-family should match whats below:

font-family: 'Futura No 2 D DemiBold';

Check out example/index.js for working example or below for exact usage.

import SideNav from 'overwatch-side-nav'

import SVG_MATERIAL_CHEVRON from 'svg-icon/dist/svg/material/chevron-left.svg'

const items = [
    {
        label: 'Home',
        id: 'top',
        icon: SVG_MATERIAL_CHEVRON,
    },
    {
        label: 'Highlights',
        id: 'potg',
        icon: SVG_MATERIAL_CHEVRON,
    },
    {
        label: 'Settings',
        id: 'settings',
        icon: SVG_MATERIAL_CHEVRON,
    },
]

class Example extends React.Component {

    render() {    
        return <SideNav
            items={items}
        />
    }
}

npm run dev

Install it:

cd example/; npm install

Run it while developing (in another terminal window):

cd example/; npm run dev

Open http://localhost:8080/ to see the running example

npm test

Made with 🍊 by Chris Dolphin

The font Futura No 2 D DemiBold should be licensed through MyFonts.com

• awesome-overwatch - A curated list of official Overwatch links and community github repos, codepen demos, and chrome extensions.
• overwatch-settings-select - A React component modeling the Overwatch Settings select element.
• overwatch-settings-stepper - A React component modeling the Overwatch Settings the stepper and toggle UI elements.
• overwatch-table - A React component modeling the Overwatch custom game table element.
• dva-heart-emote - A WebGL remake of the heart container animation from D.Va's emote.