[Fuse X] Sidebar

 

 

 

 

 

 

 

 

 

ApplicationTop.ux

<DockPanel ux:Class="ApplicationTop">
	<Router ux:Dependency="router"/>

	<Panel ux:Name="hamburger" Width="42" Height="42" Alignment="TopLeft" Margin="15" Opacity="0">
		<Panel Alignment="Left" Padding="5,0" HitTestMode="LocalBounds" Navigation="router">
			<WhileCanGoBack>
				<Text Value="&#xE5C4;" Alignment="Center"  FontSize="28"/>
				<Clicked>
					<GoBack/>
				</Clicked>
			</WhileCanGoBack>
			<WhileCanGoBack Invert="true">
				<Text Value="&#xE5D2;" Alignment="Center"  FontSize="28"/>
				<Clicked>
					<RaiseUserEvent EventName="requestMenu"/>
				</Clicked>
			</WhileCanGoBack>
		</Panel>
	</Panel>

	<ResourceObject Key="hamburger" Value="hamburger"/>
</DockPanel>

 

 

 

 

 

 

 

 

AppMenu.ux

<DockPanel Color="#fff" ux:Class="AppMenu">
	<Router ux:Dependency="router"/>
	
	<!-- logo / app name -->
	<StackPanel Dock="Top">
		<Rectangle Width="240" Height="1" Color="Black" Opacity="0"/>
		
		<Panel Alignment="TopLeft" Margin="15">
			<Rectangle Width="2" Height="20" Color="main">
				<Rotation Degrees="135" />
			</Rectangle>
			<Rectangle Width="2" Height="20" Color="main">
				<Rotation Degrees="45" />
			</Rectangle>
		</Panel>
		<StackPanel Orientation="Horizontal" Margin="20,0,0,0" ItemSpacing="25">
			<Image File="../Assets/avatarhome.png" Alignment="Left" Width="80" Height="80" />
	    	<StackPanel ItemSpacing="2" Margin="0,15,0,0">
		    	<Panel Clicked="{gotoUser}">
					<ExBold Value="Follow w" Alignment="Center" FontSize="11" TextColor="main" />
					<Rectangle Width="96" Height="26" Color="#fff" CornerRadius="30" />
					<Rectangle Width="100" Height="30" Color="main" CornerRadius="30" />
				</Panel>

		    	<Panel Clicked="{gotoUser}">
					<Light Value="Email@email.com" Alignment="Center" FontSize="8" TextColor="sub" />
					<Rectangle Width="78" Height="18" Color="#fff" CornerRadius="30" />
					<Rectangle Width="80" Height="20" Color="color3" CornerRadius="30" />
				</Panel>

			</StackPanel>
		</StackPanel>

		<SemiBold Value="Lee Jae Keun" Alignment="Left" FontSize="15" Margin="10,20,0,0"/>
		<Regular Value="Best Reviewer" Alignment="Left" FontSize="12" Color="mainDeep" Margin="10,2,0,0"/>	

		<StackPanel Orientation="Horizontal" ItemSpacing="20" Margin="20,20,0,0">
			<StackPanel ItemSpacing="3">
				<Icon.Follower Width="20" Height="20" IconColor="sub" Alignment="Left" />
				<Regular Value="97 Follower" FontSize="13" />
			</StackPanel>

			<Rectangle Width="2" Height="40" Color="color3" Opacity="50"/>

			<StackPanel ItemSpacing="3">
				<Icon.Gallery Width="20" Height="20" IconColor="sub" Alignment="Left" />
				<Regular Value="108 Photos" FontSize="13" />
			</StackPanel>
		</StackPanel>
	</StackPanel>

	<Panel ux:Class="AppMenuItem" HitTestMode="LocalBounds">
		<string ux:Property="Label"/>
		<object ux:Property="Handler"/>
		
		<Text Alignment="CenterLeft" Margin="20,0,10,0" Value="{Property this.Label}"/>
		<Clicked Handler="{Property this.Handler}">
			<RaiseUserEvent EventName="dismissMenu"/>
		</Clicked>
	</Panel>
	
	<StackPanel ItemSpacing="20" Margin="0,30,0,0">
		<StackPanel Orientation="Horizontal" ItemSpacing="5" Margin="20,0,0,0">
			<Image File="../Assets/gift.png" Width="25" Height="25" />
			<AppMenuItem Label="Events" Handler="{gotoUser}"/>
		</StackPanel>
		<StackPanel Orientation="Horizontal" ItemSpacing="5" Margin="20,0,0,0">
			<Icon.Ping Width="18" Height="23" IconColor="#000" Margin="4,0,0,0" />
			<AppMenuItem Label="Want" Handler="{gotoList}" Margin="3,0,0,0"/>
		</StackPanel>
		<StackPanel Orientation="Horizontal" ItemSpacing="5" Margin="20,0,0,0">
			<Icon.Map Width="25" Height="25" IconColor="#000" />
			<AppMenuItem Label="My list" Handler="{gotoList}"/>
		</StackPanel>
		<StackPanel Orientation="Horizontal" ItemSpacing="5" Margin="20,0,0,0">
			<Icon.Bookmark Width="18" Height="25" IconColor="#000" Margin="2,0,0,0" />
			<AppMenuItem Label="BookMark" Handler="{gotoUser}" Margin="5,0,0,0"/>
		</StackPanel>
		<StackPanel Orientation="Horizontal" ItemSpacing="5" Margin="20,0,0,0">
			<Image File="../Assets/set.png" Width="25" Height="25" />
			<AppMenuItem Label="Settings" Handler="{gotoUser}"/>
		</StackPanel>
		<StackPanel Orientation="Horizontal" Alignment="BottomLeft" Margin="20,30,0,0">
			<Image File="../Assets/exit.png" Width="23" Height="23" Color="color3" />
			<Regular Value="Logout" Margin="10,0,0,0" FontSize="14" Alignment="Center" />
		</StackPanel>
	</StackPanel>

</DockPanel>