Toggle Hamburger Menu Collapse

1. Prepare the UI Design

• Open your project on the Kuika platform.
• Select or create a screen containing a hamburger menu from the UI Design section.
• Add a Menu element and give it a name (e.g., hamburgerMenu).
• Add an Icon or Button that will trigger the menu open/close function. (e.g., ☰ symbol)

• Click on this element and add the UI Control > Toggle Hamburger Menu Collapse action by selecting the appropriate trigger event (Initial Actions, OnClick, etc.) from the +ADD ACTION menu.

• Set the action parameters:

• Parameter Name: Component to Change
• Required: Yes
• Description: The hamburger menu element that needs to be opened or closed.
• Example: hamburgerMenu

The relevant menu element can be easily selected via the Symbol Picker.

Scenario: Mobile users should be able to open the menu by clicking on the ☰ icon in the upper left corner of the screen and close the menu again with the same icon.

Application Steps:

1. Add an Icon element to the UI screen.
   
   • Icon: Hamburger (☰)
2. Define the following action for the icon:
   
   • OnClick → UI Control → Toggle Menu Collapse
   • Component to Change: hamburgerMenu

This structure allows users to easily open and close the menu and use the application area more efficiently.

• Conditional Display: The menu can only be opened under certain conditions or roles (e.g., only for logged-in users). Add Condition can be used for this purpose.
• Status Indicator: Different icons or text can be displayed when the menu is open or closed to make it easier for the user to understand the menu status.

Technical Warnings

• Clarify the initial state: Whether the menu is open or closed when it first opens should be determined in the UI design. If necessary, the initial view can be fixed with Change Visibility Of.
• Responsive compatibility: The menu can be configured to appear as a hamburger on mobile devices and as a fixed side menu on desktops.

Toggle Hamburger Menu Collapse is an essential action for all applications aiming to provide a simple, flexible, and user-centric interface. It modernizes menu interactions on both mobile and web platforms, optimizes screen space, and simplifies navigation for users.