In this learning content, we will prepare the design of the menu to be opened with the hamburger menu icon we prepared in the Header Design video.
We will open the screen prepared for the Left menu in Drawer type. Menu screen has a header and a footer. In the header there is a Label element with the menu name and an exit icon to close the menu. In the footer, there is an icon and a Label element in the Horizontal Stack element. The menu has three menu items to navigate to the Dashboard screen, the list screen and the add new staff screen. Each menu item consists of icon and label elements in the Horizontal Stack element in a Row.
In this learning content, we will prepare the design for a menu that will be opened with the hamburger menu icon created in the Header Design video.Let's start by examining the menu design we aim to create.We will open the screen prepared for the Left Menu in the Drawer type. The menu screen consists of a header and a footer. The header contains a Label element displaying the menu name and an exit icon button to close the menu. The footer contains an icon and a Label element within a Horizontal Stack element. The menu includes three menu items that provide navigation to the Dashboard screen, the list screen, and the new personnel addition screen. Each menu item consists of icons and label elements within horizontal stack elements placed in Rows.When you create a new application, the Left Menu screen comes by default. You can work on this screen or prepare the menu through a new screen.Progressing with additions to the existing design will make your work easier. First, select the Row containing the default Dashboard item in the Left Menu screen and duplicate it.
Select the icon of the newly duplicated item and change its icon in the Properties panel. Then, change the text of the Label element that came as a duplicate using the Properties panel > Fixed Value to Employee List.
Now, duplicate the Employee List item to create a third menu item.
Change the icon of the third menu item in the Properties panel by selecting a new icon through the Icon option. Change the text of the Label element using Properties panel >FixedValue to NewEmployee.This way, let's complete the screen design with the Left Menu design.
In this learning content, we will prepare the design of the menu to be opened with the hamburger menu icon we prepared in the Header Design video.
We will open the screen prepared for the Left menu in Drawer type. Menu screen has a header and a footer. In the header there is a Label element with the menu name and an exit icon to close the menu. In the footer, there is an icon and a Label element in the Horizontal Stack element. The menu has three menu items to navigate to the Dashboard screen, the list screen and the add new staff screen. Each menu item consists of icon and label elements in the Horizontal Stack element in a Row.
In this learning content, we will prepare the design for a menu that will be opened with the hamburger menu icon created in the Header Design video.Let's start by examining the menu design we aim to create.We will open the screen prepared for the Left Menu in the Drawer type. The menu screen consists of a header and a footer. The header contains a Label element displaying the menu name and an exit icon button to close the menu. The footer contains an icon and a Label element within a Horizontal Stack element. The menu includes three menu items that provide navigation to the Dashboard screen, the list screen, and the new personnel addition screen. Each menu item consists of icons and label elements within horizontal stack elements placed in Rows.When you create a new application, the Left Menu screen comes by default. You can work on this screen or prepare the menu through a new screen.Progressing with additions to the existing design will make your work easier. First, select the Row containing the default Dashboard item in the Left Menu screen and duplicate it.
Select the icon of the newly duplicated item and change its icon in the Properties panel. Then, change the text of the Label element that came as a duplicate using the Properties panel > Fixed Value to Employee List.
Now, duplicate the Employee List item to create a third menu item.
Change the icon of the third menu item in the Properties panel by selecting a new icon through the Icon option. Change the text of the Label element using Properties panel >FixedValue to NewEmployee.This way, let's complete the screen design with the Left Menu design.
