Sidebar Navigation

Rafael Fernandes — Tue, 17 Sep 2024 14:35:53 GMT

Current Revision posted to Dev Tutorials by Rafael Fernandes on 9/17/2024 2:35:53 PM

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

Sidebar Navigation

Rafael Fernandes — Tue, 17 Sep 2024 14:35:29 GMT

Revision 1 posted to Dev Tutorials by Rafael Fernandes on 9/17/2024 2:35:29 PM

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