Preparation of header design

In this learning content, we will learn step by step how to design the Header, the header section of an application's home page, Dashboard and other screens. 

This design will be used on various screens of the app, including the Dashboard screen. The Header design we will get at the end of the tutorial will include an icon on the right side leading to the notifications screen, a user image, the user's name and title, and a dropdown menu.

Now, let's prepare this Header design step by step for the Dashboard screen we will work on later:

1. Open the HomePage screen via the Screens panel.
2. Delete the Row element on the screen.
3. Add a Header element to the screen. 
4. Change the background color of the header with Background selection.
5. Drag and drop a Row into the Header and turn it into a single column.
6. Select the column and align it to the right.
7. Add a Horizontal Stack inside the column and set the Gap value to 24. 
8. Center the Horizontal Stack you added vertically.
9. Add an icon in the Horizontal Stack and select an icon from the icon library.
10. In the Horizontal Stack, next to the icon, add a Content Menu. 
11. Add a Horizontal Stack in the Content Menu and set the Gap value to 16.
12. With Horizontal Stack selected, center it vertically. 

Now let's work on the Image element that will contain the user image.

13. Add an Image element in Horizontal Stack and load a temporary image.
14. With the Image element selected, change ImageFit to Fill in Properties.
15. Then remove the default value of 100 in the Styling panel Layout field and add the Image32 ready-made style.
16. Again with the Image element selected, add the Radius preset style from the Border field.

After working on the Image element that will contain the image of the logged in user, let's prepare the fields that will contain the name and title information.

17. In the Horizontal Stack, next to the Image element, add a Vertical Stack element and set the Gap value to 1.
18. Align the Vertical Stack element to the left.
19. Then add a Label element to the Vertical Stack.
20. Give the Label element a temporary name.
21. Add the H3 ready style from the Text field.
22. Then Duplicate the Label.
23. Add a temporary title to the Label you duplicated.
24. Remove the existing preset styles in the Text field and add the H6 preset style.
25. Then add an icon element next to Vertical Stack and select the icon.
26. Now select ContentMenu via BreadCrumb and open the Properties panel.
27. Delete the other elements, leaving two Content Menu elements.
28. Name the first item Profile and the second Logout.
29. With Logout selected, change the text color in the Styling panel, Text field.

Thus, our Header design is ready.

‍