# toggleSidebar

**URL:** <https://forums.fusetools.com/t/togglesidebar/1546>\
**Category:** How-to Discussions\
**Created:** [November 21, 2017, 10:05pm UTC](https://forums.fusetools.com/t/togglesidebar/1546 "2017-11-21T22:05:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 21, 2017, 10:05pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/1 "2017-11-21T22:05:47Z")

</div>

Hello,  
I have a problem, certainly understanding: P and inexperience with Fuse, I would like to start the `toggleSidebar` function of the`DrawerPanel.ux` file inside the `Menu.ux` file but it will not work. The `toggleSidebar` function is not started at all. Why? What is my mistake?

Many thanks in advance.

P.S: I’m learning Fuse and then starting a Community Italian

```auto
############### Menu.ux

<Material.Card ux:Class="Material.Menu" Margin="16" Padding="0,8,0,8" Alignment="TopRight">
	<StackLayout />
	<!-- https://material.google.com/components/menus.html -->
	<Material.Text ux:Class="Material.MenuItemText" FontSize="16" />

	<Container ux:Class="Material.IconMenuItem" Subtree="content" Height="48" >
		<string ux:Property="Text" />
		<Material.IconName ux:Property="Icon" />
		<Material.RippleResponseRectangle ux:Binding="Children">
			<Grid Columns="40,1*" ux:Name="content" Margin="16">
				<Material.MaterialIcon Icon="{Property Icon}" Margin="0,-4,0,0" Color="{Resource Material.PrimaryIconColor}" />
				<Material.MenuItemText Value="{Property Text}" />
			</Grid>
		</Material.RippleResponseRectangle>
		
	</Container>

	<Material.IconMenuItem ux:Class="Material.IconMenuItemSideBar">
		<Clicked Handler="{toggleSidebar}" />
	</Material.IconMenuItem>

</Material.Card>

```

```auto
################ DrawerPanel.ux

<Container ux:Class="Material.DrawerPanel" Subtree="subtree" IsOpenEdgeNavigator="{IsOpenEdgeNavigator}">
	<bool ux:Property="IsOpenEdgeNavigator" />
	<JavaScript>
		var IsOpenEdgeNavigator=this.IsOpenEdgeNavigator;

		module.exports = {
			IsOpenEdgeNavigator: IsOpenEdgeNavigator,
			toggleSidebar: function() {
				console.log(IsOpenEdgeNavigator.value);
				if(!IsOpenEdgeNavigator.value){
					edgeNav.open("Left");
					IsOpenEdgeNavigator.value=true;
				}
				else{
					edgeNav.dismiss();
					IsOpenEdgeNavigator.value=false;
				}
			}
		}
	</JavaScript>
	<Material.Drawer ux:Dependency="Drawer" />
	<AlternateRoot ParentNode="Drawer">
		<ActivatingAnimation>
			<Change overlay.Opacity="0.7" />
			<Change overlay.HitTestMode="LocalBounds" />
		</ActivatingAnimation>
	</AlternateRoot>

	<EdgeNavigator ux:Name="edgeNav" ux:Binding="Children">
		<Material.Drawer ux:Ref="Drawer" ux:Binding="Children" Edge="Left" />
		<Panel Color="{Resource Material.BackgroundColor}">
			<Panel ux:Name="overlay" Color="Black" Opacity="0" HitTestMode="None" />
			<Panel ux:Name="subtree">
			</Panel>
		</Panel>
	</EdgeNavigator>
</Container>

```

```auto
################# MainView.ux

<App>
	<JavaScript File="Main.js" />
	<iOS.StatusBarConfig Style="Light" />
	<Android.StatusBarConfig Color="#f00" />
	<Router ux:Name="router" />

	<ClientPanel>
		<Material.DrawerPanel>
			<Material.Drawer ux:Binding="Drawer" Edge="Left">
				<Material.Menu Alignment="Default" Margin="0, 0, 0, 0">
					<Material.IconMenuItemSideBar Text="Home" Icon="AccessPoint" Clicked="{goToHomePage}" />
					<Material.IconMenuItemSideBar Text="Saloni Preferiti" Icon="AccessPoint" Clicked="{goToSaloniPreferitiPage}" />
				</Material.Menu>
			</Material.Drawer>

			<DockPanel>
				<Material.AppBar Dock="Top">
					<Material.AppBarIcon Dock="Left" Icon="Menu" Clicked="{toggleSidebar}" />
					<Material.AppBarIcon Dock="Right" Icon="DotsVertical" Clicked="{toggleMenu}" />
					<Material.AppBarIcon Dock="Right" Icon="AccountPlus" />
				</Material.AppBar>

				<Navigator DefaultPath="splash">
					<SplashPage ux:Template="splash" router="router" />
					<HomePage ux:Template="home" router="router" />					
				</Navigator>
			</DockPanel>
		</Material.DrawerPanel>
	</ClientPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [November 22, 2017, 4:21am UTC](https://forums.fusetools.com/t/togglesidebar/1546/2 "2017-11-22T04:21:19Z")

</div>

I think toggleSidebar is not called, because you do not have definition of such function inside this chunk of code:

```auto
<Material.IconMenuItem ux:Class="Material.IconMenuItemSideBar">
        <Clicked Handler="{toggleSidebar}" />
    </Material.IconMenuItem>

```

should be something like:

```auto
<Material.IconMenuItem ux:Class="Material.IconMenuItemSideBar">
    <JavaScript>
    module.exports = {
        toggleSidebar: function () {
            console.log('toggleSidebar()');    
        }
    </JavaScript>

        <Clicked Handler="{toggleSidebar}" />
</Material.IconMenuItem>

```

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 22, 2017, 8:29am UTC](https://forums.fusetools.com/t/togglesidebar/1546/3 "2017-11-22T08:29:51Z")

</div>

Thanks a lot for the answer.

This is how the `Menu.ux` file does not have the function but is only present in the`DrawerPanel.ux` file, but if you notice the `toggleSidebar` function is called in the MainView.ux file and works correctly. In the `Menu.ux` file the function does not start … Do you ever get it?

If I have to say the `toggleSidebar` function inside the Menu.ux`file, how do I join the` edgeNav` element?

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 22, 2017, 11:18pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/4 "2017-11-22T23:18:32Z")

</div>

up…

---

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [November 23, 2017, 4:16am UTC](https://forums.fusetools.com/t/togglesidebar/1546/5 "2017-11-23T04:16:07Z")

</div>

What’s inside `<JavaScript File="Main.js" />` file?

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 25, 2017, 3:22pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/6 "2017-11-25T15:22:18Z")

</div>

Nothing about a set of data for configuring some colors.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 27, 2017, 10:11am UTC](https://forums.fusetools.com/t/togglesidebar/1546/7 "2017-11-27T10:11:14Z")

</div>

@Francesco: you’re calling the `toggleSidebar` function from `MainView.ux`, and the data context for it lives in `Main.js`. In `Main.js`, you don’t have the function, so there is nothing to call.

If you want to reach the function declared in the JavaScript section in `DrawerPanel.ux`, you should call it from within `DrawerPanel.ux` UX code.

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 27, 2017, 1:41pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/8 "2017-11-27T13:41:17Z")

