Skip to content

Indentation of root level patterns in navigation confusing #1341

Open
@renestalder

Description

@renestalder

I am using Pattern Lab Node v5.15.0 on Linux, with Node v16.0.0, using a Vanilla/Twig Edition.

The visual hierarchy of the menu items is off due to the used indentation.

Expected Behavior

The patterns on the first level in the navigation should be in one line with the groups/folders of that level. The next level then should have the indentation.

Screenshot from 2021-08-03 15-21-18
Screenshot from 2021-08-03 15-21-57

Actual Behavior

Both level of items have the same indentation, thus seems to be in the same visual hierarchy, while in reality, they are not.
Users aren't able to visually distinct the items of the group/folder "tag" from the rest of the elements that are outside of the group.

Screenshot from 2021-08-03 15-16-44

Screenshot from 2021-08-03 15-17-02

Steps to Reproduce
  1. Create an example pattern_patterns/test/test-1.twig and an example pattern _patterns/test/test-group/test-2.twig.
  2. See the result listed in the navigation as "Test", with a group "Test Group" and an item "Test 1".
  3. Expand "Test Group" to show the item "Test 2".

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions