Step 1: Create Menu Data (Collection)

Instead of hardcoding buttons, we create a dynamic menu using a collection.

ClearCollect(

    ColMenu,

    [

        {Title:"Dashboard", IconName:"Home", Screen: Dashboard},

        {Title:"Timesheets", IconName:"Calendar", Screen: Timesheets},

        {Title:"Projects", IconName:"DocumentAdd", Screen: Dashboard},

        {Title:"Employees", IconName:"People", Screen: Dashboard},

        {Title:"Leave", IconName:"Clock", Screen: Dashboard},

        {Title:"Reports", IconName:"History", Screen: Dashboard},

        {Title:"Setting", IconName:"Settings", Screen: Dashboard}

    ]

)

This makes your navigation dynamic and scalable

Step 2: Add Sidebar Layout

Insert a Vertical Container:

• Width: 250px
• Fill: #FFFFFF
• Padding: 20
• Layout: Vertical

Inside this container:

• Logo section
• Menu gallery
• Profile section

Step 3: Insert Gallery for Menu

Insert a Vertical Gallery inside sidebar.

Set Items:

ColMenu

Step 4: Add Navigation Logic

Inside gallery (OnSelect):

Set(varActiveMenu, ThisItem.Title);

Navigate(ThisItem.Screen, ScreenTransition.Fade)

This will:

• Navigate to selected screen
• Track active menu

Step 5: Highlight Active Menu (Important UI)

Background (Fill):

If(

    varActiveMenu = ThisItem.Title,

    RGBA(238,242,255,1),

    Transparent

)

Text Color:

If(

    varActiveMenu = ThisItem.Title,

    RGBA(91,95,239,1),

    RGBA(107,114,128,1)

)

text Property - ThisItem.Title

Step 6: Icon Design Styling

• Size: 20x20
• Color:

If(

    varActiveMenu = ThisItem.Title,

    RGBA(91,95,239,1),

    RGBA(107,114,128,1)

)

Item Property = ThisItem.IconName

Profile Section (Bottom)

Add a small card at bottom:

• Height: 70px
• Fill: #F3F4F6
• Radius: 12

Include:

• User initials (circle avatar)  = User().Image
• Name User().FullName
• Role User().Department

Best Regards,

Pankaj Jangid (OyePanky)

Power Platform Developer

YouTube: @Oyepanky

Watch Full Video =