close EdgeNavigator when leave page

How-to Discussions
1

so when i have the EdgeNavigator (sidebar in page1) open and navigate to page0 or page2 id like to close the EdgeNavigator, how can i do this?

<iOS.StatusBarConfig Style=“Light” />

		<StackPanel ux:Class="Hamburger" ItemSpacing="3" HitTestMode="LocalBounds" Width="56" Height="56" ContentAlignment="Center">
			<Each Count="3">
				<Rectangle Width="22" Height="2" Color="#fff" />
			</Each>
		</StackPanel>

		<PageControl ux:Name="navigation" Active="page1">

		<Page ux:Name="page0" Background="#FAFDF9">
		<!-- close sidebar if open in page1 ? -->
		</Page>
		<Page ux:Name="page1">
			<EdgeNavigator ux:Name="TheSidebar">
				<Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F">
					<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
					<ActivatingAnimation>
						<Change shadow.Color="#0004" />
						<Change sidebarFade.Opacity="1" />
					</ActivatingAnimation>
				</Panel>
				
				<DockPanel Color="#263238">
					<Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />
					<StackPanel Dock="Top" Color="#2196F3">
						<Shadow Size="3" Distance="1" />
						<StatusBarBackground />
						<Panel Height="56">
							<Hamburger Alignment="Left">
								<Clicked>
									<NavigateToggle Target="sidebar" />
								</Clicked>
							</Hamburger>
						</Panel>
					</StackPanel>
				</DockPanel>
			</EdgeNavigator>
		</Page>
		<Page ux:Name="page2" Background="#FAFDF9">
		</Page>
		<!-- close sidebar if open in page1 ? -->
		</PageControl>	
	</App>

IMAGE ALT TEXT HERE

2

EdgeNavigator has a javascript dismiss() method (see docs)

You could add an animator that triggers when leaving Page1 and make that one call dismiss() on the edgenavigator.

3

okay so this closes the edgenavigator

<JavaScript>
	var Observable = require('FuseJS/Observable');

	function closeTest(){
		TheSidebar.dismiss()
	}

	window.setInterval(function(){
	  	closeTest()
	}, 5000);

    module.exports = {};
</JavaScript>

still not sure how to trigger the function closeTest from UX (leaving Page1 and make that one call)?

4

Place this inside Page1 (after making sure closeTest is also exported from the module)

<DeactivatingAnimation>
	<Callback Handler="{closeTest}"/>
</DeactivatingAnimation>
5

sweet :smiley: