Advanced menu with Flex Layout

[github-learning-lab[bot]]

Advanced menu with Flex Layout

:sparkles: Branch: menuflex

Introduction

As we've seen in the last step, a Submenu accepts any Store Framework block as child.

With this in mind, we can improve the previous activity's Menu configuration, adding to its content by using Flex Layout.

Activity

According to what we did in the last activity and what was learned about Flex Layout, let's apply Flex Layout to the Major Appliances submenu.

1. In the menu.jsonc file, remove the block of code in which you define vtex.menu@2.x:submenu#major and also its children:

   "vtex.menu@2.x:submenu#major": { 
         "children":[ "vtex.menu@2.x:menu#major" ]
     },
     "vtex.menu@2.x:menu#major": { 
         "children": [ 
             "menu-item#refrigerators", 
             "menu-item#ovens", 
             "menu-item#washers" 
         ], 
         "props": { 
             "orientation": "vertical" 
         }
     },

2. Create the menu-flex.jsonc file; flex-layout.row#major will be in the children list pertaining to the vtex.menu@2.x:submenu#major block and it's defined as:

   {
     ...
     "flex-layout.row#major": {
       "children": [
         "flex-layout.col#menu",
         "flex-layout.col#img"
       ]
     },
     ...
   }

3. Now, let's declare the blocks defined in flex-layout.row#major. To start, declare the flex-layout.col#menu block, having vtex.menu@2.x:menu#major as child;

4. Do the same for the flex-layout.col#img block, declaring image#menu and rich-text#header as its children, in addition to the following props:

   ...
   "props":{
     "paddingRight": 4,
     "horizontalAlign": "right"
   }
   ...

5. Lastly, let's declare the former image#menu as child in this last step, using the code below:

   ...
   "image#menu": {
     "props": {
       "src": "https://appliancetheme.vteximg.com.br/arquivos/menu-washer.jpg",
       "link": {
         "url": "/small-appliances/coffee-makers"
       },
       "alt": "Coffee Makers Collection",
       "maxWidth": "200px"
     }
   }

:information_source: Remember to access the documentation of both Flex Layout and Menu if you have any questions during the activity.

Expected result:

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation: menu.jsonc :white_check_mark: Code compilation: menu-flex.jsonc :white_check_mark: Major appliances submenu must contain a flex-layout row as children :white_check_mark: flex-layout row must be correctly stated :white_check_mark: flex-layout row must contain two cols as children :white_check_mark: flex-layout columns must be correctly stated :white_check_mark: flex-layout colum must contain major appliances menu as children :white_check_mark: flex-layout colum must contain image and rich-text as children :white_check_mark: flex-layout colum must contain correct props :white_check_mark: flex-layout colum must contain correct props :white_check_mark: image component must be correctly stated :white_check_mark: image component must contain correct props

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!