Hi All, I believe this has been talked about a long time ago but I'm trying to create a Navigation Bar that is responsive in Perspective. Essentially, when a given breakpoint is reached I want my docked view to no longer show on the left side of the screen and instead swap to a different docked view on the bottom of the screen.
I know you can make docked views appear at a certain breakpoint but is there a way to get them to disappear when a certain breakpoint is reached? I have previously achieved this using the advanced styling and writing custom CSS that target IA's inbuilt classes but I really want this as simple as possible. I just find it hard to believe this wouldn't be available as it would be a huge limitation if it isn't...
Set the left dock's Display property to auto and configure its Auto Breakpoint. It will be visible above that width and hidden below it. However, auto only handles a minimum-width threshold, so it cannot by itself make one dock appear only below the breakpoint while another appears above it. For the complete left-to-bottom swap, use the viewport width (page.props.dimensions.viewport.width) to open/close the two docks, or use a property change/transform to call system.perspective.openDock and closeDock. Give each dock a Dock ID so the script can target them reliably. The docked-view documentation also notes that an auto-hidden dock remains available on demand.
I have done this before, but honestly my main thing is it's really annoying having to add a script to each view you create that listens to any change in viewport width. It'd be fine if there was an easy way to add a change script to it in the session props but there is not . Is this the only real way to do this as I don't mind using scripting to do it but I was hoping for a robust solution that doesn't rely on someone having to use a template view / risk the view not being considered with this scripting...
You have docks. Put the listeners in the dock views, not the main view. Consider having the listener in a dock view only manipulate itself, so you can substitute docks on pages as needed, and only the docks that are attached are affected.
. Is this the only real way to do this as I don't mind using scripting to do it but I was hoping for a robust solution that doesn't rely on someone having to use a template view / risk the view not being considered with this scripting...