[megamenu] creating a data structure for the megamenu/topmenu

[FFawzy]

according to Zoe's designs for the new megamenu. lets try to design a new structure that allows the needed nesting and data.

[timonrey]

@FFawzy @gabriele-ct

My proposal for the data structure for the megamenu:

• menu-title: first-lvl entry
• title: second-lvl entry
• page-title: third-lvl entry
• footer-title: Entries for the section below the megamenu with only a path to the page
• label: subsection (bold text) that can be used on second or third lvl:

You can also look into the megamenu design for content to compare it with the data structure: https://www.figma.com/file/GqhHFUcEaMxBXnMM9TXdaZ/%F0%9F%9F%A2-Feedback-Board?type=design&node-id=1126-5790&mode=design&t=j3R0DsPlTDPU3rq2-0

- menu-title: All products
  items:
    - title: Composable Commerce
      items:
        - label: APIs
          items:
            - page-title: HTTP APIs
              href: /../path-to-page
            - page-title: GraphQL APIs
              href: /../path-to-page
        - label: BUSINESS TOOLING
          items:
            - page-title: Merchant Center Quickstart
              href: /../path-to-page
            - page-title: Merchant Center Documentation
              href: /../path-to-page
        ...
- menu-title: Developer tooling & librabries
  items:
    - title: API Tools
      items:
        - label: COMPOSABLE COMMERCE
          items:
            - page-title: Postman Collection
              href: /../path-to-page
            - page-title: GraphQL explorer
              href: /../path-to-page
            - page-title: cURL
              href: /../path-to-page
    - title: SDKs
      items:
        - label: COMPOSABLE COMMERCE
          items:
          - page-title: Java SDK
            href: /../path-to-page
          - page-title: Javascript SDK
            href: /../path-to-page
          - page-title: DotNET Core SDK
            href: /../path-to-page
          - page-title: PHP SDK
            href: /../path-to-page
          - page-title: iOS Swift SDK
            href: /../path-to-page
        - label: CONNECT
          - page-title: Connect SDK
            href: /../path-to-page
        - label: CHECKOUT
          - page-title: Checkout SDK
            href: /../path-to-page
    - title: UI KIT
      href: /../path-to-page
    - label: COMPOSABLE COMMERCE
      items:
        - title: Developer Guides & Tutorials
          items:
            - page-title: ...
              href: /../path-to-page
            - page-title: ...
              href: /../path-to-page
            - page-title: ...
              href: /../path-to-page
    - label: FRONTEND
      items:
        - title: Developing Components
          items:
            - page-title: ...
              href: /../path-to-page
            - page-title: ...
              href: /../path-to-page
            - page-title: ...
              href: /../path-to-page
        - title: Developing Extensions
          items:
            - page-title: ...
              href: /../path-to-page
            - page-title: ...
              href: /../path-to-page
            - page-title: ...
              href: /../path-to-page
- menu-title: Learning
  items:
    - label: COMPOSABLE COMMERCE
      items:
        - title: Administrator learning path
          href: /../path-to-page
- menu-title: Release Notes
  href: /../path-to-page
- footer-title: Free trial
  href: /../path-to-page
- footer-title: Log in to Merchant Center
  href: /../path-to-page

[timonrey]

And for the footer:

• category-title: heading for the column (bold text)
• title: simple entry inside of the column

Design for the footer: https://github.com/commercetools/commercetools-docs/issues/3609#issuecomment-1671036247

- category-title: Product
  items:
    - title: All products
      href: /../path-to-page
    - title: Composable Commerce
      href: /../path-to-page
    - title: Frontend
      href: /../path-to-page
    ...
- category-title: Help
  items:
    - title: Support portal
      href: /../path-to-page
    - title: System Status
      href: /../path-to-page
- category-title: Resources
  items:
    - title: Tech blog
      href: /../path-to-page
    - title: Migration guides
      href: /../path-to-page
    ...

[FFawzy]

@timonrey what is the difference between title and label .. I'm looking at the designs and they are both the same from design perspective (same size, weight ..etc), is it just naming difference ?

and essentially any of them can be clickable if they don't have children (aka items) even first level (like support)

what about just title, items and href .. I'm thinking out loud with you maybe you thought about that already and found something wrong with it 😄

[timonrey]

@FFawzy The problem is that we need a way to define the section headers (bold text, I called them labels...but we can can also find a better name for it). The easiest way to implement it is if we define them in the data structure, too. There are a lot of different section headers that the tech writers want to define...not just CoCo and CoFE. You can also see that here: https://www.figma.com/file/GqhHFUcEaMxBXnMM9TXdaZ/%F0%9F%9F%A2-Feedback-Board?type=design&node-id=1126-5790&mode=design&t=j3R0DsPlTDPU3rq2-0

They can be defined on the 2nd and 3rd level. And they are not clickable, so no links.

and essentially any of them can be clickable if they don't have children (aka items) even first level (like support)

Exactly, as soon as the entry has items, the entry should not be clickable. And labels should always have items and no href. So in theory, any of them can be clickable.

[FFawzy]

@timonrey I'm not speaking against titles (I know it is needed) I'm only discussing the naming of the fields

what speaks against something like this.

- title: All products
  items:
    - title: Composable Commerce
      items:
        - title: APIs
          items:
            -title: HTTP APIs
              href: /../path-to-page
            - title: GraphQL APIs
              href: /../path-to-page
        - title: BUSINESS TOOLING
          items:
            - title: Merchant Center Quickstart
              href: /../path-to-page
            - title: Merchant Center Documentation
              href: /../path-to-page
        ...

wouldn't it be more complex in implementation to figure whether you are now in level two or three and you need to use title or label or page title or menu-title ?

wouldn't the above structure be easier? if there is a title then it is styled if it has items then not clickable otherwise it has a link .. etc

[FFawzy]

now that Zoe clarified that we have 3 types of titles (a clickable title, a non-clickable label and a leaf which points to a link), we can add that label filed back into our structure just like Timon suggested at the beginning

[gabriele-ct]

Yes, let's keep the Timon's approach. It's a good starting point. Nothing is written in stone anyway and if needed we can tweak the structure on the go 👍

[timonrey]

Nice 👍 Since we've agreed on the structure, I consider this ticket closed. But I'll keep it open until it's implemented so that we can find it easier if we want to discuss something.

[adinakleine]

Can this be closed @timonrey?

[FFawzy]

Yes .. it was implemented .. Thanks @adinakleine