Sidebar not closing

How-to Discussions
1

Hi all,
I am working on side menu. whenever I click on any of the menu option the right side content changes but side bar is still open. Below is the video link. any help will be helpful?

Thanks

2

Hi! I’m assuming you’re using the EdgeNavigator component for this.
In that case, you can use the NavigateTo component with your main content as its target whenever you click an item. Here is an example:

<App>
	<Panel>
		<EdgeNavigator>
			<Panel Width="250" Color="Red" Edge="Left">
				<Button Text="Close me">
					<Clicked>
						<NavigateTo Target="mainContent" />
					</Clicked>
				</Button>
			</Panel>
			<Panel ux:Name="mainContent" Color="Teal">
				
			</Panel>
		</EdgeNavigator>
	</Panel>
</App>
3

Thanks for the reply. But my code looks like this

<EdgeNavigation ux:Name="Navigator" />
<!-- SIDE PANEL -->
<SidePanel ux:Name="sidePanel" Edge="Left" Alignment="Left">
  <EnteringAnimation>
    <Move X="-1" RelativeTo="Size" />
  </EnteringAnimation>

  <ActivatingAnimation>
    <Change Duration="0.1" Easing="Linear" mainAppTranslation.X=".85" />

  </ActivatingAnimation>
</SidePanel>

Change EdgeNavigation to EdgeNavigator. Can see sidebar but it doesn’t go away, but can see page changing back of sidebar

4

did you add my NavigateTo part to your code? If so, what does it look like after?

5

Where should I put that NavigateTo in my code above. Sorry i am a bit new to this?

6

You have to make sure the NavigateTo action is triggered as you click your buttons.
If you show me more of your code, i can be of more help, but generally, this part is the key:

<Clicked>
    <NavigateTo Target="mainContent" />
</Clicked>
7

Here’s my MainView.ux

<App>
  <ClientPanel>
  <Fuse.iOS.StatusBarConfig Style="Light" />
  <ImageFill File="Assets/background.jpg" StretchMode="UniformToFill" />
  <Image ux:Class="HamburgerIcon" File="Assets/burger.png"/>
  <Image ux:Class="RefreshIcon" File="Assets/refresh.png"/>
  <ux:Include File="SidePanel.ux" />
 <JavaScript File="Main.js"/>
 <JavaScript File="AndroidPush.js"/>
 <Router ux:Name="router" />
<DockPanel>
<EdgeNavigation ux:Name="Navigator" />

<!-- SIDE PANEL -->
<SidePanel ux:Name="sidePanel" Edge="Left" Alignment="Left">
  <EnteringAnimation>
    <Move X="-1" RelativeTo="Size" />
  </EnteringAnimation>

  <ActivatingAnimation>
    <Change Duration="0.1" Easing="Linear" mainAppTranslation.X=".85" />

  </ActivatingAnimation>
 </SidePanel>

  <!-- End of side panel -->

<!-- MAIN PANEL -->
    <DockPanel ux:Name="MainPanel">
    <Translation ux:Name="mainAppTranslation" RelativeTo="Size"/>
    <DeactivatingAnimation>
    <Change MainViewOverlay.Opacity=".7" Duration=".2" Easing="Linear" />
    <Change MainPanel.HitTestMode="LocalBounds" />
    <WhilePressed>
      <NavigateToggle />
    </WhilePressed>
  </DeactivatingAnimation>
  <Rectangle ux:Name="MainViewOverlay" Fill="#303C4C" Layer="Overlay" Opacity="0" HitTestMode="Children" />
  <StackPanel>
    <Grid Rows="1.3*,2*,6*">
     <Grid Columns="1*,1*" Dock="Top" Padding="20">
       <HamburgerIcon Alignment="Left" Width="25" Height="25" HitTestMode="LocalBoundsAndChildren">
      <Clicked>
                <Set Navigator.Active="sidePanel" />
            </Clicked>
    </HamburgerIcon>
    <Panel Width="60" Height="60" Alignment="Right">
      <RefreshIcon Width="25" Height="25" Clicked="{refresh_button}"/>
      </Panel>
     </Grid>
    </Grid>
</StackPanel>
    <!-- Navigator inside here -->
 <Navigator DefaultTemplate="APage">
  <ActivityPage ux:Template="APage" router="router" />
  <DetailsPage ux:Template="DPage" router="router" />
  <MembersPage ux:Template="MPage" router="router" />
  <EventsPage ux:Template="EPage" router="router" />
  <OfficePage ux:Template="OPage" router="router" />
  <LoginPage ux:Template="LPage" router="router" />
  <DashboardPage ux:Template="DashPage" router="router" />
 </Navigator>

 <BottomBarBackground Dock="Bottom" IncludesKeyboard="false" />
</DockPanel>
</DockPanel>
</ClientPanel>
</App>

SidePanel.ux

 <DockPanel ux:InnerClass="SidePanel" ux:Name="sidePanel" Background="#303C4C"   Width="85%">
<WhileInactive Threshold="0.4">
<Move Target="sidebarTitle" X="-320" Easing="CircularIn" />
<Move Target="showMenuList"  X="-320" Easing="CircularIn" />

  </WhileInactive>

  <StackPanel ux:Name="sidebarTitle" Dock="Top" Margin="20, 50, 20, 20">
  <Text  FontSize="20" TextAlignment="Center" TextColor="#fff" Value="Menu" />
</StackPanel>

<ScrollView ux:Name="showMenuList" Dock="Fill" Padding="0, 0, 0, 15">
<StackPanel>
  <Each Items="{menuList}">

    <Panel Alignment="Top" Margin="20, 0, 0, 0" Height="48" Background="#303C4C">
      <StackPanel Alignment="CenterLeft" Margin="35, 0, 0, 0" Width="100%">
      <Text TextColor="#fff"  TextWrapping="Wrap" FontSize="16" Value="{menuName}" Clicked= "{menuButtonClicked}"> 
      </Text>
     </StackPanel>
      <Rectangle Alignment="Bottom" Height="1" Fill="#FFF" Opacity=".1" />
      
      <RemovingAnimation>
        <Move RelativeTo="Size" Y="-1" Duration=".2" Easing="CircularInOut" />
      </RemovingAnimation>

      <LayoutAnimation>
        <Move RelativeTo="LayoutChange" Y="1" Duration=".5" Easing="CircularInOut" />
      </LayoutAnimation>
    </Panel>
    </Each>
   </StackPanel>
  </ScrollView>





  <StackPanel Dock="Bottom" Background="#08B810" Height="50" Padding="10">
  <Text  FontSize="13" TextColor="#fff" TextAlignment="Center" Alignment="VerticalCenter" Value="Developed by xoxo" />
  <Text  FontSize="10" TextColor="#fff" TextAlignment="Center" Alignment="VerticalCenter" Value="Text goes here" />
 </StackPanel>
</DockPanel>
8

Hi!

Sorry for the late reply.

In this case, you could try putting it inside the individual pages in Activated triggers.
It should look something like this:

 <ActivityPage ux:Template="APage" router="router">
    <Activated>
        <NavigateTo Target="mainContent" NavigationContext="Navigator" />
    <Activated>
</ActivityPage>