Category Menu - Structure Mobile

jmombiela commented 4 years ago

What are you trying to accomplish?
I am trying to create a 3 level menu using Drawer and Category-menu for mobile devices.

What have you tried so far?
I was able to implement a drawer that has all categories-menu as children, the problem that in the second level of categories it does not allow me to generate a header to navigate through the menu or add icons that accompany the elements. Can the category menu component be further customized to get a more drawer-like result?

Additional info
Implemented code for the menu:

"drawer#menu-mobile": {
    "children": [
      "flex-layout.row#mainMenu-mobile"
    ],
    "props":{
      "tittle": "Drawer Menu Mobile",
      "isFullWidth": true,
      "backdropMode": "none",
      "blockClass": "menuCategoryMobile"
    },
    "blocks": ["drawer-trigger#menu","drawer-header#menu"]
  },
  "flex-layout.row#mainMenu-mobile": {
    "children": [
      "category-menu#category-almacen",
      "category-menu#category-bebidas",
      "category-menu#category-carnes",
      "category-menu#category-desayuno",
      "category-menu#category-electro",
      "category-menu#category-frutas",
      "category-menu#category-hogar",
      "category-menu#category-indumentaria",
      "category-menu#category-jugueteria",
      "category-menu#category-lacteos",
      "category-menu#category-limpieza",
      "category-menu#category-electrodomesticos",
      "category-menu#category-perfumeria"

    ],
    "props":{
      "horizontalAlign": "right",
      "preventHorizontalStretch": true,
      "fullWidth": true,
      "blockClass": "menuCategoryBodyMobile"
    }
  },

  "drawer-trigger#menu": {
    "children": ["icon#menu"]
  },

  "drawer-header#menu": {
    "children": [
      "drawer#login",
      "rich-text#enter",
      "drawer-close-button"
    ]
  },

  "rich-text#enter": {
    "props": {
      "text":"INGRESAR",
      "font": "t-heading-3",
      "textColor": "c-action-secondary",
      "blockClass": "menuCategoryMobileHeaderText"
    }
  }

Example of a category-menu (the rest are the same):

"category-menu#category-almacen": {
    "props": {
      "showAllDepartments": false,
      "showSubcategories": true,
      "menuDisposition": "right",
      "departments": [{
        "id": 67
      }],
      "blockClass": "menuCategorySecondItem",
      "blocks": ["rich-text#enter"]
    }
  },

Account	Workspace
poccarrefourarg	jmm

klzns commented 4 years ago

There's a prop called mobileMode that is missing from the docs that you can use on category-menu and might help you on that:

https://github.com/vtex-apps/category-menu/pull/92/files

jmombiela commented 4 years ago

Excellent! The only downside is that it does not allow me to generate a ul for each subcategory (I have 3 levels of categories in the menu that I am developing and I need each one to be a drawer), when I click on a li, the children of that create them as li brothers and what you would need is to generate an ul that contains them.

Do you know if there is any way to fix it? Thank you!

vtex-apps / store-discussion

Category Menu - Structure Mobile #414