Making navigation appear/disappear based on screen size, content, and on demand

[RosalindK]

Hi,

I'm currently using the responsive "sidebar" screen layout in my canvas app. On the left sidebar is a gallery that contains data that is stored in SharePoint.  The SharePoint list is set up in such a way that users only see their own entries.  So, when they go into the app for the first time, the gallery is empty.  This is one scenario where I'd like the app to load with the left sidebar hidden.  The other two conditions are as follows:

- Hide the left side bar when the user presses a button (so they can maximize screen real estate if they are working on a laptop)

- Hide the left side bar when the screen size is less than 3 (but allow the user to click a button to bring the side bar back when needed)

Any ideas as to how to accomplish this?  Thank you in advance for your help!

[SharePointDev12]

I suggest you create a custom component it meets your requirement well. Go through the below video from Reza Dorrani it helps you a lot.

https://youtu.be/dP74npyyvGc

[RosalindK]

Thank you for the reference to that video by Reza Dorrani.  He's always a source of excellent tutorials.  However, that particular functionality demonstrated in the video only supports one of my requirements (on demand showing/hiding of a gallery).  I'm looking to combine this functionality with two others.  I would like the left sidebar to disappear if there is no content (that is, when someone is opening the app for the very first time).  I would also like it to disappear when the screen size is less than 4. However, with both of those options, I would like the user to be able to override this behaviour with a button.   I have that part working okay but when I try to implement the other two functionalities, it just doesn't work.   Below is the code used in the main screen OnVisible event and in the sidebar container visible property.   The button used to control the sidebar manually has the expected OnSelect content:  UpdateContext({ctxSideBar: !ctxSideBar})

I've tried many variations above the above but to no avail.  Any suggestions would be welcome!  Thanks!

[StalinPonnusamy · Accepted solution]

Hi @RosalindK 

1. Set Onscreen visible property to

If(ScreenName.Size>3,UpdateContext({ctxSideBar:true}),UpdateContext({ctxSideBar:false}))

2. Icon Onselect Property to

UpdateContext({ctxSideBar:!ctxSideBar})

3. Set SideBarContainer Visible property to

ctxSideBar && CountRows(GalleryName.AllItems) > 1

[RosalindK]

That did it! Thanks!