component Navigation(user *arn.User)
	if user == nil
		LoggedOutMenu
	else
		LoggedInMenu(user)

component LoggedOutMenu
	nav#navigation.logged-out
		#sidebar-toggle.navigation-link.action(data-action="toggleSidebar", data-trigger="click", aria-label="Menu", title="Menu")
			.navigation-button
				Icon("bars")
				span.navigation-text Menu
		
		//- NavigationButton("Explore", "/explore", "th")
		//- NavigationButton("Forum", "/forum", "comment")

		FuzzySearch

		//- .extra-navigation
		//- 	NavigationButton("Users", "/users", "globe")
		
		//- NavigationButton("Soundtracks", "/soundtracks", "headphones")
		
		NavigationButton("Login", "/login", "sign-in")

component LoggedInMenu(user *arn.User)
	nav#navigation.logged-in
		.extension-navigation
			NavigationButton("Watching list", "/extension/embed", "home")

		#sidebar-toggle.navigation-link.action(data-action="toggleSidebar", data-trigger="click", aria-label="Menu", title="Menu")
			.navigation-button
				Icon("bars")
				span.navigation-text Menu

		//- .extra-navigation
		//- 	NavigationButton("Profile", "/+", "user")

		//- .extra-navigation
		//- 	NavigationButton("Forum", "/forum", "comment")

		//- .extra-navigation
		//- 	NavigationButton("Soundtracks", "/soundtracks", "headphones")

		FuzzySearch

		//- .extra-navigation
		//- 	NavigationButton("Users", "/users", "globe")
		
		//- .extra-navigation
		//- 	NavigationButton("Explore", "/explore", "th")

		//- .extra-navigation
		//- 	NavigationButton("Statistics", "/statistics", "pie-chart")
		
		//- .hide-landscape
		//- 	NavigationButton("Settings", "/settings", "cog")
		
		//- .extra-navigation.hide-landscape
		//- 	NavigationButtonNoAJAX("Logout", "/logout", "sign-out")

component FuzzySearch
	input#search.action(data-action="search", data-trigger="input", type="text", placeholder="Search...", title="Shortcut: F")

component NavigationButton(name string, target string, icon string)
	a.navigation-link.ajax(href=target, aria-label=name, title=name)
		.navigation-button
			Icon(icon)
			span.navigation-text= name

component SidebarButton(name string, target string, icon string)
	a.sidebar-link.ajax(href=target, aria-label=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

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