App menu organization

Grasshopper ShapeDiver
1

Hi @mathieu1 ,

  1. How can be organized App Menu like Shape Diver’s client Nove25 has done ( https://www.nove25.net/en/mynove25/letter-dotted-signet-ring )? I like their menu because I can’t open a new menu option without closing the previously opened one. In this way, the user is not lost in too many options derived from each sub-menu option that remains open - as it is happening for example at Geschenkmünze client ( https://www.geschenkmuenze.de/jetzt-konfigurieren/ ).
  2. There is any option to assign a different color to each menu category? In this way, they can be easily identified and differentiated
  3. There is any way to modify the width of the menu (container?) to increase the viewer dimension?
    Thank you in advance!
2

  1. Nove25 is not using the App Builder, they have created their own user interface and connect to ShapeDiver models using the viewer API. However, your suggestion in point 1 makes sense, we have noted it as a potential improvement.

  2. At the moment, it is not possible to assign different colors to different menu categories, this might become possible in the future.

  3. Have you read our section about customizing themes? At the moment, this is a little intricate: you have to create a json file and host it somewhere, then reference it in your App’s URL.
    Below is an example of some default values used for Apps:

{
    "version": "1.0",
    "themeOverrides": {
        "components": {
            "AppBuilderAppShellTemplatePage": {
                "defaultProps": {
                    "headerHeight": {
                        "base": "4em",
                        "md": "4em"
                    },
                    "navbarBreakpoint": "md",
                    "navbarWidth": {
                        "md": 250,
                        "lg": 300
                    },
                    "columns": 3,
                    "rows": 3,
                    "rightColumns": 1,
                    "bottomRows": 1,
                    "bottomFullWidth": false
                }
            }
        }
    }
}

The width of the left container can be modified using the navbarWidth property. For the right container, it is part of a grid with the viewer, so you can modify the number of columns of the grid from 3 to 4 for example if you want to make it smaller.
Below is a modified version with a left container that is 50px smaller, and for the right container it takes 1 column out of 4 (instead of 3):

{
    "version": "1.0",
    "themeOverrides": {
        "components": {
            "AppBuilderAppShellTemplatePage": {
                "defaultProps": {
                    "headerHeight": {
                        "base": "4em",
                        "md": "4em"
                    },
                    "navbarBreakpoint": "md",
                    "navbarWidth": {
                        "md": 200,
                        "lg": 250
                    },
                    "columns": 4,
                    "rows": 3,
                    "rightColumns": 1,
                    "bottomRows": 1,
                    "bottomFullWidth": false
                }
            }
        }
    }
}

I uploaded the second version of the json here: https://shapediverdownloads.s3.us-east-1.amazonaws.com/theme.json

Now I can reference it in my App’s URL by adding &g=MY_JSON at the end.

You can compare the same App with the default theme here and with the modified theme here.

3

Thank you @mathieu1 ,
I have to study as there are many new things for me (I thought it should be something more simpler like “container’s width”!
I like more the modified theme - more space for the viewer!

1 Like