Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/likethemammal/overwatch-side-nav
A React component modeling the official Overwatch website side-navigation
https://github.com/likethemammal/overwatch-side-nav
game-ui overwatch overwatch-side-nav react-component
Last synced: 4 months ago
JSON representation
A React component modeling the official Overwatch website side-navigation
- Host: GitHub
- URL: https://github.com/likethemammal/overwatch-side-nav
- Owner: likethemammal
- License: apache-2.0
- Created: 2018-03-27T11:06:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-01T03:06:01.000Z (over 6 years ago)
- Last Synced: 2024-10-25T17:31:11.592Z (4 months ago)
- Topics: game-ui, overwatch, overwatch-side-nav, react-component
- Language: JavaScript
- Homepage:
- Size: 2.97 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-overwatch - overwatch-side-nav - A React component modeling the Official Overwatch website side-navigation. (Community / Github)
README
overwatch-side-nav
=========
[](https://travis-ci.org/likethemammal/overwatch-side-nav)
[](https://coveralls.io/github/likethemammal/overwatch-side-nav?branch=master)
[](https://www.npmjs.com/package/overwatch-side-nav)
[](https://www.npmjs.com/package/overwatch-side-nav)
[](https://github.com/likethemammal/overwatch-side-nav/blob/master/LICENSE)
A React component modeling the [Official Overwatch website side-navigation](https://web.archive.org/web/20171214184846/https://playoverwatch.com/en-us/game/overview/).
## Install
npm install --save overwatch-side-nav
### Fonts
#### Futura No 2 D DemiBold
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](http://www.myfonts.com/fonts/urw/futura-no-2/futura-no2-d-demi-bold/).
When using CSS font-face, the font-family should match whats below:
font-family: 'Futura No 2 D DemiBold';
## Usage
Check out [example/index.js](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
}
}
### Props
| name | required | type | default | desc
--- |--- | --- | --- | --- |
| items | **`X`** | array | null | Array of objects, with required keys `id`, `label`, and `icon` |
| *item*.**label** | **`X`** | string | null | Label for the navigation item, displayed in uppercase |
| *item*.**id** | **`X`** | string | null | HTML id for the navigation item. The item will be shown as active when `id` is same as `window.location.hash` |
| *item*.**icon** | **`X`** | `` | null | Icon for the navigation, positioned to the left of the label. Must be a valid SVG |
| defaultColor | | string | #323C50 | Background color for navigation items that aren't active. Should visually contrast `textColor` |
| activeColor | | string | #FFFFFF | Background color for the active navigation item |
| textColor | | string | #00C3FF | Color for the navigation items' `label` and the fill color for the `icon` SVG |
| zIndex | | number | 1000000 | CSS `z-index` for the navigation. Used with `position: fixed`, to float SideNav above (or below) the page |
## Development
npm run dev
#### Running the example
Install it:
cd example/; npm install
Run it while developing (in another terminal window):
cd example/; npm run dev
Open [http://localhost:8080/](http://localhost:8080/) to see the running example
## Tests
npm test
### License
Made with 🍊 by [Chris Dolphin](https://github.com/likethemammal)
[](https://github.com/likethemammal/overwatch-side-nav/blob/master/LICENSE)
#### Fonts
The font **Futura No 2 D DemiBold** should be licensed through [MyFonts.com](http://www.myfonts.com/fonts/urw/futura-no-2/futura-no2-d-demi-bold/)
### Related
- [awesome-overwatch](https://github.com/likethemammal/awesome-overwatch) - A curated list of official Overwatch links and community github repos, codepen demos, and chrome extensions.
- [overwatch-settings-select](https://github.com/likethemammal/overwatch-settings-select) - A React component modeling the Overwatch Settings select element.
- [overwatch-settings-stepper](https://github.com/likethemammal/overwatch-settings-stepper) - A React component modeling the Overwatch Settings the stepper and toggle UI elements.
- [overwatch-table](https://github.com/likethemammal/overwatch-table) - A React component modeling the Overwatch custom game table element.
- [dva-heart-emote](https://github.com/likethemammal/dva-heart-emote) - A WebGL remake of the heart container animation from D.Va's emote.