NavBarButton implemented

src/common/NavBar/NavBarButton/NavBarButton.js

@@ -0,0 +1,18 @@
+const React = require('react');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const { Input } = require('stremio-navigation');
+const styles = require('./styles');
+
+const NavBarButton = ({ className, icon, label, href, onClick }) => {
+    const type = typeof onClick === 'function' ? 'button' : 'link';
+    const active = window.location.hash === href;
+    return (
+        <Input className={classnames(className, styles['button'], { 'active': active })} type={type} href={href} onClick={onClick}>
+            <Icon className={styles['icon']} icon={icon} />
+            <div className={styles['label']}>{label}</div>
+        </Input>
+    );
+};
+
+module.exports = NavBarButton;

src/common/NavBar/NavBarButton/index.js

@@ -0,0 +1,3 @@
+const NavBarButton = require('./NavBarButton');
+
+module.exports = NavBarButton;

src/common/NavBar/NavBarButton/styles.less

@@ -0,0 +1,32 @@
+.button {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 1.4em;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--color-backgrounddark20);
+    }
+
+    &:global(.active) {
+        background-color: var(--color-backgrounddark);
+    }
+
+    .icon {
+        height: 1.2em;
+        margin-right: 0.6em;
+        fill: var(--color-surfacelighter);
+    }
+
+    .label {
+        flex: 1;
+        height: 1.4em;
+        line-height: 1.4em;
+        word-break: break-all;
+        overflow: hidden;
+        text-transform: capitalize;
+        color: var(--color-surfacelighter);
+    }
+}