Call other pages from sidebar

How-to Discussions
1

Hi,

How can I call OtherPage from Sidebar.ux?

MyApp.ux

<App Theme="Basic">
    <EdgeNavigator ux:Name="EdgeNavigator">
        <JavaScript>
            var Observable = require("FuseJS/Observable");
            var currentPage = Observable("");

            var data = Observable();

            fetch('https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/T33l2c59iZFy-legacy-files-P6FteBeij9A7jTXL-edgenavresponse.json&#39;)
            .then(function(response) { return response.json(); })
            .then(function(responseObject) { data.value = responseObject; });

            function showOtherPage() {
                currentPage.value = "OtherPage";
                debug_log("showOtherPage() > currentPage.value = " + currentPage.value);
            }

            module.exports = {
                data: data,
                currentPage: currentPage,

                callPage: function () {
                    debug_log("callPage");
                    showOtherPage();
                }
            };
        </JavaScript>

        <!-- Add a panel to the left edge -->
        <Sidebar Width="180" ux:Name="menu" EdgeNavigation.Edge="Left">
            <ActivatingAnimation>
                <Change mainAppTranslation.X="180" />
                <!-- Change to cross out -->
                <Change topMenuTranslation.Y="0" />
                <Change bottomMenuTranslation.Y="0" />
                <Change middleRectangle.Opacity="0" Easing="CircularOut" />
                <Change topMenuRotation.Degrees="45" Easing="ExponentialIn" />
                <Change bottomMenuRotation.Degrees="-45" Easing="ExponentialIn" />
                <Change topRectangle.Width="28" />
                <Change bottomRectangle.Width="28" />
            </ActivatingAnimation>
        </Sidebar>

        <DockPanel Background="#fff">
            <!-- Use this to move the main app area with the side menu -->
            <Translation ux:Name="mainAppTranslation" />

            <StatusBarBackground Dock="Top" />
            <BottomFrameBackground Dock="Bottom" />

            <StackPanel Dock="Top">

                <!-- This is the top ledge -->
                <Grid ColumnData="auto,1*,auto"  Background="White">
                    <Panel Margin="7,5,5,5" Height="32" Width="32" HitTestMode="LocalBounds">
                        <Clicked>
                            <Set EdgeNavigator.Active="menu" />
                        </Clicked>
                        <Rectangle ux:Name="topRectangle" Height="2" Width="26" Fill="#000">
                            <Translation Y="-9" ux:Name="topMenuTranslation" />
                            <Rotation ux:Name="topMenuRotation" />
                        </Rectangle>
                        <Rectangle ux:Name="middleRectangle" Height="2" Width="26" Fill="#000" />
                        <Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Fill="#000">
                            <Translation Y="9" ux:Name="bottomMenuTranslation" />
                            <Rotation ux:Name="bottomMenuRotation" />
                        </Rectangle>
                    </Panel>

                    <Text FontSize="22" Alignment="VerticalCenter" TextAlignment="Center"
                        Value="NEWS" Padding="2">
                        <Font File="assets/fonts/AlegreyaSans-Bold.otf" />
                    </Text>

                    <Panel Margin="5,5,7,5" Height="32" Width="32" HitTestMode="LocalBounds">
                        <Clicked>
                            <DebugAction Message="Search clicked" />
                        </Clicked>
                        <Circle Height="20" Width="20">
                            <Stroke Width="2" Brush="#000" />
                        </Circle>
                        <Rectangle Width="7" Height="3" Fill="#000">
                            <Translation X="8" Y="8" />
                            <Rotation Degrees="45" />
                        </Rectangle>
                    </Panel>
                </Grid>
                <Rectangle Height="1" Margin="0,5,0,0" Fill="#333c48" />
            </StackPanel>

            <!-- This is the main scroll area -->
            <ScrollView>
                <StackPanel Alignment="Top">
                    <Panel Height="7" />
                    <Each Items="{data.responseData}">
                        <NewsItem />
                    </Each>
                </StackPanel>
            </ScrollView>
        </DockPanel>

        <Page ux:Name="OtherPage" Name="OtherPage"> 
            <OtherPage NavigationController="{currentPage}"/>        </Page>

    </EdgeNavigator>
</App>

```

`Sidebar.ux`

```ux
<StackPanel ux:Class="Sidebar" Background="#212831">
    <WhileInactive Threshold="0.4">
        <Move Target="user" X="-180" Duration="0.2" Delay="0.3" Easing="CircularIn" />
        <Move Target="stats" X="-180" Duration="0.2" Delay="0.2" Easing="CircularIn" />
        <Move Target="browser" X="-180" Duration="0.2" Delay="0.15" Easing="CircularIn" />
        <Move Target="feed" X="-180" Duration="0.2" Delay="0.1" Easing="CircularIn" />
        <Move Target="chat" X="-180" Duration="0.2" Delay="0.05" Easing="CircularIn" />
    </WhileInactive>

    <Text ux:Class="Username" TextAlignment="Center" FontSize="18" TextColor="#fff" Margin="0,8,0,0">
        <Font File="assets/fonts/AlegreyaSans-Bold.otf" />
    </Text>
    <Text ux:Class="Stats" TextAlignment="Center" FontSize="16" TextColor="#fed166" />
    <Text ux:Class="Relations" TextAlignment="Center" FontSize="11" TextColor="#414f5e" />
    <Text ux:Class="MenuLabel" TextAlignment="Center" FontSize="18" TextColor="#414f5e" Margin="0,0,0,0">
        <Font File="assets/fonts/Lato-Bold.ttf" />
    </Text>

    <StatusBarBackground Background="#909498" />

    <StackPanel ux:Name="user">
        <Panel Height="90" />
        <Circle Width="85" Height="85">
            <ImageFill Url="https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/WQXRqbzFgIJA-legacy-files-B2MmOFAy2wjpUo71-model-045.jpg&quot; />
        </Circle>
        <Username>EDWARD PRICE</Username>
    </StackPanel>

    <Grid ux:Name="stats" Alignment="HorizontalCenter" ColumnCount="3" Margin="0,10,0,15">
        <StackPanel Width="70">
            <Stats>2,342</Stats>
            <Relations>Followers</Relations>
        </StackPanel>
        <Rectangle Height="40" Width="1">
            <SolidColor Color="#414f5e" />
        </Rectangle>
        <StackPanel Width="70">
            <Stats>3,735</Stats>
            <Relations>Following</Relations>
        </StackPanel>
    </Grid>

    <Image ux:Class="SidebarIcon" Height="22" Width="22" Margin="0,24,0,9" Color="#7a96b2" />

    <StackPanel>
        <StackPanel ux:Name="browser">
            <SidebarIcon File="assets/icon/Browser.png" />
            <MenuLabel>NEWS</MenuLabel>
            <Clicked>
                <Callback Handler="{callPage}" />
            </Clicked>
        </StackPanel>
        <StackPanel ux:Name="feed">
            <SidebarIcon File="assets/icon/Feed.png" />
            <MenuLabel>FEED</MenuLabel>
        </StackPanel>
        <StackPanel ux:Name="chat">
            <SidebarIcon File="assets/icon/Chat.png" />
            <MenuLabel>CHAT</MenuLabel>
        </StackPanel>
    </StackPanel>
</StackPanel>

```

`OtherPage.ux`

```ux
<Page ux:Class="OtherPage" ux:Name="self">
    <string ux:Property="NavigationController"/>

    <Rectangle Layer="Background" Fill="#F3825F" />

    <StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
        <Button>
            <Clicked>
                <Callback Handler="{showMenuPage}" />
            </Clicked>
            <Fuse.BasicTheme.ButtonText Value="{currentPage}" TextAlignment="Center"/>
         </Button>
    </StackPanel>
</Page>

```
2

If you want to navigate from the main page to OtherPage then you need an additional navigator since the EdgeNavigator only handles the side menu.

Basically, what you need is a structure like this:

<EdgeNavigator>
    <Sidebar/>
    <Panel>
        <LinearNavigation/>
        <first page/>
        <OtherPage/>
    </Panel>
</EdgeNavigator>

With this setup the sidebar can be opened both when you are on the first page and when you are on OtherPage.

<first page/> in this example just means most of the things you have inside the DockPanel with Background="#fff".

To handle the navigation between first page and OtherPage you just work with the LinearNavigation as normal (using either NavigateTo or by data binding the Active property).

A separate note You should put the StatusBarBackground and BottomFrameBackground in the outmost panel. The way you have it set up now (inside the DockPanel inside the EdgeNavigation) means that the SideBar will ignore the top and bottom bars.