Building a Sleek and Expandable Left Navigation Component in Power Apps

-

 Building a Sleek and Expandable Left Navigation Component in Power Apps

Overview

A well-designed navigation menu is essential for user experience in any app, and Power Apps provides a flexible platform for creating custom components tailored to your app’s needs. In this blog, I’ll walk you through the steps to create an expandable, sleek left-navigation menu component with customizable properties. This guide uses the reference image for the final look, with an emphasis on elegance and responsiveness.

Intro

Features

  • Expandable and Collapsible Design: A Boolean property (propVarMenuOpen) toggles the menu’s width between expanded and collapsed states.
  • Customizable Menu Items: A property (propItems) allows you to dynamically define menu items, including icons, names, and navigation screens.
  • Themed Background: Two properties (propDarkColor and propLightColor) enable gradient theming.
  • Company Branding: A company logo (propHeadderImage) and name (propCompanyName) are prominently displayed at the top.
  • User Profile at the Bottom: Displays the logged-in user’s profile picture and full name.

Technology Stack

  • PowerApps: The platform used to create the application and design the user interface.

Custom Properties

Property NameTypeDescription
propItemsTableDefines the menu items (name, icon, screen).
propVarMenuOpenBooleanTracks whether the menu is expanded or not.
propDarkColorColorSets the darker part of the gradient.
propLightColorColorSets the lighter part of the gradient.
propHeadderImageImageDisplays the company logo.
propCompanyNameTextDisplays the company name.


Screenshots

Intro Intro Intro

Github URL : https://github.com/schetti92/PowerApps/tree/main/ExpandableLeftNavComponent




Regards - Shashika Hettiarachchi ❤️

Comments

Post a Comment

Popular posts from this blog

[SOLVED] The SharePoint Timer Service service terminated unexpectedly. Event ID : 7031

-
Image
The SharePoint 2013 Timer service terminated unexpectedly.  It has done this  34  time(s).  The following corrective action will be taken in 30000 milliseconds: Restart the service Login Name : System Source : Service Control Manager Event ID : 7031 Level : Error                                    Keywords : Classic User : N/A                                       Computer : MyDomain If you are getting above error. Try to do the following steps  1.  Clearing the configuration cache Stop the Sharepoint timer service Go to C:\ProgramData\Microsoft\SharePoint\Config\*GUID Back up Cache.ini Delete all the .xml file ( Do not delete the Cache.ini file ) Open Cache.ini (Edit with Nodepad) Replace the contents with the number 1 and save the file...
Read more

Nintex Forms : Print to PDF, hide the Control Buttons (Custom JavaScript Button)

-
Image
If you wants to hide the Save, Cancel buttons while you printing your Nintex form, please follow the bellow steps Add a new button to your form designer  Go to "Control setting" of the Button  Figure 1 : Custom Button Control Settings  Add the Settings as above in the Figure 1 Use the below code for the Client Click field :  NWF.FormFiller.PrintToPDF.PrintToPDF(); Add a CSS Class to the controls that you wish to hide during print command (Figure 2) Figure 2 : CSS Class Use the below CSS script on the form control settings Nintex Form > Settings > Custom CSS                 @media print {                 .myButton {                      visibility: hidden! important;                           }         ...
Read more

FIX : The password supplied with the username Domain\Username was not correct. Verify that it was entered correctly and try again.

-
Image
This will happen often while trying to create a new web application in SharePoint 2013 central administration site. It gives the following error This usually occur when farm account password is expire and it's password is changed or simply farm account password is changed. In that case, sometimes password stored in SharePoint database is different in Active Directory, so unable to create web application from central admin.  In order to resolve this problem you need to update SharePoint 2013 farm credentials using "STSADM" tool. For that Open PowerShell in administration mode then write the following code stsadm -o updatefarmcredentials -userlogin <UserAccount> -password <New-password> Example : Once you receive operation completed successfully message do a IIS reset !! FYI : In case if you getting an error message " stsadm not recognized as an internal command " Follow these instructions.. Happy Coding !! ...
Read more