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.

This scenario includes two different menu controls:

1. Collapse Menu: When the menu is collapsed, icons appear and the content area expands. The menu can be toggled between expanded and collapsed states.
2. Hamburger Collapse Menu: The menu is completely collapsed, and only a small ☰ (hamburger) icon appears in the top-left corner. The menu can be reopened by tapping this icon.

Scenario: Fully Open/Close Menu with Hamburger Menu

Mobile users should be able to fully open or close the menu by clicking the ☰ icon in the top left corner of the screen.

Application Steps:

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

With this structure, users can completely close the menu to get a wider content area.

Additional Scenario: Collapsing the Menu (Collapse Menu)

Users can use a separate button to collapse the menu (show only the icons) while the menu is open.

Application Steps:

1. Place a button or icon element on the UI screen.
2. Assign the following action to this element:
   
   • OnClick → UI Control → Toggle Collapse Menu
   • Component to Change: sidebarMenu

This allows users to save space by collapsing the menu instead of closing it completely.

• 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.