From 81cff243f549950f8b624ce2e51177bb4dc5529f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 19 Dec 2019 17:50:29 +0200
Subject: [PATCH] vertical nav bar implemented

---
 src/common/VerticalNavBar/VerticalNavBar.js | 41 +++++++++++++++++++++
 src/common/VerticalNavBar/index.js          |  3 ++
 src/common/VerticalNavBar/styles.less       | 23 ++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 src/common/VerticalNavBar/VerticalNavBar.js
 create mode 100644 src/common/VerticalNavBar/index.js
 create mode 100644 src/common/VerticalNavBar/styles.less

diff --git a/src/common/VerticalNavBar/VerticalNavBar.js b/src/common/VerticalNavBar/VerticalNavBar.js
new file mode 100644
index 000000000..863ed9f83
--- /dev/null
+++ b/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;
diff --git a/src/common/VerticalNavBar/index.js b/src/common/VerticalNavBar/index.js
new file mode 100644
index 000000000..1e13d9d65
--- /dev/null
+++ b/src/common/VerticalNavBar/index.js
@@ -0,0 +1,3 @@
+const VerticalNavBar = require('./VerticalNavBar');
+
+module.exports = VerticalNavBar;
diff --git a/src/common/VerticalNavBar/styles.less b/src/common/VerticalNavBar/styles.less
new file mode 100644
index 000000000..12963c2ee
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file