Horizontal menu component

[ihouvet]

Horizontal menu component

[hlayisanimazuze]

Hi @Lukeybooi, With the current implementation, I am unable to test this item due to incomplete requirements. I cannot style the existing menu to meet the specified requirements.

[Tshepiso-R]

Hey @Lukeybooi,
It’s very difficult to use the custom style to meet the criteria. We need to focus on implementing the remaining requirements.

[Lukeybooi]

Hi @Tshepiso-R I've added a color picker to change the menu item and selected menu. This should meet your criteria.

[Tshepiso-R]

@Lukeybooi

1. There is still a need for custom styling properties for onHover and onSelect. This should be a code styling editor that allows a user to add CSS styling.
2. The "Selected Item Background" and "Selected Item Color" properties should be renamed to "Hover Background Color" and "Hover Item Color," respectively, as these properties currently work when you hover.
3. Add "Selected Item Background Color" and "Selected Item Color" properties.
4. Currently, the "Selected Item Background Color" and "Selected Item Color" properties only apply to grouped menu items. This implementation should also be extended to menu items.

[Tshepiso-R]

1. Scroll Overflow Issue:

   • When scroll overflow is selected, a line appears either above or below the menu items, depending on the browser.
   • Expected Behavior: No line should appear underneath when scroll overflow is selected by default.
   • 

2. Scroller Enhancement:

   • The scroll icons currently have a default background color and a fixed icon color.
   • Expected Results: A transparent background is proposed, allowing the scroller to inherit the background color of the container or item, and the scroll icons to inherit the item color. The scroller must also inherit the hover styling.
   • 

3. Inconsistent Hover Transition:

   • The hover effect on group items shows a smooth transition, but when applied to an individual group, the color changes slow and noticeable.
   • Expected Behavior: Hover color transitions should be consistent across both individual items and menu groups.

4. Active Group Color Issue:

   • The active item color is not applied to the active group.
   • Expected Behavior: The configured active item color and background should be correctly applied to the active group.

5. Expose Additional Properties:

   • Height
   • Font Size
   • Gap (Space between the menu items)
   • Custom Styling on Hover (Code Editor)
   • Custom Styling on Selected (Code Editor)

6. Add Dropdown Icon for Group Menu Items:

   • Currently, you cannot differentiate between individual items and group items.

7. Property Renaming:

   • Change the properties "Selected Item Color" and "Selected Item Background" to "Hover Item Color" and "Hover Item Background" respectively.