Improved menu

main.go

@@ -16,6 +16,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/dashboard"
 	"github.com/animenotifier/notify.moe/pages/forum"
 	"github.com/animenotifier/notify.moe/pages/forums"
+	"github.com/animenotifier/notify.moe/pages/login"
 	popularanime "github.com/animenotifier/notify.moe/pages/popular-anime"
 	"github.com/animenotifier/notify.moe/pages/posts"
 	"github.com/animenotifier/notify.moe/pages/profile"
@@ -61,6 +62,7 @@ func main() {
 	app.Ajax("/admin", admin.Get)
 	app.Ajax("/search/:term", search.Get)
 	app.Ajax("/users", users.Get)
+	app.Ajax("/login", login.Get)
 	app.Ajax("/airing", airing.Get)
 	app.Ajax("/webdev", webdev.Get)
 	// app.Ajax("/genres", genres.Get)

mixins/Navigation.pixy

@@ -14,35 +14,34 @@ component LoggedOutMenu
 
 		.extra-navigation
 			NavigationButton("Users", "/users", "globe")
-			NavigationButton("Airing", "/airing", "th")
+		
-			NavigationButton("Settings", "/settings", "cog")
+		NavigationButton("Airing", "/airing", "th")
+		NavigationButton("Login", "/login", "sign-in")
 
 component LoggedInMenu(user *arn.User)
 	nav#navigation.logged-in
-		ExtraNavigationButton("Dash", "/", "inbox")
+		NavigationButton("Dash", "/", "inbox")
-		ExtraNavigationButton("Anime", "/anime", "television")
+		NavigationButton("Anime", "/anime", "television")
-		ExtraNavigationButton("Profile", "/+", "user")
+		NavigationButton("Profile", "/+", "user")
-		ExtraNavigationButton("Forum", "/forum", "comment")
+		NavigationButton("Forum", "/forum", "comment")
 
 		FuzzySearch
 
 		.extra-navigation
-			ExtraNavigationButton("Users", "/users", "globe")
+			NavigationButton("Users", "/users", "globe")
-			ExtraNavigationButton("Airing", "/airing", "th")
+
-			ExtraNavigationButton("Settings", "/settings", "cog")
+		.extra-navigation
+			NavigationButton("Airing", "/airing", "th")
+		
+		NavigationButton("Settings", "/settings", "cog")
 			
+		.extra-navigation
 			NavigationButtonNoAJAX("Logout", "/logout", "sign-out")
 
 component FuzzySearch
 	input#search.action(data-action="search", data-trigger="input", type="text", placeholder="Search...", title="Shortcut: Ctrl + Q")
 
 component NavigationButton(name string, target string, icon string)
-	a.navigation-link.ajax(href=target, aria-label=name)
-		.navigation-button
-			Icon(icon)
-			span.navigation-text= name
-
-component ExtraNavigationButton(name string, target string, icon string)
 	a.navigation-link.ajax(href=target, aria-label=name, title=name)
 		.navigation-button
 			Icon(icon)

pages/frontpage/frontpage.pixy

@@ -4,8 +4,4 @@ component FrontPage
 		a(href="https://paypal.me/blitzprog", target="_blank", rel="noopener") Support the development
 
 	p
-		a(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener") Source on GitHub
+		a(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener") Source on GitHub
-	
-	.login-buttons
-		a.login-button(href="/auth/google")
-			img.login-button-image(src="/images/login/google", alt="Google Login", title="Login with your Google account")

pages/login/login.go

@@ -0,0 +1,11 @@
+package login
+
+import (
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/notify.moe/components"
+)
+
+// Get ...
+func Get(ctx *aero.Context) string {
+	return ctx.HTML(components.Login())
+}

pages/login/login.pixy

@@ -0,0 +1,4 @@
+component Login
+	.login-buttons
+		a.login-button(href="/auth/google")
+			img.login-button-image(src="/images/login/google", alt="Google Login", title="Login with your Google account")

styles/navigation.scarlet

@@ -58,13 +58,6 @@
 .extra-navigation
 	display none
 
-	.navigation-text
-		display none
-
-	.navigation-button
-		.icon
-			margin-right 0
-
 > 330px
 	.navigation-button, #search
 		font-size 1.3em
@@ -75,22 +68,13 @@
 	
 	#navigation
 		justify-content flex-start
-	
-	.logged-out
-		.navigation-text
-			display inline-block
-		
-		.navigation-button
-			.icon
-				margin-right 0.5em
 
 	#search
 		display block
 		flex 1
 	
 	.extra-navigation
-		horizontal
+		display block
-		justify-content flex-end
 
 < 400px height
 	#navigation