vertical nav bar implemented

src/common/VerticalNavBar/VerticalNavBar.js

@@ -0,0 +1,41 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const NavTabButton = require('../NavBar/NavTabButton');
+const styles = require('./styles');
+
+const VerticalNavBar = React.memo(({ className, tabs }) => {
+    return (
+        <nav className={classnames(className, styles['nav-bar-container'])}>
+            {
+                Array.isArray(tabs) && tabs.length > 0 ?
+                    tabs.map(({ href = '', icon = '', label = '', onClick }) => (
+                        <NavTabButton
+                            key={`${href}${icon}${label}`}
+                            className={styles['nav-tab-button']}
+                            href={href}
+                            icon={icon}
+                            label={label}
+                            onClick={onClick}
+                        />
+                    ))
+                    :
+                    null
+            }
+        </nav>
+    );
+});
+
+VerticalNavBar.displayName = 'VerticalNavBar';
+
+VerticalNavBar.propTypes = {
+    className: PropTypes.string,
+    tabs: PropTypes.arrayOf(PropTypes.shape({
+        icon: PropTypes.string,
+        label: PropTypes.string,
+        href: PropTypes.string,
+        onClick: PropTypes.func
+    }))
+};
+
+module.exports = VerticalNavBar;

src/common/VerticalNavBar/index.js

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

src/common/VerticalNavBar/styles.less

@@ -0,0 +1,23 @@
+.nav-bar-container {
+    --nav-bar-size: 4.4rem;
+    width: var(--nav-bar-size);
+    padding: 1rem 0;
+    background-color: var(--color-backgroundlighter);
+
+    .nav-tab-button {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: var(--nav-bar-size);
+        padding: 0.5rem;
+
+        > :first-child {
+            margin: 0 0 0.5rem 0;
+        }
+
+        > :last-child {
+            max-height: 1.2em;
+            font-size: 0.75rem;
+        }
+    }
+}