• Expandable and Collapsible Menu: Displays a side menu with expandable and collapsible functionality.
• Header with Logo and Search Field: Includes a header that features a logo and a search field.
• Category and Item List: Features a list of categories and items, with the ability to expand subitems.
• Clickable Menu Items: Each menu item is clickable, enabling navigation to different screens.
• Responsive Design: The menu adapts to screen size and expansion state.

Collections for Side Menu

1. colSideMenu

This collection stores the items to be displayed in the side menu. Each entry must include the following columns:

Columns:

• Name: The name displayed on the button.
• Category: The grouping category of the button.
• Screen: The screen the button will navigate to.

Example:

ClearCollect(colSideMenu,
    {
        Name: "Item 1",
        Category: "Category A",
        Screen: Screen1
    },
    {
        Name: "Item 2",
        Category: "Category A",
        Screen: Screen2
    },
    {
        Name: "Item 3",
        Category: "Category B",
        Screen: Screen3
    }
); 

2. colChildMenu

This collection stores child items. If a parent item has child items, a downward arrow icon will appear next to its name.

Columns:

• Name: The name displayed on the button.
• ParentItem: The name of the parent item. This name must match an item in the colSideMenu collection.
• Screen: The screen the child item will navigate to.

Example:

ClearCollect(colChildMenu,
    {
        Name: "Child 1",
        ParentItem: "Item 3",
        Screen: Screen4
    },
    {
        Name: "Child 2",
        ParentItem: "Item 3",
        Screen: Screen5
    }
); 

3. colIcons

This collection stores icons for the menu items.

Columns:

• Name: The name of the item, matching the corresponding item in the colSideMenu collection.
• Icon: An SVG icon. Modify the fill attribute to fill="#COLORHERE" to allow the gallery to change the color based on the item's status.

Example:

ClearCollect(colIcons,
{
Name: "Item 1",
Icon: "data:image/svg+xml; utf-8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'><path fill='#COLORHERE' d='m7.4 21.308l-.708-.708l6.208-6.213l3.5 3.5l5.175-5.175l.713.713l-5.888 5.883l-3.5-3.5l-5.5 5.5ZM4.615 20q-.69 0-1.152-.462Q3 19.075 3 18.385V5.615q0-.69.463-1.152Q3.925 4 4.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v4.2H4v8.57q0 .23.192.423q.193.192.423.192v1ZM4 8.815h14v-3.2q0-.23-.192-.423Q17.615 5 17.385 5H4.615q-.23 0-.423.192Q4 5.385 4 5.615v3.2Zm0 0V5v3.815Z'/></svg>") },
{
Name: "Item 2",
Icon: "data:image/svg+xml; utf-8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'><path fill='#COLORHERE' d='M10 16.038q2.5 0 4.25-1.755T16 10.019t-1.75-4.263T10 4T5.75 5.756T4 10.019t1.75 4.264T10 16.038m0-3.442q-.213 0-.357-.144t-.143-.356V7.135q0-.213.144-.357q.144-.143.357-.143t.356.143t.143.357v4.961q0 .213-.144.356q-.144.144-.357.144m-3.346 0q-.213 0-.356-.144t-.143-.356V9.038q0-.212.144-.356t.357-.144t.356.144t.143.356v3.058q0 .213-.144.356t-.357.144m6.692 0q-.212 0-.356-.144t-.143-.356V10q0-.213.144-.356t.357-.144t.356.144t.143.356v2.096q0 .213-.144.356q-.144.144-.357.144M10 17q-2.931 0-4.966-2.033Q3 12.933 3 10.003t2.033-4.966T9.997 3t4.966 2.034T17 10q0 1.317-.457 2.493t-1.256 2.086l5.378 5.379q.14.134.14.34t-.14.358t-.353.14t-.354-.15l-5.36-5.36q-.929.8-2.105 1.257T10 17'/></svg>") }, {
Name: "Item 3",
Icon: "data:image/svg+xml; utf-8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'><path fill='#COLORHERE' d='m7.4 21.308l-.708-.708l6.208-6.213l3.5 3.5l5.175-5.175l.713.713l-5.888 5.883l-3.5-3.5l-5.5 5.5ZM4.615 20q-.69 0-1.152-.462Q3 19.075 3 18.385V5.615q0-.69.463-1.152Q3.925 4 4.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v4.2H4v8.57q0 .23.192.423q.193.192.423.192v1ZM4 8.815h14v-3.2q0-.23-.192-.423Q17.615 5 17.385 5H4.615q-.23 0-.423.192Q4 5.385 4 5.615v3.2Zm0 0V5v3.815Z'/></svg>") } )