Added search

mixins/Sidebar.pixy

@@ -15,16 +15,21 @@ component Sidebar(user *arn.User)
 	SidebarButton("Artworks", "/artworks", "paint-brush")
 	SidebarButton("Soundtracks", "/soundtracks", "headphones")
 	SidebarButton("AMVs", "/amvs", "video-camera")
+	//- SidebarButton("Games", "/games", "gamepad")
 	SidebarButton("Users", "/users", "globe")
+	//- SidebarButton("Search", "/search", "search")
 
 	if user != nil
-		if user.Role != ""
 		SidebarButton("Statistics", "/statistics", "pie-chart")
-		
 		SidebarButton("Settings", "/settings", "cog")
 
 	.spacer
 
+	.sidebar-link(aria-label="Search")
+		.sidebar-button
+			Icon("search")
+			FuzzySearch
+
 	SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle")
 
 	if user != nil

scripts/AnimeNotifier.ts

@@ -98,11 +98,6 @@ export class AnimeNotifier {
 	}
 
 	run() {
-		// Add "osx" class on macs so we can set a proper font-size
-		if(navigator.platform.includes("Mac")) {
-			document.documentElement.classList.add("osx")
-		}
-
 		// Check for WebP support
 		this.webpEnabled = canUseWebP()
 
@@ -127,6 +122,9 @@ export class AnimeNotifier {
 		this.sideBar = this.app.find("sidebar")
 
 		document.body.addEventListener("click", e => {
+			if(document.activeElement.id === "search")
+				return;
+
 			this.sideBar.classList.remove("sidebar-visible")
 		})
 

styles/embedded.scarlet

@@ -4,8 +4,8 @@ remove-margin = 1.1rem
 	// Put navigation to the bottom of the screen
 	flex-direction column-reverse !important
 
-	.extension-navigation
-		display inline-block
+	// .extension-navigation
+	// 	display inline-block
 
 	.anime-list
 		// max-width 500px

styles/input.scarlet

@@ -19,7 +19,6 @@ input, textarea, select
 		ui-disabled
 
 input, select
-	width 100%
 	padding 0.5rem 1rem
 
 input

styles/navigation.scarlet

@@ -42,45 +42,53 @@
 	display none
 
 #search
-	flex 1
-	border-radius 0
 	background transparent
 	border none
-	
-	color nav-link-hover-color
 	font-size 1em
-	min-width 0
+	padding 0
+	width 0
+	flex-grow 1
 
-	::placeholder
-		color nav-link-color
+// #search
+// 	flex 1
+// 	border-radius 0
+// 	background transparent
+// 	border none
 	
-	:focus
-		border none
-		box-shadow none
+// 	color nav-link-hover-color
+// 	font-size 1em
+// 	min-width 0
 
-.extra-navigation
-	display none
+// 	::placeholder
+// 		color nav-link-color
 
-.extension-navigation
-	display none
+// 	:focus
+// 		border none
+// 		box-shadow none
 
-> 330px
-	.navigation-button, #search
-		font-size 1.3em
+// .extra-navigation
+// 	display none
+
+// .extension-navigation
+// 	display none
+
+// > 330px
+// 	.navigation-button, #search
+// 		font-size 1.3em
 
 // > 550px
 // 	#navigation
 // 		padding 0 content-padding
 
-> 930px
-	.navigation-button, #search
-		font-size 1.2em
+// > 930px
+// 	.navigation-button, #search
+// 		font-size 1.2em
 	
-	#navigation
-		justify-content flex-start
+// 	#navigation
+// 		justify-content flex-start
 	
-	.extra-navigation
-		display block
+// 	.extra-navigation
+// 		display block
 
 // @media screen and (max-device-height: 500px)
 // 	#navigation