Ivan - STAFF LOGIN - Add horizontal and horizontal-list menu [skip ci]

client/src/app/admin/panel/admin-panel-menu.js

@@ -30,7 +30,7 @@ class AdminPanelMenu extends React.Component {
             selectedIndex: this.getGroupIndex(),
             onItemClick: this.onGroupClick.bind(this),
             tabbable: true,
-            type: 'primary'
+            type: 'horizontal'
         };
     }
 
@@ -40,7 +40,7 @@ class AdminPanelMenu extends React.Component {
             selectedIndex: this.getGroupItemIndex(),
             onItemClick: this.onGroupItemClick.bind(this),
             tabbable: true,
-            type: 'secondary'
+            type: 'horizontal-list'
         };
     }
 
@@ -76,9 +76,8 @@ class AdminPanelMenu extends React.Component {
     getGroupItemIndex() {
         const group = this.getRoutes()[this.getGroupIndex()];
         const pathname = this.props.location.pathname;
-        const itemIndex = _.findIndex(group.items, {path: pathname});
 
-        return (itemIndex === -1) ? 0 : itemIndex;
+        return _.findIndex(group.items, {path: pathname});
     }
 
     getGroupIndex() {

client/src/app/demo/components-demo-page.js

@@ -65,12 +65,6 @@ let DemoPage = React.createClass({
                 </Widget>
             )
         },
-        {
-            title: 'DropDown',
-            render: (
-                <DropDown items={dropDownItems} onChange={function (index) { console.log('changed to ' + index); }} />
-            )
-        },
         {
             title: 'Primary Menu',
             render: (
@@ -83,6 +77,30 @@ let DemoPage = React.createClass({
                 <Menu items={secondaryMenuItems} type="secondary"/>
             )
         },
+        {
+            title: 'Navigation Menu',
+            render: (
+                <Menu items={secondaryMenuItems} type="navigation"/>
+            )
+        },
+        {
+            title: 'Horizontal Menu',
+            render: (
+                <Menu items={secondaryMenuItems.slice(0, 3)} type="horizontal"/>
+            )
+        },
+        {
+            title: 'HorizontalList Menu',
+            render: (
+                <Menu items={dropDownItems.slice(0, 3)} type="horizontal-list"/>
+            )
+        },
+        {
+            title: 'DropDown',
+            render: (
+                <DropDown items={dropDownItems} onChange={function (index) { console.log('changed to ' + index); }} />
+            )
+        },
         {
             title: 'Tooltip',
             render: (

client/src/core-components/menu.js

@@ -84,7 +84,9 @@ class Menu extends React.Component {
         let classes = {
             'menu': true,
             'menu_secondary': (this.props.type === 'secondary'),
-            'menu_navigation': (this.props.type === 'navigation')
+            'menu_navigation': (this.props.type === 'navigation'),
+            'menu_horizontal': (this.props.type === 'horizontal'),
+            'menu_horizontal-list': (this.props.type === 'horizontal-list')
         };
 
         classes[this.props.className] = true;

client/src/core-components/menu.scss

@@ -1,5 +1,7 @@
 @import "../scss/vars";
 
+$transition: background-color 0.3s ease, color 0.3s ease;
+
 .menu {
 
     &__list {
@@ -13,7 +15,7 @@
 
     &__list-item {
         padding: 8px;
-        transition: background-color 0.3s ease, color 0.3s ease;
+        transition: $transition;
 
         &_selected,
         &:hover {
@@ -78,4 +80,93 @@
             color: $primary-blue;
         }
     }
+
+    &_horizontal {
+        text-align: center;
+
+        .menu__list {
+            background-color: transparent;
+            font-size: $font-size--md;
+        }
+
+        .menu__icon {
+            display: block;
+            margin-right: 0;
+            margin-bottom: 20px;
+            margin-top: 20px;
+            font-size: $font-size--xl;
+        }
+
+        .menu__list-item {
+            background-color: white;
+            color: $primary-black;
+            cursor: pointer;
+            display: inline-block;
+            height: 120px;
+            width: 16.6667%;
+
+            @media (max-width: 667px) {
+                width: 33.3333%;
+            }
+        }
+
+        .menu__list-item_selected {
+            background-color: $secondary-blue;
+            color: white;
+        }
+
+        .menu__list-item:hover,
+        .menu__list-item:focus {
+            color: $dark-grey;
+            outline: none;
+        }
+
+        .menu__list-item_selected:focus,
+        .menu__list-item_selected:hover {
+            color: white;
+        }
+    }
+
+    &_horizontal-list {
+        text-align: left;
+        background-color: $secondary-blue;
+        min-height: 45px;
+
+        .menu__list {
+            background-color: transparent;
+            font-size: $font-size--sm;
+        }
+
+        .menu__list-item {
+            transition: none;
+            background-color: transparent;
+            color: white;
+            cursor: pointer;
+            display: inline-block;
+            margin-top: 11px;
+            margin-bottom: 10px;
+            margin-left: 20px;
+            padding: 2px 13px;
+        }
+
+        .menu__list-item:hover {
+            transition: $transition;
+            background-color: transparent;
+            color: $primary-black;
+        }
+
+        .menu__list-item:focus {
+            color: $grey;
+            outline: none;
+        }
+
+        .menu__list-item_selected,
+        .menu__list-item_selected:hover {
+            transition: $transition;
+            padding: 2px 13px;
+            border-radius: 30px;
+            background-color: $primary-blue;
+            color: white;
+        }
+    }
 }