</div>

@uldis: Thank you for your response and pleasure to meet you… The problem is not the `MainView.ux` file but the`Menu.ux` file.

In the `MainView.ux` file, the `toggleSidebar` function works correctly, but the `Menu.ux` file does not start the function. And that’s why I do not understand how it works in the `MainView.ux` file and in `Menu.ux` no …

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 27, 2017, 1:42pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/9 "2017-11-27T13:42:53Z")

</div>

What I said still stands. The function you’re calling needs to live in the data context you are calling it from (or above it). That’s it.

If you need further support, you will need to provide a _complete_ reproduction that we can copy-paste and run, otherwise it’s impossible to help.

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 27, 2017, 10:50pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/10 "2017-11-27T22:50:01Z")

</div>

- [Attached RAR file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/a5euU9fBX60l-image-1511819481731.eilapp.clienti.rar)

This is the whole project … maybe I understand how it works … that is in the `MainView` file, the`toggleSidebar` function works because it is a node inheriting from the `DrawerPanel` file. Instead, the `Menu` file does not work because it does not inherit anything from`DrawerPanel`. Correct? If so, then in a hypothetical file named `Menu.js` how do I join the`edgeNav` class?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 28, 2017, 8:55am UTC](https://forums.fusetools.com/t/togglesidebar/1546/11 "2017-11-28T08:55:20Z")

</div>

The project you’ve supplied is far too big to even find the places you’re talking about, never mind understanding what you’re asking.

Please make a _complete, minimal reproduction:_ a single-UX-file app that can be copy-pasted and run.

Please avoid asking hypothetical questions about hypothetically existing files, and instead explain what it is that you’re trying to do.

---

<div class="post-metadata">

**Author:** ![Francesco](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/francesco/32/781_2.png) [@Francesco](https://forums.fusetools.com/u/Francesco)\
**Post date:** [November 28, 2017, 10:39pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/12 "2017-11-28T22:39:19Z")

</div>

I do not think I can make the project in one file because I use the design material library …

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 29, 2017, 1:15pm UTC](https://forums.fusetools.com/t/togglesidebar/1546/13 "2017-11-29T13:15:44Z")

</div>

I don’t see how that is a problem, or how it keeps you away from making a complete, minimal reproduction to explain the issues you are facing. It is not the material design library that causes the problem.

Here, I wrote this for a start, feel free to adapt it to explain yourself better:

```auto
<App>
    <JavaScript>
        module.exports = {
            test: function() {
                console.log("test on mainview");
            }
        };
    </JavaScript>

    <Panel ux:Class="CustomButton" Width="128" Height="40">
        <Text Value="Click me!" Color="#fff" Alignment="Center" />
        <Rectangle Color="#18f" CornerRadius="2" />
    </Panel>

    <Panel ux:Class="AnotherBlock">
        <JavaScript>
            module.exports = {
                test: function() {
                    console.log("test on anotherblock");
                }
            };
        </JavaScript>
        <CustomButton Clicked="{test}" />
    </Panel>

    <Grid RowCount="3">
        <StackPanel Alignment="Center">
            <CustomButton Clicked="{test}" />
        </StackPanel>
        <AnotherBlock />
        <AnotherBlock Clicked="{test}" HitTestMode="LocalBoundsAndChildren" />
    </Grid>

</App>

```