Vertical navbar

app/assets/stylesheets/patternfly_overrides.scss

@@ -1078,3 +1078,230 @@ table.table-compressed tr td .piechart {
 table.c3-tooltip td {
   background-color: #393f44;
 }
+
+.nav-pf-vertical {
+  .menu-list-group-item {
+    border-bottom: 1px solid rgb(3, 3, 3);
+    border-top: 1px solid rgb(3, 3, 3);
+    box-sizing: border-box;
+    padding: 0;
+    margin-bottom: -1px;
+    position: relative;
+    &:first-child {
+      border-top: none;
+    }
+    a {
+      background-color: transparent;
+      color: #d1d1d1;
+      cursor: pointer;
+      display: block;
+      font-size: 14px;
+      font-weight: 400;
+      height: 63px;
+      line-height: 26px;
+      padding: 17px 20px 17px 25px;
+      position: relative;
+      white-space: nowrap;
+      width: 225px;
+      text-decoration: none;
+      .pficon, .fa {
+        color: #72767b;
+        float: left;
+        font-size: 20px;
+        line-height: 26px;
+        margin-right: 10px;
+        text-align: center;
+        width: 24px;
+      }
+    }
+    .list-group-item-value {
+      flex: 1;
+      max-width: none;
+      padding-right: 15px;
+      line-height: 25px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .menu-list-group-item.active {
+    a {
+      background-color: #393f44;
+      color: #fff;
+      font-weight: 600;
+      .pficon, .fa {
+        color: #39a5dc;
+      }
+    }
+    a:before {
+      background: #39a5dc;
+      content: " ";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 3px;
+    }
+    .nav-pf-secondary-nav {   
+      .nav-item-pf-header {
+        a {
+          ::before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+  .menu-list-group-item:hover {
+    a {
+      background-color: #393f44;
+      color: #fff;
+      font-weight: 600;
+      width: calc(225px + 1px);
+      z-index: 1031;
+      .pficon, .fa {
+        color: #39a5dc;
+      }
+    }
+  }
+  .nav-pf-secondary-nav {
+    .nav-item-pf-header {
+      a {
+        ::before {
+          font-family: "FontAwesome";
+          content: '\f08d';
+          color: #0099d3;
+          margin-right: 7px;
+          opacity: 0;
+        }
+        &.collapsed {
+          ::before {
+            transform: rotate(45deg);
+            display: inline-block;
+          }
+        }
+        color: #fff;
+        opacity: 1;
+        font-size: 16px;
+        font-family: "Open Sans", Helvetica, Arial, sans-serif;
+        font-weight: 400;
+        cursor: pointer;
+        padding: 0;
+        height: auto;
+        background: transparent;
+        z-index: 0;
+      }
+    }
+    .menu-list-group-item {
+      border: none;
+      padding: 0 0 5px 0;
+      width: 225px;
+      margin-bottom: -1px;
+      &.tertiary-nav-item-pf {
+        a {
+          ::after {
+            color: #72767b;
+            content: "\f105";
+            display: block;
+            font-family: "FontAwesome";
+            font-size: 20px;
+            line-height: 20px;
+            padding: 0;
+            position: absolute;
+            right: 20px;
+            top: 4px;
+          }
+        }
+      }
+      a {
+        background-color: #393f44;
+        color: #d1d1d1;
+        font-size: 12px;
+        font-weight: inherit;
+        height: inherit;
+        margin-left: 20px;
+        width: calc(225px - 20px);
+        display: flex;
+        opacity: 1;
+        padding: 4px 0 2px 0;
+        .list-group-item-value {
+          padding-left: 5px;
+          flex: 1;
+          max-width: none;
+          padding-right: 15px;
+        }
+      }
+    }
+    .menu-list-group-item.active, .menu-list-group-item:hover {
+      a {
+        background-color: #4d5258;
+        color: #fff;
+        font-weight: 600;
+      }
+    }
+    a:before {
+      display: none;
+    }
+    .menu-list-group-item:hover {
+      a {
+        color: #fff;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .nav-pf-tertiary-nav{
+    .nav-item-pf-header {
+      a {
+        font-size: 16px;
+        font-weight: 400 !important;
+        margin: 0;
+        padding: 0;
+        background-color: #4d5258;
+        color: #fff;
+        ::after {
+          display: none !important;
+        }
+      }
+    }  
+    .menu-list-group-item {
+      a {
+        background-color: #4d5258;
+        span {
+          font-weight: 400;
+          color: #fff;
+        }
+        ::after {
+          display: none !important;
+        }
+      }
+    }
+    .menu-list-group-item.active, .menu-list-group-item:hover {
+      a {
+        background-color: #393f44;
+        span {
+          font-weight: 600;    
+        }
+      }
+    }
+  }
+
+  &.collapsed {
+    .menu-list-group-item, .menu-list-group-item.active {
+      >a.top-level {
+        >.list-group-item-value {
+          display: none;
+        }
+        padding: 17px 0 17px 25px;
+        width: 75px;
+        &::after {
+          right: 10px;
+        }
+      }
+      >a.top-level:hover {
+        width: calc(75px + 1px);
+      }
+    }
+  }
+}
+
+

app/helpers/application_helper/navbar.rb

@@ -1,45 +1,64 @@
 module ApplicationHelper
   module Navbar
+    def menu_to_json(placement = :default)
+      structure = []
+      Menu::Manager.menu(placement) do |menu_section|
+        next unless menu_section.visible?
+
+        structure << item_to_hash(menu_section)
+      end
+      structure
+    end
+
+    def item_to_hash(item)
+      {
+        :id          => item.id,
+        :title       => item.name,
+        :iconClass   => item.icon,
+        :href        => item.link_params[:href],
+        :type        => item.type,
+        :preventHref => !item.href,
+        :visible     => item.visible?,
+        :active      => item_active?(item),
+        :items       => item.items.to_a.map(&method(:item_to_hash))
+      }
+    end
+
     # FIXME: The 'active' below is an active section not an item. That is wrong.
     # What works is the "legacy" part that compares @layout to item.id.
     # This assumes that these matches -- @layout and item.id. Moving forward we
     # need to remove that assumption. However to do that we need figure some way
     # to identify the active menu item here.
-    def item_nav_class(item)
-      active = controller.menu_section_id(controller.params) || @layout.to_sym
+    def item_active?(item)
+      if item.leaf?
+        # FIXME: remove @layout condition when every controller sets menu_section properly
+        active = controller.menu_section_id(controller.params) || @layout.to_sym
+        item.id.to_sym == active || item.id.to_sym == @layout.to_sym
+      else
+        return section_nav_class_iframe(item) if params[:action] == 'iframe'
 
-      # FIXME: remove @layout condition when every controller sets menu_section properly
-      item.id.to_sym == active || item.id.to_sym == @layout.to_sym ? 'active' : nil
-    end
+        active = controller.menu_section_id(controller.params) || @layout.to_sym
 
-    # special handling for custom menu sections and items
-    def section_nav_class_iframe(section)
-      if params[:sid].present?
-        section.id.to_s == params[:sid] ? 'active' : nil
-      elsif params[:id].present?
-        section.contains_item_id?(params[:id]) ? 'active' : nil
-      end
-    end
-
-    def section_nav_class(section)
-      return section_nav_class_iframe(section) if params[:action] == 'iframe'
-
-      active = controller.menu_section_id(controller.params) || @layout.to_sym
+        if item.parent.nil?
+          # first-level, fallback to old logic for now
+          # FIXME: exception behavior to remove
+          active = 'my_tasks' if %w[my_tasks all_tasks].include?(@layout)
+          active = 'cloud_volume' if @layout == 'cloud_volume_snapshot' || @layout == 'cloud_volume_backup'
+          active = 'cloud_object_store_container' if @layout == 'cloud_object_store_object'
+          active = active.to_sym
+        end
 
-      if section.parent.nil?
-        # first-level, fallback to old logic for now
-        # FIXME: exception behavior to remove
-        active = 'my_tasks' if %w[my_tasks all_tasks].include?(@layout)
-        active = 'cloud_volume' if @layout == 'cloud_volume_snapshot' || @layout == 'cloud_volume_backup'
-        active = 'cloud_object_store_container' if @layout == 'cloud_object_store_object'
-        active = active.to_sym
+        # FIXME: remove to_s, to_sym once all items use symbol ids
+        item.id.to_sym == active ||
+          item.contains_item_id?(active.to_s) ||
+          item.contains_item_id?(active.to_sym)
       end
+    end
 
-      return 'active' if section.id.to_sym == active
-
-      # FIXME: remove to_s, to_sym once all items use symbol ids
-      return 'active' if section.contains_item_id?(active.to_s)
-      return 'active' if section.contains_item_id?(active.to_sym)
+    # special handling for custom menu sections and items
+    def section_nav_class_iframe(section)
+      params[:sid].present? && section.id.to_s == params[:sid] ||
+        params[:id].present? && section.contains_item_id?(params[:id])
     end
   end
 end

app/javascript/components/main-menu/helpers.js

@@ -0,0 +1,25 @@
+export const getHrefByType = (type, href, id) => {
+  switch (type) {
+    case 'big_iframe':
+      return `/dashboard/iframe?id=${id}`;
+    case 'modal':
+      return undefined;
+    default:
+      return href;
+  }
+};
+
+export const getTargetByType = type => (type === 'new_window' ? '_blank' : '_self');
+
+export const getItemId = id => `menu_item_${id}`;
+
+export const getSectionId = id => `menu_section_${id}`;
+
+export const getIdByCategory = (isSection, id) => (isSection ? getSectionId(id) : getItemId(id));
+
+export const handleUnsavedChanges = (type) => {
+  if (type === 'modal') {
+    return sendDataWithRx({ type: 'showAboutModal' });
+  }
+  return window.miqCheckForChanges();
+};

app/javascript/components/main-menu/main-menu.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+import TopLevel from './top-level';
+import SecondLevel from './second-level';
+import ThirdLevel from './third-level';
+import { menuProps, RecursiveMenuProps } from './recursive-props';
+
+const Fallback = props => <ThirdLevel level={2} {...props} />;
+
+const getLevelComponent = level => ({
+  0: props => <TopLevel level={level} {...props} />,
+  1: props => <SecondLevel level={level} {...props} />,
+})[level] || Fallback;
+
+export const MenuItem = ({ level, ...props }) => getLevelComponent(level)(props);
+
+const MainMenu = ({ menu }) => (
+  <Grid className="top-navbar">
+    <div className="nav-pf-vertical nav-pf-vertical-with-sub-menus nav-pf-vertical-collapsible-menus">
+      <ul className="list-group" id="maintab">
+        {menu.map(props => <MenuItem key={props.id} level={0} {...props} />)}
+      </ul>
+    </div>
+  </Grid>
+);
+
+MainMenu.propTypes = {
+  menu: PropTypes.arrayOf(PropTypes.shape({
+    ...menuProps,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      ...menuProps,
+      items: PropTypes.arrayOf(PropTypes.shape(RecursiveMenuProps())),
+    })),
+  })).isRequired,
+};
+
+export default MainMenu;