It is important to understand each new component’s structure before you start refactoring your code. This redesign uses Sugar’s standard layout component plugin metadata as you are used to, however, in a new location.
The two main layouts introduced in Sugar’s redesign are:
- header-nav – Base layout hosting components on the top of the screen
- sidebar-nav – Base layout hosting components on the left side of the screen
Sugar’s base platform loads those newly created layouts amongst other unchanged components required to compose our redesigned UI.
In the following image those components are outlined for better understanding on where they are the role they play in the overall design of the page.
Important: As you go through the new redesign and compare with your code, use this opportunity to use Extension Framework to move your changes from “Prior to 12.3” to this release as this is the only recommended approach and best practice we advocate.
As a reminder, customizing “base” core files is wrong and will complicate future upgrades.
You understand the new structure, let's get to header:
Move on to Top Header (header-nav).