Mobile layout

layout/layout.pixy

@@ -26,10 +26,34 @@ component Layout(app *aero.Application, ctx *aero.Context, user *arn.User, openG
 					main#content.fade!= content
 					LoadingAnimation
 					StatusMessage
+				aside#sidebar
+					Sidebar(user)
 			if user != nil
 				#user(data-id=user.ID)
 			script(src="/scripts")
 
+component Sidebar(user *arn.User)
+	.user-image-container
+		if user != nil
+			Avatar(user)
+		else
+			img.user-image.lazy(data-src="/images/brand/64", alt="Anime Notifier")
+	
+	SidebarButton("Home", "/", "home")
+	SidebarButton("Forum", "/forum", "comment")
+	SidebarButton("Explore", "/explore", "th")
+	SidebarButton("Soundtracks", "/soundtracks", "headphones")
+	SidebarButton("Users", "/users", "globe")
+
+	if user != nil
+		if user.Role != ""
+			SidebarButton("Statistics", "/statistics", "pie-chart")
+		
+		SidebarButton("Settings", "/settings", "cog")
+		SidebarButtonNoAJAX("Logout", "/logout", "sign-out")
+	else
+		SidebarButton("Login", "/login", "sign-in")
+
 component StatusMessage
 	#status-message.fade.fade-out
 		#status-message-text

mixins/Navigation.pixy

@@ -6,16 +6,20 @@ component Navigation(user *arn.User)
 
 component LoggedOutMenu
 	nav#navigation.logged-out
-		NavigationButton("About", "/", "home")
+		.navigation-link.action(data-action="toggleSidebar", data-trigger="click", aria-label="Menu", title="Menu")
-		NavigationButton("Explore", "/explore", "th")
+			.navigation-button
-		NavigationButton("Forum", "/forum", "comment")
+				Icon("bars")
+				span.navigation-text Menu
+		
+		//- NavigationButton("Explore", "/explore", "th")
+		//- NavigationButton("Forum", "/forum", "comment")
 
 		FuzzySearch
 
-		.extra-navigation
+		//- .extra-navigation
-			NavigationButton("Users", "/users", "globe")
+		//- 	NavigationButton("Users", "/users", "globe")
 		
-		NavigationButton("Soundtracks", "/soundtracks", "headphones")
+		//- NavigationButton("Soundtracks", "/soundtracks", "headphones")
 		
 		NavigationButton("Login", "/login", "sign-in")
 
@@ -24,9 +28,16 @@ component LoggedInMenu(user *arn.User)
 		.extension-navigation
 			NavigationButton("Watching list", "/extension/embed", "home")
 
-		NavigationButton("Dash", "/", "dashboard")
+		.navigation-link.action(data-action="toggleSidebar", data-trigger="click", aria-label="Menu", title="Menu")
-		NavigationButton("Profile", "/+", "user")
+			.navigation-button
-		NavigationButton("Forum", "/forum", "comment")
+				Icon("bars")
+				span.navigation-text Menu
+
+		.extra-navigation
+			NavigationButton("Profile", "/+", "user")
+
+		.extra-navigation
+			NavigationButton("Forum", "/forum", "comment")
 
 		.extra-navigation
 			NavigationButton("Soundtracks", "/soundtracks", "headphones")
@@ -36,7 +47,8 @@ component LoggedInMenu(user *arn.User)
 		.extra-navigation
 			NavigationButton("Users", "/users", "globe")
 		
-		NavigationButton("Explore", "/explore", "th")
+		.extra-navigation
+			NavigationButton("Explore", "/explore", "th")
 
 		//- .extra-navigation
 		//- 	NavigationButton("Statistics", "/statistics", "pie-chart")
@@ -55,8 +67,20 @@ component NavigationButton(name string, target string, icon string)
 			Icon(icon)
 			span.navigation-text= name
 
+component SidebarButton(name string, target string, icon string)
+	a.sidebar-link.ajax(href=target, aria-label=name, title=name, data-bubble="true")
+		.sidebar-button
+			Icon(icon)
+			span.sidebar-text= name
+
 component NavigationButtonNoAJAX(name string, target string, icon string)
 	a.navigation-link(href=target, aria-label=name)
 		.navigation-button
 			Icon(icon)
-			span.navigation-text= name
+			span.navigation-text= name
+
+component SidebarButtonNoAJAX(name string, target string, icon string)
+	a.sidebar-link(href=target, aria-label=name, data-bubble="true")
+		.sidebar-button
+			Icon(icon)
+			span.sidebar-text= name

pages/users/users.scarlet

@@ -4,4 +4,7 @@
 	border-radius 3px
 
 	.user-image
-		margin 0.4rem
+		margin 0.4rem
+
+.user
+	display flex

scripts/Actions.ts

@@ -3,6 +3,11 @@ import { AnimeNotifier } from "./AnimeNotifier"
 import { Diff } from "./Diff"
 import { findAll } from "./Utils"
 
+// Toggle sidebar
+export function toggleSidebar(arn: AnimeNotifier) {
+	arn.app.find("sidebar").classList.toggle("sidebar-visible")
+}
+
 // Save new data from an input field
 export function save(arn: AnimeNotifier, input: HTMLElement) {
 	arn.loading(true)

scripts/AnimeNotifier.ts

@@ -115,6 +115,11 @@ export class AnimeNotifier {
 
 		// Push manager
 		this.pushManager = new PushManager()
+
+		// Sidebar control
+		document.body.addEventListener("click", e => {
+			this.app.find("sidebar").classList.remove("sidebar-visible")
+		})
 	}
 
 	async onContentLoaded() {

scripts/Application.ts

@@ -160,7 +160,10 @@ export class Application {
 				let url = this.getAttribute("href")
 
 				e.preventDefault()
-				e.stopPropagation()
+
+				// if(this.dataset.bubble !== "true") {
+				// 	e.stopPropagation()
+				// }
 
 				if(!url || url === self.currentPath)
 					return

styles/navigation.scarlet

@@ -43,7 +43,7 @@
 	display none
 
 #search
-	display none
+	flex 1
 	border-radius 0
 	background transparent
 	border none
@@ -75,10 +75,6 @@
 	
 	#navigation
 		justify-content flex-start
-
-	#search
-		display block
-		flex 1
 	
 	.extra-navigation
 		display block

styles/sidebar.scarlet

@@ -0,0 +1,44 @@
+sidebar-spacing-y = 0.75rem
+
+#sidebar
+	vertical
+	position fixed
+	left 0
+	top 0
+	min-width 265px
+	height 100%
+	background ui-background
+	transform translateX(-100%)
+	overflow-x hidden
+	overflow-y auto
+	opacity 0
+	pointer-events none
+	box-shadow shadow-medium
+	transition opacity transition-speed ease, transform transition-speed ease
+	will-change opacity transition
+
+	.user-image-container
+		horizontal
+		justify-content center
+		margin 0.8rem 0
+
+.sidebar-visible
+	transform translateX(0) !important
+	pointer-events all !important
+	opacity 1 !important
+
+.sidebar-link
+	// color text-color
+	&.active
+		.sidebar-button
+			background rgb(245, 245, 245)
+
+.sidebar-button
+	horizontal
+	align-items center
+	padding sidebar-spacing-y content-padding
+	// background ui-background
+
+	.icon
+		font-size 1.3rem
+		margin-right content-padding