Sidebar Navigation

.  

• The Sidebar Nav width has been decreased from 60px to 56px
• The height of items in the sidebar have been increased from 40px to 56px
• When collapsed, the secondary/“kebab” button that shows when hovering over a sidebar item is now located outside the item, allowing for more clickable space on the primary button
• The colors of the side navigation bar have been updated.
  • The bar background color now matches the primary/”foreground” color of Sugar in both light and dark mode, and the text color used has been updated as well.
• Items now have a colored indicator that animates to change size and position when hovering or selecting items, indicating the state of the item.
  • For module-type items, this color indicator matches the module’s selected color
• “How does this affect my customizations?”
  • If you have any custom items added to your Sidebar nav that are based on custom components (i.e. they do not make use of the existing ‘sidebar-nav-item' component)
    • Test those customizations to make sure they still look/work as expected in both collapsed and expanded modes.
  • if you have overridden any of the sidebar nav item templates (sidebar-nav-item.hbs, sidebar-nav-item-module.hbs, sidebar-nav-item-omnichannel.hbs, sidebar-nav-item-sugarcrm.hbs),
    • Test those customizations to make sure they still look/work as expected in both collapsed and expanded modes.
  • Very little logic was changed behind how the items work, but there were significant updates to the templates and CSS of the items.
  • If your custom item needs to be updated, you may want to follow the pattern of the core sidebar-nav-item.hbs file