What an insane Video. Coding for a couple Month now in PowerApps and never had a tutorial where everything worked perfect. Thank you very much. I will watch more Videos of you fore sure!
Hi Nik, great content For image not visible, I followed below steps. 1. See if you have filled the container with blue color 6:45. 2. See if the X and Y property of image are 0
Man, you are legend. You made the complex task very simple.Thank you very much.Greatest content in Left Navigation. Appreciated your 💯 effort and learnt from you brothe.r 🙏🏽
This was super insightful, Nik! Could you do a similar tutorial on creating a grid menu layout component-something with 3 or 4 columns and flexible rows? It’d be awesome to see your take on that!
@@TheAnalystNik a tile-based menu designed for a clean and organized display of multiple options. uses a grid structure to present items, with each item contained within a uniformly sized tile. typically used in dashboard-like interfaces or navigation panels within apps, providing users with an intuitive way to access different sections or features.
Wow! The sidebar you've created is awesome. Could you please create a part 2 of this video with a header and content section on the other side? Thanks so much!
Direct sub. I have a new role creating Power Apps in my company and I really would like to create them just with modern design. Not something simple, boring and ugly like a lot of Power Apps is created.
I love that thank you. Hope you enjoy your new role and I’ll make sure to keep the content coming and giving inspiration for modern app designs. Let me know if you have any suggestions for future videos!
@@TheAnalystNik For sure more content about responsive designe. You know, a lot of us has companeis computer and mobile phone and it doesn't have sense to split app for a desktop and the mobile version. Better keep everything in one app which scale according to device.
@@theAprilll great suggestion and that's one I definitely want to cover. I'm working on a project management app to showcase many things, one of them being responsive. Might do a "Let's Build" series
Hi Sir Nik, I appreciate the work you do. it helps a lot. I would just like to ask if I create it as a component library, I cannot access the app scope, what can I do as a workaround? or can I only use this component inside the app scope? Thanks again!
Hi! In order to create this in a component library you will have to use a different approach, I made a video on this and although the design is different, you can try to re-create this menu using that method. Hope it works out! ruclips.net/video/leFWNCWU8Mw/видео.htmlsi=0I0sp9g4AtWeu4q7
Thanks. I have also seen that video. I have added more properties for it to work just like in your video. Thanks again! Will wait for more videos of yours.
thank you! I haven't tested this, but you could add an additional property to each of your MenuItems like Admin: true or Admin: false, then you can filter the gallery that checks if the current user is an admin (not sure the method you are using here, but assuming you have it stored in a variable varAdmin, it would be: If(varAdmin = true, Filter(MenuItems, Admin = true), Filter(MenuItems, Admin = false)) Hope that helps!
Thank you so much for your effort and great Tutorials. Is there a way to have the long codes (like what you had in the image) somewhere to be easy to copy from (rather than the huge typo mistakes)? Thanks in advance.
thanks for the feedback and yes the code is quite long! Video description doesn't allow for angled brackets, but I'll post it in the comments and hopefully that helps a few people. Cheers
Hello again! Could you create another version of this, but with a multilevel submenu for the sidebar? I just watched your latest video, and your work is excellent. I'm wondering if you could make a similar version with a sidebar, as many apps come in different sizes and often need an additional submenu. I hope you’ll consider this request. Thank you once again!
@@TheAnalystNik I’m glad to hear that! I really appreciate the quality content you put out. your channel is one of my go-to resources rn for learning. Looking forward to the video when it comes out! Cheers!
@@TheAnalystNik thank you so much! I was able to find a text parser from image tool to help me complete your tutorial. You are a master, and I hope to learn much more from you in subsequent videos!
Spectacular video! How would I incorporate additional actions when one of the buttons is pressed? For example: one button goes to a screen and resets the form and variable
Good question. I would recommend you put these additional actions on your screens OnVisible and/or OnHidden properties. They’ll run each time you navigate across screens
@@TheAnalystNik Thank you for the recommendation. I had thought about onVisible, but it wasn't going to work with some of the other ways to get to the same screen (e.g. set new form or edit the form). Solved it by adding a switch statement into the OnSelect of the btnSelectItem before the Navigation. Switch( ThisItem.Name, "Home", [Actions needed], "Search", [Actions needed] ) Navigate(ThisItem.Screen); Set(varMenuSelected, ThisItem.Id)
Yeah if you're trying to create a responsive app, I recommend using containers on your screen and plugging in the navbar within it. I'll have a video coming up that will show you how to build a fully responsive app with a navigation menu. Cheers!
do you know why in min 9:24 the arrow animation is not working for me, is not showing for some reason. Ive reviewed several times and while it doesnt show any errors, im not seeing the white arrow at all. do you know why that could be?
It’s hard to say without seeing the steps you took but let me take a guess: check the X and Y properties of imgToggleIcon but check their values are both 0 in the top formula bar. Sometimes powerapps changes them without your knowledge, even if it says they’re at 0 in the right navigation.
@@TheAnalystNik I am having the same issue. I have checked the X, Y and they are both 0. I've also gone through the video 2 times making sure nothing was missed. Any other ideas as to what this could be? Wonderful video by the way.
@shomari169 Oh I see. Since custom pages are limited to only one page, canvas components can only be brought in through a component library, which is different from the standalone canvas apps, which have the ability to create components at the app level. If building a navigation menu through a component library, it would have to be built differently from what I’ve shown in this video as it’s built at the app level. Hope that helps and I might do a video on this in the future. Cheers
If the component was inserted into a sidebar container, is there any way that the sidebar container can be dynamically resized based on the component width being toggled?
@@sudosaurus hi, can you explain this a little more. I wish to have this done in a way, when menu toggled then right-side container shall be resized/responsive. Thanks
Hi Very good video. I am following your video to create side navbar. I am having some issues in it. can you please please help me in it. How to approach you?
I absolutely love this component, thank you! I have a slight problem with my icon color - it stays dark instead of changing to light when the icon isn't selected. I quadruple-checked the image formula and mine is exactly the same as the video's. Do you have any suggestions how I can troubleshoot this?
@@TheAnalystNik I figured it out - instead of "currentColor", my svg code contained a hex#. I replaced all the hexes with "currentColor" and it works beautifully now :)
@@TheAnalystNik It doesnt work for me atm. All the icons got the color as they are clicked. So it doesnt change the color when i click the icon because its already like that on every icon.
@TheAnalystNik I really liked your menu and I am trying to make the component inside a component library and there is something I am not able to do with the Width property of the main component LeftNav: If(varMenuOpen, 200, 80) The global variable varMenuOpen where should I declare it? In the OnVisible of Screen1? I am not able to change the size when they click on the Toggle. It has worked perfectly if the component is created inside of a canvas application, but if I do it inside a component library I am not able to do it :(
Hi! When creating it within a Component Library, there are some different steps needed. I created a video on it with a different style navigation but you can try to combine the methods to re-create this inside a component library. Let me know if that works for you!
@@TheAnalystNik I've been watching your other video where you create the menu inside a component library, but the difference is that the menu has a fixed size and this one the width is dynamic depending on whether you press the toggle or not and that's what I'm having problems with.
I see, ok give this a try: 1. Enable "Enhanced component properties" under Settings > Updates > Experimental tab 2. Within your Component Library, select your component and create a new custom property "Icon OnSelect", Property Type "Event". 3. Select your icon, and update its OnSelect property to: YourNavName.IconOnSelect() 4. Go to the app and insert your component and update its "Icon OnSelect" property to Set(varMenuOpen, !varMenuOpen); 5. Update the component Width property to If(varMenuOpen, 200, 80) Hope that works out!
@@TheAnalystNik In the end I got it easier: - I created an output MenuWidth property of type number. - I have assigned it the value: If(varMenuOpen,200,80) - Finally, in the Width property of the LeftNav component, I have assigned it the value LeftNav.MenuWidth Thank you very much!
for some reason in the navigation the menu icons isn't showing, i pasted like you said by replacing the " with ' , but still the images aren't visible .Can you guide me what can i do?
Hi, can you check their X and Y properties in the top formula bar? Sometimes it shows 0 on the properties bar on the right but in reality Power Apps sometimes changes it to 40. If it says 40, change it to 0. Hope that solves it for you!
Hi yes you’re using the modern button control it looks like which also works. You can still use the classic button which will have all those fill properties shown in the video
@@Clacer666 they should still be an option for you to select since a lot of the modern controls are still in preview mode. If you expand the options in the "+ Insert" section, there should be a "Classic" section with the old button.
Thank you for this wonderful video, i follow your steps but having this varMenuOpen variable is not affecting the entire menu component in the app?, what i mean is i added the menu to 4 pages in my app when i clck first the toggle button and click the second menu button still in menu close, seems like the global variable varMenuOpen is not affecting the whole menu state when change.
I recreated the side nav menu bar on a power app and tested on an iPad. The gallery menus control is returning an error: "This control is not supported for native rendering". What could be the problem? Is there a setting that I need to turn on?
Thanks for the video tutorial. But I have a problem, when I pull data from the formula, it does not recognize, for example like "myTheme". Also the menu cannot open wide when the toggle is pressed. Please give me a solution
When I try to test the component in the design like you did, it only shows me the button, but the menu doesn't shrink or expand. What am I doing wrong? It works after when I put the menu to the screen. Only background color does not work to me.
read in the comments somewhere that it's a bug with the modern controls/themes turned on in your app (you can turn it off in settings > updates > modern controls and themes.) on the button toggle, change Appearance to: ButtonCanvas.Appearance'.Transparent.
thanks Gab, hope that helped! I left a comment on the video with the code for the background so try copying that in case you made a typo somewhere. Cheers!
This component technically would work for mobile but I would recommend a different version for mobile and desktop. I will likely do a video on this in the future
I recently set up a shop where you can download the .msapp file. If you choose to download, thank you very much for supporting the channel! buymeacoffee.com/theanalystnik/extras
I don't know if the image is available or not but I arrow doesn't show up for some reason. would you be able to share the code with me for the image. Thank you. Love your videos.
@@TheAnalystNik So when I ddi it, it showed no error. I checked the code like 4-5 times matching yours but it still wasn't showing up. Now that I've tried your version and copied and pasted, it worked. Thank you for the help, Nik. I really appreciate that!
@@TheAnalystNik I'm practically doing a copy paste of yours, I'm just adding submenus with a flexible height container but the htmltxt code isn't working even if I put your colors it doesn't work
@@Squadra85 hmm it should work if the code is exactly the same. Try copy paste this into the HtmlText property: $"" You also want to make sure in the Formulas property, you defined the colors like this: myTheme = { DarkColor: "#3f768c", LightColor: "#d5ecf5" }; Hope that solves it for you!
@@TheAnalystNik I should be having an error maybe one more space to that way but it's already working thanks for the help , by the way excellent tutorial keep up the good work
finally a good power app tutorial channel, please keep doing power apps videos
I appreciate it and will do!
Here is the code to imgToggleIcon at 8:57 for those that want to copy/paste!
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
Omg. Are you an angel? Thank you.
💀 saw this after I struggled with the code, thank you sir
I took a print screen of the video and asked chatgpt to give me the code in text, worked like a charm :)
Great idea!
probably a dumb question: why do we need to insert varMenuTimestamp into the className?
This is fire, by far one of the best tutorial. We need more of these videos , keep them coming.
More to come! Thank you!
Brother, Thank you so much for the video. Looks like you have done lots of effort to make viewers understand with many things. Thanks again.
Thank you for the kind words and glad you found it helpful!
What an insane Video. Coding for a couple Month now in PowerApps and never had a tutorial where everything worked perfect. Thank you very much. I will watch more Videos of you fore sure!
That’s awesome thanks for the nice feedback!
True!!! I had the same feeling!
You deserve a subscribe bro! This is one of the most step-by-step process and not a fast forward teaching.
Thanks so much! More to come!
Hi Nik, great content
For image not visible, I followed below steps.
1. See if you have filled the container with blue color 6:45.
2. See if the X and Y property of image are 0
Hi thank you! glad you figured that out, hopefully this helps others, cheers!
This tutorial was absolutely amazing! I'm new to Power Apps and have learned so much in a short period of time through your channel.
Great to hear! thank you
Wonderful !!! Everything Works Perfectly! Thank you very much
You're welcome! Glad it worked perfectly!
Man, you are legend. You made the complex task very simple.Thank you very much.Greatest content in Left Navigation.
Appreciated your 💯 effort and learnt from you brothe.r 🙏🏽
What an honour, thank you for the kind words! I’ll keep em coming!
This was super insightful, Nik! Could you do a similar tutorial on creating a grid menu layout component-something with 3 or 4 columns and flexible rows? It’d be awesome to see your take on that!
Glad you liked it! That sounds like an interesting idea, can you give more detail on what you mean by grid menu layout?
@@TheAnalystNik a tile-based menu designed for a clean and organized display of multiple options. uses a grid structure to present items, with each item contained within a uniformly sized tile. typically used in dashboard-like interfaces or navigation panels within apps, providing users with an intuitive way to access different sections or features.
Amazing Nik! Please keep uploading tutorials, they help a lot
More to come! thank you
This is the best navigation pane video I have ever come across! Absolutely superb! You need to do more videos!
Amazing to hear, thank you. More to come!
BEST tutorials ever!!!
I appreciate that! cheers
Mind Blowing! Great Video. Please keep posting, love your method.
So happy to hear that, thank you!
Hey Nik! I'm based in Vancouver too! , your explanation is great! thanks a lot!
Go canucks! Thank you
Really, really, really nice tutorial!! Thanks a lot!
You're very welcome!
Absolutely superb! It works very smooth.👍
Good to hear thank you!!
Amazing, thank you The Analyst Nik !
Glad you liked it! Cheers
Great video! Could you please mention the source for the icons and where you got the script?
Thank you! I have a comment posted with the code so you can copy paste. Cheers!
Feelings lucky to find your video.😊
Happy you found it as well!
Wow! The sidebar you've created is awesome. Could you please create a part 2 of this video with a header and content section on the other side? Thanks so much!
Thank you! And yes that’s a great idea, I’ll try to showcase that in an upcoming video
@@TheAnalystNik Whoa! I can't wait to see your upcoming video!
well explained, and so easy to follow. Good work
Really happy to hear that, thank you!
Well explained. I’m subscribing your channel, expecting more great videos. Thank you!
Thank you! That’s definitely my goal. Let me know if there’s anything you’re particularly interested in!
Direct sub. I have a new role creating Power Apps in my company and I really would like to create them just with modern design. Not something simple, boring and ugly like a lot of Power Apps is created.
I love that thank you. Hope you enjoy your new role and I’ll make sure to keep the content coming and giving inspiration for modern app designs. Let me know if you have any suggestions for future videos!
@@TheAnalystNik For sure more content about responsive designe. You know, a lot of us has companeis computer and mobile phone and it doesn't have sense to split app for a desktop and the mobile version. Better keep everything in one app which scale according to device.
@@theAprilll great suggestion and that's one I definitely want to cover. I'm working on a project management app to showcase many things, one of them being responsive. Might do a "Let's Build" series
Awesome tutorial! Obrigado!
Thank you, glad you enjoyed!
We can make our side menu when opening and closing put the other container to have the same behavior so the page would be all dynamic!
That’s right, I plan to make a video and showcase a responsive app in the future
Thanks bro. Easy to understand and follow. It helps a lot!
Making it easy is always the goal, glad you found it helpful!
Awesome ❤ thanks for sharing
Thank you! Cheers!
Great video, very helpful!❤
Amazing to hear that thank you!
very impressive.
Create an interactive login screen with different level of access so that access based screens will be visible.
Thank you! that's a great idea, I'll consider this for a future video. Cheers
@@TheAnalystNik Thanks for considering the input.
Waiting for your more videos ☺️☺️
@@TallapakaAbhishek absolutely thanks for your support!
Hi Sir Nik,
I appreciate the work you do. it helps a lot. I would just like to ask if I create it as a component library, I cannot access the app scope, what can I do as a workaround? or can I only use this component inside the app scope?
Thanks again!
Hi! In order to create this in a component library you will have to use a different approach, I made a video on this and although the design is different, you can try to re-create this menu using that method. Hope it works out!
ruclips.net/video/leFWNCWU8Mw/видео.htmlsi=0I0sp9g4AtWeu4q7
Thanks. I have also seen that video. I have added more properties for it to work just like in your video. Thanks again! Will wait for more videos of yours.
That’s awesome thanks I got more coming! Cheers
Thank you Nik! Such a great video. May I know how do I filter the navigation based on user role? Thanks!
thank you!
I haven't tested this, but you could add an additional property to each of your MenuItems like Admin: true or Admin: false, then you can filter the gallery that checks if the current user is an admin (not sure the method you are using here, but assuming you have it stored in a variable varAdmin, it would be:
If(varAdmin = true, Filter(MenuItems, Admin = true), Filter(MenuItems, Admin = false))
Hope that helps!
@ works like a charm! Thank you Nik!
That’s awesome! Glad it worked out
Thank you
A beautiful and wonderful explanation 🥰
Thank you!
Thank you so much for your effort and great Tutorials.
Is there a way to have the long codes (like what you had in the image) somewhere to be easy to copy from (rather than the huge typo mistakes)?
Thanks in advance.
thanks for the feedback and yes the code is quite long! Video description doesn't allow for angled brackets, but I'll post it in the comments and hopefully that helps a few people. Cheers
Hello again! Could you create another version of this, but with a multilevel submenu for the sidebar? I just watched your latest video, and your work is excellent. I'm wondering if you could make a similar version with a sidebar, as many apps come in different sizes and often need an additional submenu. I hope you’ll consider this request. Thank you once again!
Another great recommendation and glad you’re enjoying the content! I will for sure do a video on this in the future.
@@TheAnalystNik I’m glad to hear that! I really appreciate the quality content you put out. your channel is one of my go-to resources rn for learning. Looking forward to the video when it comes out!
Cheers!
great video! Thanks so much! I am getting a grey bar on the right side of my component for some reason. It won't go away. Any thoughts?
Hey thanks! This might be because of a container drop shadow. Check to make sure the drop shadow is turned to none. Hope that solves it!
Thank you so much Nik! Please include large chunks of code like the image animation in the video description, or at least a link to copy that code.
good point! for now, I'll share it here for you:
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
@@TheAnalystNik thank you so much! I was able to find a text parser from image tool to help me complete your tutorial. You are a master, and I hope to learn much more from you in subsequent videos!
@@chmarch you’re too kind! I’ll keep sharing the knowledge I have and I’m still always learning!
Spectacular video! How would I incorporate additional actions when one of the buttons is pressed? For example: one button goes to a screen and resets the form and variable
Good question. I would recommend you put these additional actions on your screens OnVisible and/or OnHidden properties. They’ll run each time you navigate across screens
@@TheAnalystNik Thank you for the recommendation. I had thought about onVisible, but it wasn't going to work with some of the other ways to get to the same screen (e.g. set new form or edit the form). Solved it by adding a switch statement into the OnSelect of the btnSelectItem before the Navigation.
Switch(
ThisItem.Name,
"Home", [Actions needed],
"Search", [Actions needed]
)
Navigate(ThisItem.Screen);
Set(varMenuSelected, ThisItem.Id)
Ah I see, great job with that solution!
Great video Nik! I love the polished component! Ps, are you from MTL?
Thanks glad you liked it! And I’m living in Vancouver, born in Bulgaria
Great work
Thank you! Cheers!
Are there any additional steps we need to take on each page to make sure that the size of the screen adjusts when the nav bar is at 200 vs 80?
Yeah if you're trying to create a responsive app, I recommend using containers on your screen and plugging in the navbar within it. I'll have a video coming up that will show you how to build a fully responsive app with a navigation menu. Cheers!
Great video. Where did you get the Set(VarMenuSelected, 1); ? I am keep getting error message that name isn't valid.
thank you! I set the variable in the App OnStart property at 5:27
do you know why in min 9:24 the arrow animation is not working for me, is not showing for some reason. Ive reviewed several times and while it doesnt show any errors, im not seeing the white arrow at all. do you know why that could be?
It’s hard to say without seeing the steps you took but let me take a guess: check the X and Y properties of imgToggleIcon but check their values are both 0 in the top formula bar. Sometimes powerapps changes them without your knowledge, even if it says they’re at 0 in the right navigation.
I have the same issue
@@TheAnalystNik I am having the same issue. I have checked the X, Y and they are both 0. I've also gone through the video 2 times making sure nothing was missed. Any other ideas as to what this could be? Wonderful video by the way.
Turn On Access app store
Try activeted
On component try mark access application scope, may it work!
Love the tutorial, can i just ask if the same can be some with Custom Page
Thank you! Can you clarify what you mean?
@@TheAnalystNik as in can i recreate the same navigation menu using custom pages instead of canvas app
@shomari169 Oh I see. Since custom pages are limited to only one page, canvas components can only be brought in through a component library, which is different from the standalone canvas apps, which have the ability to create components at the app level. If building a navigation menu through a component library, it would have to be built differently from what I’ve shown in this video as it’s built at the app level. Hope that helps and I might do a video on this in the future. Cheers
@@TheAnalystNik thanks for the swift reply and i will be really looking forward to a tutorial on that please to see how it will work
If the component was inserted into a sidebar container, is there any way that the sidebar container can be dynamically resized based on the component width being toggled?
Solved by setting the Width property of my sidebar container to: If(varMenuOpen, 200, 80)
you got it!
@@sudosaurus hi, can you explain this a little more. I wish to have this done in a way, when menu toggled then right-side container shall be resized/responsive. Thanks
Hi
Very good video. I am following your video to create side navbar. I am having some issues in it. can you please please help me in it. How to approach you?
Hi thank you! Are you looking for a more in-depth consultation or just a quick question? If it's more in-depth, send me an email (on my channel page)
@@TheAnalystNik Thank you responding. It is a quick question but i would like you to see my screen or I can send you screenshot somewhere please
I absolutely love this component, thank you! I have a slight problem with my icon color - it stays dark instead of changing to light when the icon isn't selected. I quadruple-checked the image formula and mine is exactly the same as the video's. Do you have any suggestions how I can troubleshoot this?
Thank you! Are your icons all black or are they taking the dark color we defined in the Formulas property?
@@TheAnalystNik I figured it out - instead of "currentColor", my svg code contained a hex#. I replaced all the hexes with "currentColor" and it works beautifully now :)
Ah excellent, I had a feeling it would be something with the currentColor value. Glad you worked it out!
@@TheAnalystNik It doesnt work for me atm. All the icons got the color as they are clicked. So it doesnt change the color when i click the icon because its already like that on every icon.
@TheAnalystNik I really liked your menu and I am trying to make the component inside a component library and there is something I am not able to do with the Width property of the main component LeftNav:
If(varMenuOpen, 200, 80)
The global variable varMenuOpen where should I declare it? In the OnVisible of Screen1? I am not able to change the size when they click on the Toggle.
It has worked perfectly if the component is created inside of a canvas application, but if I do it inside a component library I am not able to do it :(
Hi! When creating it within a Component Library, there are some different steps needed. I created a video on it with a different style navigation but you can try to combine the methods to re-create this inside a component library. Let me know if that works for you!
ruclips.net/video/leFWNCWU8Mw/видео.html
@@TheAnalystNik I've been watching your other video where you create the menu inside a component library, but the difference is that the menu has a fixed size and this one the width is dynamic depending on whether you press the toggle or not and that's what I'm having problems with.
I see, ok give this a try:
1. Enable "Enhanced component properties" under Settings > Updates > Experimental tab
2. Within your Component Library, select your component and create a new custom property "Icon OnSelect", Property Type "Event".
3. Select your icon, and update its OnSelect property to: YourNavName.IconOnSelect()
4. Go to the app and insert your component and update its "Icon OnSelect" property to Set(varMenuOpen, !varMenuOpen);
5. Update the component Width property to If(varMenuOpen, 200, 80)
Hope that works out!
@@TheAnalystNik In the end I got it easier:
- I created an output MenuWidth property of type number.
- I have assigned it the value: If(varMenuOpen,200,80)
- Finally, in the Width property of the LeftNav component, I have assigned it the value LeftNav.MenuWidth
Thank you very much!
for some reason in the navigation the menu icons isn't showing, i pasted like you said by replacing the " with ' , but still the images aren't visible .Can you guide me what can i do?
Hi, can you check their X and Y properties in the top formula bar? Sometimes it shows 0 on the properties bar on the right but in reality Power Apps sometimes changes it to 40. If it says 40, change it to 0. Hope that solves it for you!
Were you able to solve it? I am facing the same issue !
Amazing video, thanks a lot, im having a little problem, for some reason i cannot see Fill, Hovefill, PressedFill... in the Button config (advanced)
i got it, maybe is the new update but you have to change in Appearance 'ButtonCanvas.Appearance'.Transparent
Hi yes you’re using the modern button control it looks like which also works. You can still use the classic button which will have all those fill properties shown in the video
@@TheAnalystNik thanks for you answer, how can I get back the classics buttons?
@@Clacer666 they should still be an option for you to select since a lot of the modern controls are still in preview mode. If you expand the options in the "+ Insert" section, there should be a "Classic" section with the old button.
Thank you for this wonderful video, i follow your steps but having this varMenuOpen variable is not affecting the entire menu component in the app?, what i mean is i added the menu to 4 pages in my app when i clck first the toggle button and click the second menu button still in menu close, seems like the global variable varMenuOpen is not affecting the whole menu state when change.
You have to turn on “Access app scope” for you component. You’ll see the setting at 6:08 of the video.
@@TheAnalystNik i already do that but still cant run that,
- LeftNav:
Control: Component
Properties:
Height: =App.DesignHeight
Width: =If(varMenuOpen, 200, 80)
Children:
- conToggle:
Control: GroupContainer
Variant: manualLayoutContainer
Properties:
BorderColor: =RGBA(255, 255, 255, 1)
BorderStyle: |+
=BorderStyle.Solid
BorderThickness: =2
DropShadow: =DropShadow.None
Fill: =RGBA(56, 96, 178, 1)
Height: =20
RadiusBottomLeft: =10
RadiusBottomRight: =10
RadiusTopLeft: =10
RadiusTopRight: =10
Width: =20
X: =Parent.Width - Self.Width - 2
Y: |+
=15
Children:
- btnToggleSelect:
Control: Classic/Button
Properties:
OnSelect: |-
=Set(varMenuTimestamp, Text(Now(), ""));
Set(varMenuOpen, !varMenuOpen);
Text: =""
BorderThickness: =0
DisabledFill: =Self.Fill
Fill: =Color.Transparent
Height: =Parent.Height
HoverFill: =RGBA(100,100,100,0.1)
PressedFill: =ColorFade(Self.HoverFill, -50%)
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
- imgToggleIcon:
Control: Image
Properties:
Image: |-
="data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
BorderColor: =RGBA(141, 198, 63, 1)
Height: =Parent.Height
Width: =Parent.Width
AccessAppScope: true
this my full code.
please help me
I recreated the side nav menu bar on a power app and tested on an iPad. The gallery menus control is returning an error: "This control is not supported for native rendering". What could be the problem? Is there a setting that I need to turn on?
That's an interesting error that I haven't come across. Does it give the same error on the phone as well?
Found what was happening. I embedded the component inside of another container which caused some wonky rendering. Took it out and working fine now.
Awesome glad you got it!
Thanks for the video tutorial. But I have a problem, when I pull data from the formula, it does not recognize, for example like "myTheme".
Also the menu cannot open wide when the toggle is pressed. Please give me a solution
Hi, make sure you’ve turned on ‘Access app scope’ as shown at 4:13. That will allow the component to access variables in your app
Great Video !
Thanks, glad you enjoyed!
@@TheAnalystNik Hi Nik your Html text code is not working because i am try this
When I try to test the component in the design like you did, it only shows me the button, but the menu doesn't shrink or expand. What am I doing wrong? It works after when I put the menu to the screen. Only background color does not work to me.
read in the comments somewhere that it's a bug with the modern controls/themes turned on in your app (you can turn it off in settings > updates > modern controls and themes.) on the button toggle, change Appearance to: ButtonCanvas.Appearance'.Transparent.
thanks Gab, hope that helped! I left a comment on the video with the code for the background so try copying that in case you made a typo somewhere. Cheers!
Can we animate when collapsed or expanded?
good question and I did look into doing this but I haven't been able to find a way. If I do, I'll definitely make a video about it!
The name of my icons don't show. Everything works perfect, but that. :(
Oh that’s strange, I wonder if there’s something up with your color or visibility properties?
These types of pages adapt to mobile??? 😮
This component technically would work for mobile but I would recommend a different version for mobile and desktop. I will likely do a video on this in the future
@@TheAnalystNik how long before you make one that will be responsive for mobile or can u set resources to make the nav bar responsive on all devices
Is it possible to animate when collapsed or expand
Make the component in github please
I recently set up a shop where you can download the .msapp file. If you choose to download, thank you very much for supporting the channel!
buymeacoffee.com/theanalystnik/extras
can you share the svg for the toggle image?
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
Thanks
You’re very welcome!
The animation is not working for me, anyone ever faced this ?
Does anyone know how to fix it
I posted a comment with the code if you want to try copy paste?
is the SVG website safe?
Totally!
Gracias
Ok excellent .. but can u do the “run gif on hover”
I’m not sure what you mean, can you expand on that?
This is great, can you please provide me the imgtoogleicon image text code
for sure here you are:
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
Write code please
I don't know if the image is available or not but I arrow doesn't show up for some reason. would you be able to share the code with me for the image. Thank you. Love your videos.
I'm glad you like the videos, I'll keep them coming! I'm curious if the image is giving you an error or if it's just showing blank?
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
@@TheAnalystNik So when I ddi it, it showed no error. I checked the code like 4-5 times matching yours but it still wasn't showing up. Now that I've tried your version and copied and pasted, it worked. Thank you for the help, Nik. I really appreciate that!
I did the same code at toogle botton and Image, and It's not working
hmm I'm not sure why
My html dont work dont have color can you help me?
Yeah for sure, let me know a bit more so I can try to help. Maybe share the code you have?
@@TheAnalystNik I'm practically doing a copy paste of yours, I'm just adding submenus with a flexible height container but the htmltxt code isn't working even if I put your colors it doesn't work
@@Squadra85 hmm it should work if the code is exactly the same.
Try copy paste this into the HtmlText property:
$""
You also want to make sure in the Formulas property, you defined the colors like this:
myTheme =
{
DarkColor: "#3f768c",
LightColor: "#d5ecf5"
};
Hope that solves it for you!
You can also define colors using RGBA() but you'll want to ensure it's in double quotes eg. DarkColor: "RGBA(100, 100, 100, 1)"
@@TheAnalystNik I should be having an error maybe one more space to that way but it's already working thanks for the help , by the way excellent tutorial keep up the good work
Olá, o meu MENU não se expande quando seleciono, é como se o varMenuOpen Não funcionasse
Hi, have you updated the width property of the component?
grande
ALL OF THAT DOES NOT WORK TO ME
sorry about that, it must be frustrating. let me know what errors you're getting and I can try to help
@@TheAnalystNik could you give this component to download ?
Can I get the yaml code of the same please
Which part are you looking for, imgMenuIcon?
@@TheAnalystNik how can I have your icons svg codes, thanks
@@chugia6118 sure thing
MenuIcons =
{
Home: "",
Tasks: "",
History: "",
Search: "",
ContactUs: "",
AboutUs: ""
};
@@TheAnalystNik thanks, and the left image button please, the html background code not work for me
@@chugia6118 the html background code? here you go
$""
Export the app and tag it; some of as over here don't have patience.
Thank you 😅