# Sidebar not closing

**URL:** <https://forums.fusetools.com/t/sidebar-not-closing/1453>\
**Category:** How-to Discussions\
**Created:** [November 9, 2016, 5:02pm UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453 "2016-11-09T17:02:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [November 9, 2016, 5:02pm UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/1 "2016-11-09T17:02:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 9, 2016, 5:34pm UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/2 "2016-11-09T17:34:35Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [November 9, 2016, 5:45pm UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/3 "2016-11-09T17:45:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 9, 2016, 9:48pm UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/4 "2016-11-09T21:48:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [November 10, 2016, 2:52am UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/5 "2016-11-10T02:52:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 10, 2016, 7:07am UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/6 "2016-11-10T07:07:59Z")

</div>

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:

```auto
<Clicked>
    <NavigateTo Target="mainContent" />
</Clicked>

```

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [November 11, 2016, 3:26am UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/7 "2016-11-11T03:26:18Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 15, 2016, 12:12pm UTC](https://forums.fusetools.com/t/sidebar-not-closing/1453/8 "2016-11-15T12:12:04Z")

</div>

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:

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

```